diff --git a/types/spectacle/index.d.ts b/types/spectacle/index.d.ts
index e00b5dd3c0..621f08f67e 100644
--- a/types/spectacle/index.d.ts
+++ b/types/spectacle/index.d.ts
@@ -1,164 +1,321 @@
-// Type definitions for Spectacle 1.2.0
-// Project: https://github.com/FormidableLabs/victory
+// Type definitions for Spectacle 5.2.2
+// Project: https://github.com/FormidableLabs/spectacle
 // Definitions by: Zachary Maybury <https://github.com/zmaybury>
+//                 Kylie Stewart <https://github.com/kale-stew>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
 /// <reference types="react"/>
 
 declare module "spectacle" {
-	import * as React from "react";
+    import * as React from "react";
+    import * as CSS from "csstype";
+    /**
+     * Alignment Types for Spectacle
+     */
+    type alignType =
+        | "flex-start flex-start"
+        | "flex-start center"
+        | "flex-start flex-end"
+        | "center flex-start"
+        | "center center"
+        | "center flex-end"
+        | "flex-end flex-start"
+        | "flex-end center"
+        | "flex-end flex-end";
 
-	/**
-	 * Transition Types for Spectacle
-	 */
-	type transitionType = "slide"|"zoom"|"fade"|"spin";
+    /**
+     * Animation Types for Spectacle
+     */
+    type easeType =
+        | "back"
+        | "backIn"
+        | "backOut"
+        | "backInOut"
+        | "bounce"
+        | "bounceIn"
+        | "bounceOut"
+        | "bounceInOut"
+        | "circle"
+        | "circleIn"
+        | "circleOut"
+        | "circleInOut"
+        | "linear"
+        | "linearIn"
+        | "linearOut"
+        | "linearInOut"
+        | "cubic"
+        | "cubicIn"
+        | "cubicOut"
+        | "cubicInOut"
+        | "elastic"
+        | "elasticIn"
+        | "elasticOut"
+        | "elasticInOut"
+        | "exp"
+        | "expIn"
+        | "expOut"
+        | "expInOut"
+        | "poly"
+        | "polyIn"
+        | "polyOut"
+        | "polyInOut"
+        | "quad"
+        | "quadIn"
+        | "quadOut"
+        | "quadInOut"
+        | "sin"
+        | "sinIn"
+        | "sinOut"
+        | "sinInOut";
 
-	/**
-	 * Progress Types for Spectacle
-	 */
-	type progressType = "pacman"|"bar"|"number"|"none";
+    /**
+     * Progress Types for Spectacle
+     */
+    type progressType = "pacman" | "bar" | "number" | "none";
 
-	/**
-	 * Alignment Types for Spectacle
-	 */
-	type alignType =
-		"flex-start flex-start"|"flex-start center"|"flex-start flex-end"|
-		"center flex-start"|"center center"|"center flex-end"|
-		"flex-end flex-start"|"flex-end center"|"flex-end flex-end";
+    /**
+     * S Types for StyledS in Spectacle
+     */
+    type sType = "italic" | "bold" | "line-through" | "underline";
 
-	/**
-	 * Base props for many Spectacle components
-	 */
-	export interface BaseProps {
-		italic?:boolean,
-		bold?:boolean,
-		caps?:boolean,
-		margin?:number|string,
-		padding?:number|string,
-		textColor?:string,
-		textSize?:string,
-		textAlign?:string,
-		textFont?:string,
-		bgColor?:string,
-		bgImage?:string,
-		bgDarken?:number
-	}
+    /**
+     * Target Types for links
+     */
+    type targetType = "_blank" | "_self" | "_parent" | "_top";
 
-	export type Theme = { [key: string ]: string | number }
+    /**
+     * Theme Types for CodePane in Spectacle
+     */
+    type themeType = "dark" | "light" | "external";
 
-	export interface SpectacleProps {
-		theme?: Theme
-	}
+    /**
+     * Transition Types for Spectacle
+     */
+    type transitionType = "slide" | "zoom" | "fade" | "spin";
 
-	export interface DeckProps {
-		transition?:transitionType[],
-		transitionDuration?:number,
-		progress?:progressType,
-		controls?:boolean,
-		theme?: Theme
-	}
+    /**
+     * All available DOM style properties and their types
+     * https://www.npmjs.com/package/csstype
+     */
+    export interface CSSProperties extends CSS.Properties<string | number> {}
 
-	export interface SlideProps extends BaseProps {
-		align?:alignType,
-		transition?:transitionType[],
-		transitionDuration?:number,
-		notes?:string,
-		id?:string
-	}
+    export interface AnimProps {
+        easing: easeType;
+        fromStyle: CSSProperties | CSSProperties[];
+        onAnim?: (forwards?: boolean, animIndex?: number) => void;
+        order?: number;
+        route?: object;
+        style?: CSSProperties;
+        toStyle: CSSProperties | CSSProperties[];
+        transitionDuration: number;
+    }
 
-	export interface MarkdownProps {
-		source?:string,
-		mdastConfig?:{ [key: string ]: string | number }
-	}
+    export interface AppearProps {
+        easing?: easeType;
+        endValue?: object;
+        fid?: string;
+        order?: number;
+        startValue?: object;
+        style?: BaseProps["style"];
+        transitionDuration?: number;
+    }
 
-	export interface CodePaneProps extends BaseProps {
-		lang?:string,
-		source?:string
-	}
+    /**
+     * Base props for many Spectacle components
+     */
+    export interface BaseProps {
+        bgColor?: string;
+        bgDarken?: number;
+        bgImage?: string;
+        bold?: boolean;
+        caps?: boolean;
+        className?: string;
+        italic?: boolean;
+        margin?: number | string;
+        padding?: number | string;
+        style?: CSSProperties;
+        textAlign?: string;
+        textColor?: string;
+        textFont?: string;
+        textSize?: string;
+    }
+    export interface CodePaneProps {
+        className?: BaseProps["className"];
+        contentEditable?: boolean;
+        lang?: string;
+        source?: string;
+        style?: BaseProps["style"];
+        theme?: themeType;
+    }
 
-	export interface HeadingProps extends BaseProps {
-		fit?:boolean,
-		lineHeight?:number
-		size?:number;
-	}
+    export interface ComponentPlaygroundProps {
+        code?: string;
+        previewBackgroundColor?: string;
+        scope?: object;
+        theme?: themeType;
+        transformCode?: (code: string) => string;
+    }
 
-	export interface ImageProps extends BaseProps {
-		display?:string,
-		height?:number,
-		src?:string,
-		width?:number|string
-	}
+    export interface DeckProps {
+        autoplay?: boolean;
+        autoplayDuration?: number;
+        autoplayLoop?: boolean;
+        controls?: boolean;
+        globalStyles?: boolean;
+        history?: any; // Needs a type, see https://github.com/ReactTraining/history
+        progress?: progressType;
+        theme?: Theme;
+        transition?: transitionType[];
+        transitionDuration?: number;
+    }
 
-	export interface LinkProps extends BaseProps {
-		href?:string
-	}
+    export interface FillProps {
+        className?: string;
+        style?: CSSProperties;
+    }
 
-	export interface SProps extends BaseProps {
-		type?:string
-	}
+    export interface FitProps extends FillProps {}
 
-	export interface TextProps extends BaseProps {
-		fit?:boolean,
-		lineHeight?:number
-	}
+    export interface GoToActionProps {
+        margin?: BaseProps["margin"];
+        padding?: BaseProps["padding"];
+        render?: (goToSlide?: (slide: number | string) => void) => void;
+        slide?: number | string;
+        style?: BaseProps["style"];
+    }
 
-	export class Spectacle extends React.Component<SpectacleProps> {}
+    export interface HeadingProps extends BaseProps {
+        fit?: boolean;
+        lineHeight?: number;
+        size?: number;
+    }
 
-	export class Deck extends React.Component<DeckProps> {}
+    export interface ImageProps {
+        alt?: string;
+        className?: BaseProps["className"];
+        display?: string;
+        height?: number | string;
+        margin?: BaseProps["margin"];
+        padding?: BaseProps["padding"];
+        src?: string;
+        width?: number | string;
+    }
 
-	export class Slide extends React.Component<SlideProps> {}
+    export interface LayoutProps {
+        style?: CSSProperties;
+    }
 
-	export class Layout extends React.Component<any> {}
+    export interface LinkProps extends BaseProps {
+        href?: string;
+        target?: targetType;
+    }
 
-	export class Fit extends React.Component<any> {}
+    export interface MarkdownProps {
+        mdastConfig?: { [key: string]: number | string };
+        source?: string;
+    }
 
-	export class Fill extends React.Component<any> {}
+    export interface SlideProps extends BaseProps {
+        align?: alignType;
+        contentStyles?: CSSProperties;
+        controlColor?: string;
+        dispatch?: () => void;
+        hash?: number | string;
+        progressColor?: string;
+        history?: any; // Needs a type, see https://github.com/ReactTraining/history
+        id?: string;
+        lastSlideIndex?: number;
+        notes?: string;
+        onActive?: (slideIndex: string | number) => void;
+        slideIndex?: number;
+        transition?: transitionType[];
+        transitionDuration?: number;
+        transitionIn?: transitionType[];
+        transitionOut?: transitionType[];
+    }
 
-	export class Markdown extends React.Component<MarkdownProps> {}
+    export interface SProps extends BaseProps {
+        type?: sType | sType[];
+    }
 
-	export class Appear extends React.Component<any> {}
+    export interface TextProps extends BaseProps {
+        fit?: boolean;
+        lineHeight?: number;
+    }
 
-	export class BlockQuote extends React.Component<BaseProps> {}
+    export type Theme = { [key: string]: number | string };
 
-	export class Quote extends React.Component<BaseProps> {}
+    export class Anim extends React.Component<AnimProps> {}
 
-	export class Cite extends React.Component<BaseProps> {}
+    export class Appear extends React.Component<AppearProps> {}
 
-	export class CodePane extends React.Component<CodePaneProps> {}
+    export class BlockQuote extends React.Component<BaseProps> {}
 
-	export class Code extends React.Component<BaseProps> {}
+    export class Cite extends React.Component<BaseProps> {}
 
-	export class Heading extends React.Component<HeadingProps> {}
+    export class Code extends React.Component<BaseProps> {}
 
-	export class Image extends React.Component<ImageProps> {}
+    export class CodePane extends React.Component<CodePaneProps> {}
 
-	export class Link extends React.Component<LinkProps> {}
+    export class ComponentPlayground extends React.Component<
+        ComponentPlaygroundProps
+    > {}
 
-	export class List extends React.Component<BaseProps> {}
+    export class Deck extends React.Component<DeckProps> {}
 
-	export class ListItem extends React.Component<BaseProps> {}
+    export class Fill extends React.Component<FillProps> {}
 
-	export class S extends React.Component<SProps> {}
+    export class Fit extends React.Component<FitProps> {}
 
-	export class Table extends React.Component<BaseProps> {}
+    export class GoToAction extends React.Component<GoToActionProps> {}
 
-	export class TableRow extends React.Component<BaseProps> {}
+    export class Heading extends React.Component<HeadingProps> {}
 
-	export class TableHeaderItem extends React.Component<BaseProps> {}
+    export class Image extends React.Component<ImageProps> {}
 
-	export class TableItem extends React.Component<BaseProps> {}
+    export class Layout extends React.Component<LayoutProps> {}
 
-	export class Text extends React.Component<TextProps> {}
+    export class Link extends React.Component<LinkProps> {}
+
+    export class List extends React.Component<BaseProps> {}
+
+    export class ListItem extends React.Component<BaseProps> {}
+
+    export class Markdown extends React.Component<MarkdownProps> {}
+
+    export class Notes extends React.Component<BaseProps> {}
+
+    export class Quote extends React.Component<BaseProps> {}
+
+    export class S extends React.Component<SProps> {}
+
+    export class Slide extends React.Component<SlideProps> {}
+
+    export class SlideSet extends React.Component<BaseProps> {}
+
+    export class Table extends React.Component<BaseProps> {}
+
+    export class TableBody extends React.Component<BaseProps> {}
+
+    export class TableHeader extends React.Component<BaseProps> {}
+
+    export class TableHeaderItem extends React.Component<BaseProps> {}
+
+    export class TableItem extends React.Component<BaseProps> {}
+
+    export class TableRow extends React.Component<BaseProps> {}
+
+    export class Text extends React.Component<TextProps> {}
 }
 
 declare module "spectacle/lib/utils/preloader" {
-	const preloader: (obj: object) => void;
-	export default preloader;
+    const preloader: (obj: object) => void;
+    export default preloader;
 }
 
 declare module "spectacle/lib/themes/default" {
-	import { Theme } from "spectacle";
-	const createTheme: (...args: object[]) => Theme;
-	export default createTheme;
+    import { Theme } from "spectacle";
+    const createTheme: (...args: object[]) => Theme;
+    export default createTheme;
 }
diff --git a/types/spectacle/package.json b/types/spectacle/package.json
new file mode 100644
index 0000000000..9de3dd17fa
--- /dev/null
+++ b/types/spectacle/package.json
@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+      "csstype": "^2.2.0"
+    }
+  }
diff --git a/types/spectacle/spectacle-tests.tsx b/types/spectacle/spectacle-tests.tsx
index f0a0b65e5a..04c3403f41 100644
--- a/types/spectacle/spectacle-tests.tsx
+++ b/types/spectacle/spectacle-tests.tsx
@@ -1,133 +1,377 @@
-/**
- * Spectacle Test Examples
- *
- */
-
-import * as React from 'react';
+import * as React from "react";
 import {
-	Appear,
-	BlockQuote,
-	Cite,
-	Deck,
-	Fill,
-	Heading,
-	Layout,
-	Link,
-	ListItem,
-	List,
-	Quote,
-	Slide,
-	Spectacle,
-	Text
+    Anim,
+    Appear,
+    BlockQuote,
+    Cite,
+    CodePane,
+    ComponentPlayground,
+    Deck,
+    Fill,
+    GoToAction,
+    Heading,
+    Image,
+    Layout,
+    Link,
+    List,
+    ListItem,
+    Markdown,
+    Notes,
+    Quote,
+    Slide,
+    SlideSet,
+    Table,
+    TableBody,
+    TableHeader,
+    TableHeaderItem,
+    TableItem,
+    TableRow,
+    Text
 } from "spectacle";
 
 // Import image preloader util
-import preloader from 'spectacle/lib/utils/preloader'
+import preloader from "spectacle/lib/utils/preloader";
 
 // Import theme
-import createTheme from 'spectacle/lib/themes/default'
+import createTheme from "spectacle/lib/themes/default";
 
 const images = {
-  city: 'a-url'
-}
+    city: "a-url",
+    logo: "another-url"
+};
 
-preloader(images)
+preloader(images);
 
-const theme = createTheme({
-  primary: 'white',
-  secondary: '#1F2022',
-  tertiary: '#03A9FC',
-  quartenary: '#CECECE'
-}, {
-  primary: 'Montserrat',
-  secondary: 'Helvetica'
-})
+const theme = createTheme(
+    {
+        primary: "white",
+        secondary: "#1F2022",
+        tertiary: "#03A9FC",
+        quartenary: "#CECECE"
+    },
+    {
+        primary: "Montserrat",
+        secondary: "Helvetica"
+    }
+);
 
 export class SpectacleTest extends React.Component {
-	callback() {
-		alert('Callback: ' + JSON.stringify(arguments));
-	}
-
-	public render() {
-		return (<Spectacle>
-			<Deck transition={["zoom", "slide"]} transitionDuration={500}>
-				<Slide transition={["zoom"]} bgColor="primary">
-					<Heading size={1} fit caps lineHeight={1} textColor="black">
-						Spectacle
-					</Heading>
-					<Heading size={1} fit caps>
-						A ReactJS Presentation Library
-					</Heading>
-					<Heading size={1} fit caps textColor="black">
-						Where You Can Write Your Decks In JSX
-					</Heading>
-					<Link href="https://github.com/FormidableLabs/spectacle">
-						<Text bold caps textColor="tertiary">View on Github</Text>
-					</Link>
-					<Text textSize="1.5em" margin="20px 0px 0px" bold>Hit Your Right Arrow To Begin!</Text>
-				</Slide>
-				<Slide transition={["slide"]} bgColor="black" notes="You can even put notes on your slide. How awesome is that?">
-					<Heading size={2} caps fit textColor="primary" textFont="primary">
-						Wait what?
-					</Heading>
-				</Slide>
-				<Slide transition={["slide"]} bgDarken={0.75}>
-					<Appear fid="1">
-						<Heading size={1} caps fit textColor="primary">
-							Full Width
-						</Heading>
-					</Appear>
-					<Appear fid="2">
-						<Heading size={1} caps fit textColor="tertiary">
-							Adjustable Darkness
-						</Heading>
-					</Appear>
-					<Appear fid="3">
-						<Heading size={1} caps fit textColor="primary">
-							Background Imagery
-						</Heading>
-					</Appear>
-				</Slide>
-				<Slide transition={["zoom", "fade"]} bgColor="primary">
-					<Heading caps fit>Flexible Layouts</Heading>
-					<Layout>
-						<Fill>
-							<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
-								Left
-							</Heading>
-						</Fill>
-						<Fill>
-							<Heading size={4} caps textColor="secondary" bgColor="white" margin={10}>
-								Right
-							</Heading>
-						</Fill>
-					</Layout>
-				</Slide>
-				<Slide transition={["slide"]} bgColor="black">
-					<BlockQuote>
-						<Quote>Wonderfully formatted quotes</Quote>
-						<Cite>Ken Wheeler</Cite>
-					</BlockQuote>
-				</Slide>
-				<Slide transition={["slide", "spin"]} bgColor="primary">
-					<Heading caps fit size={1} textColor="tertiary">
-						Smooth
-					</Heading>
-					<Heading caps fit size={1} textColor="secondary">
-						Combinable Transitions
-					</Heading>
-				</Slide>
-				<Slide transition={["fade"]} bgColor="secondary" textColor="primary">
-					<List>
-						<Appear><ListItem>Inline style based theme system</ListItem></Appear>
-						<Appear><ListItem>Autofit text</ListItem></Appear>
-						<Appear><ListItem>Flexbox layout system</ListItem></Appear>
-						<Appear><ListItem>React-Router navigation</ListItem></Appear>
-						<Appear><ListItem>PDF export</ListItem></Appear>
-						<Appear><ListItem>And...</ListItem></Appear>
-					</List>
-				</Slide>
-			</Deck>
-		</Spectacle>);
-	}
+    public render() {
+        return (
+            <Deck
+                transition={["zoom", "slide"]}
+                theme={theme}
+                transitionDuration={500}
+            >
+                <Slide transition={["zoom"]} bgColor="primary">
+                    <Heading size={1} fit caps lineHeight={1} textColor="black">
+                        Spectacle
+                    </Heading>
+                    <Heading size={1} fit caps>
+                        A ReactJS Presentation Library
+                    </Heading>
+                    <Heading size={1} fit caps textColor="black">
+                        Where You Can Write Your Decks In JSX
+                    </Heading>
+                    <Link href="https://github.com/FormidableLabs/spectacle">
+                        <Text bold caps textColor="tertiary">
+                            View on Github
+                        </Text>
+                    </Link>
+                    <Text textSize="1.5em" margin="20px 0px 0px" bold>
+                        Hit Your Right Arrow To Begin!
+                    </Text>
+                </Slide>
+                <Slide
+                    id="wait-what"
+                    transition={["slide"]}
+                    bgColor="black"
+                    notes="You can even put notes on your slide. How awesome is that?"
+                >
+                    <Heading
+                        size={2}
+                        caps
+                        fit
+                        textColor="primary"
+                        textFont="primary"
+                    >
+                        Wait what?
+                    </Heading>
+                </Slide>
+                <Slide
+                    transitionIn={["zoom", "fade"]}
+                    transitionOut={["slide", "fade"]}
+                    bgDarken={0.75}
+                >
+                    <Appear fid="1">
+                        <Heading size={1} caps fit textColor="primary">
+                            Full Width
+                        </Heading>
+                    </Appear>
+                    <Appear fid="2">
+                        <Heading size={1} caps fit textColor="tertiary">
+                            Adjustable Darkness
+                        </Heading>
+                    </Appear>
+                    <Appear fid="3">
+                        <Heading size={1} caps fit textColor="primary">
+                            Background Imagery
+                        </Heading>
+                    </Appear>
+                </Slide>
+                <Slide
+                    transitionIn={["zoom", "fade"]}
+                    transitionOut={["slide", "fade"]}
+                    bgColor="primary"
+                    notes="<ul><li>talk about that</li><li>and that</li></ul>"
+                >
+                    <CodePane
+                        lang="jsx"
+                        source={""}
+                        style={{ margin: "20px auto" }}
+                    />
+                </Slide>
+                <Slide>
+                    <ComponentPlayground theme="dark" />
+                    <Notes>This is a component playground</Notes>
+                </Slide>
+                <Slide transition={["zoom", "fade"]} bgColor="primary">
+                    <Heading caps fit>
+                        Flexible Layouts
+                    </Heading>
+                    <Layout>
+                        <Fill>
+                            <Heading
+                                size={4}
+                                caps
+                                textColor="secondary"
+                                bgColor="white"
+                                margin={10}
+                            >
+                                Left
+                            </Heading>
+                        </Fill>
+                        <Fill>
+                            <Heading
+                                size={4}
+                                caps
+                                textColor="secondary"
+                                bgColor="white"
+                                margin={10}
+                            >
+                                Right
+                            </Heading>
+                        </Fill>
+                    </Layout>
+                </Slide>
+                <Slide
+                    transition={["spin", "zoom"]}
+                    bgColor="tertiary"
+                    controlColor="primary"
+                    progressColor="primary"
+                >
+                    <Heading caps fit size={1} textColor="primary">
+                        Inline Markdown
+                    </Heading>
+                    <Markdown>
+                        {`
+  You can write inline images, [Markdown Links](http://commonmark.org), paragraph text and most other markdown syntax
+  * Lists too!
+  * With ~~strikethrough~~ and _italic_
+  * And let's not forget **bold**
+  * Add some \`inline code\` to your sldes!
+            `}
+                    </Markdown>
+                </Slide>
+                <Slide transition={["slide"]}>
+                    <Anim
+                        onAnim={(forwards, animIndex) => {
+                            /* eslint-disable */
+                            console.log("forwards ", forwards);
+                            console.log("animIndex ", animIndex);
+                            /* eslint-enable */
+                        }}
+                        fromStyle={{
+                            opacity: 0,
+                            transform:
+                                "translate3d(0px, -100px, 0px)  scale(1) rotate(0deg)"
+                        }}
+                        toStyle={[
+                            {
+                                opacity: 1,
+                                transform:
+                                    "translate3d(0px, 0px, 0px)  scale(1) rotate(0deg)"
+                            },
+                            {
+                                opacity: 1,
+                                transform:
+                                    "translate3d(0px, 0px, 0px) scale(1.6) rotate(-15deg)"
+                            },
+                            {
+                                opacity: 1,
+                                transform:
+                                    "translate3d(0px, 0px, 0px)  scale(0.8) rotate(0deg)"
+                            }
+                        ]}
+                        easing={"bounceOut"}
+                        transitionDuration={500}
+                    >
+                        <React.Fragment>
+                            <Heading size={6} caps fit textColor="secondary">
+                                Flexible
+                                <br />
+                                animations
+                            </Heading>
+                        </React.Fragment>
+                    </Anim>
+                </Slide>
+                <Slide>
+                    <Heading size={2} textColor="secondary" margin="0.25em">
+                        Mix it up!
+                    </Heading>
+                    <Heading size={6} textColor="tertiary">
+                        You can even jump to different slides with a standard
+                        button or custom component!
+                    </Heading>
+                    <GoToAction margin="1em" slide={8}>
+                        Jump to Slide 8
+                    </GoToAction>
+                    <GoToAction
+                        render={goToSlide => (
+                            <select
+                                defaultValue=""
+                                style={{
+                                    background: "#000",
+                                    color: "#fff",
+                                    fontSize: "1.1em"
+                                }}
+                                onChange={({ target }) =>
+                                    goToSlide(target.value)
+                                }
+                            >
+                                <option value="" disabled>
+                                    Custom Slide Picker
+                                </option>
+                                <option value="wait-what">
+                                    Wait What!? Slide
+                                </option>
+                                <option value={3}>Slide 3</option>
+                            </select>
+                        )}
+                    />
+                </Slide>
+                <Slide transition={["slide"]} bgColor="black">
+                    <BlockQuote>
+                        <Quote>Wonderfully formatted quotes</Quote>
+                        <Cite>Ken Wheeler</Cite>
+                    </BlockQuote>
+                </Slide>
+                <Slide transition={["slide"]} bgColor="black">
+                    <BlockQuote>
+                        <Quote>Wonderfully formatted quotes</Quote>
+                        <Cite>Ken Wheeler</Cite>
+                    </BlockQuote>
+                </Slide>
+                <SlideSet>
+                    <Slide
+                        transition={["fade"]}
+                        bgColor="secondary"
+                        textColor="primary"
+                    >
+                        <List>
+                            <Appear>
+                                <ListItem>
+                                    Inline style based theme system
+                                </ListItem>
+                            </Appear>
+                            <Appear>
+                                <ListItem>Autofit text</ListItem>
+                            </Appear>
+                            <Appear>
+                                <ListItem>Flexbox layout system</ListItem>
+                            </Appear>
+                            <Appear>
+                                <ListItem>PDF export</ListItem>
+                            </Appear>
+                            <Appear>
+                                <ListItem>And...</ListItem>
+                            </Appear>
+                        </List>
+                    </Slide>
+                    <Slide transition={["slide"]} bgColor="primary">
+                        <Heading size={1} caps fit textColor="tertiary">
+                            You can even share styles with SlideSet
+                        </Heading>
+                    </Slide>
+                </SlideSet>
+                <Slide
+                    transition={["slide"]}
+                    bgColor="primary"
+                    notes="Hard to find cities without any pizza"
+                >
+                    <Heading
+                        size={4}
+                        caps
+                        textColor="secondary"
+                        bgColor="white"
+                        margin={10}
+                    >
+                        Pizza Toppings
+                    </Heading>
+                    <Layout>
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHeaderItem />
+                                    <TableHeaderItem>2011</TableHeaderItem>
+                                    <TableHeaderItem>2013</TableHeaderItem>
+                                    <TableHeaderItem>2015</TableHeaderItem>
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                <TableRow>
+                                    <TableItem>None</TableItem>
+                                    <TableItem>61.8%</TableItem>
+                                    <TableItem>39.6%</TableItem>
+                                    <TableItem>35.0%</TableItem>
+                                </TableRow>
+                                <TableRow>
+                                    <TableItem>Pineapple</TableItem>
+                                    <TableItem>28.3%</TableItem>
+                                    <TableItem>54.5%</TableItem>
+                                    <TableItem>61.5%</TableItem>
+                                </TableRow>
+                                <TableRow>
+                                    <TableItem>Pepperoni</TableItem>
+                                    <TableItem />
+                                    <TableItem>50.2%</TableItem>
+                                    <TableItem>77.2%</TableItem>
+                                </TableRow>
+                                <TableRow>
+                                    <TableItem>Olives</TableItem>
+                                    <TableItem />
+                                    <TableItem>24.9%</TableItem>
+                                    <TableItem>55.9%</TableItem>
+                                </TableRow>
+                            </TableBody>
+                        </Table>
+                    </Layout>
+                </Slide>
+                <Slide transition={["spin", "slide"]} bgColor="tertiary">
+                    <Heading
+                        size={1}
+                        caps
+                        fit
+                        lineHeight={1.5}
+                        textColor="primary"
+                    >
+                        Made with love in Seattle by
+                    </Heading>
+                    <Link href="http://www.formidable.com">
+                        <Image width="100%" src={images.logo} />
+                    </Link>
+                </Slide>
+            </Deck>
+        );
+    }
 }