diff --git a/package.json b/package.json
index d7937e7..5fb811f 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@patternfly/patternfly-next": "^1.0.175",
     "@patternfly/react-icons": "^3.5.0",
     "@patternfly/react-tokens": "^2.0.4",
+    "@patternfly/react-core": "^2.3.6",
     "axios": "^0.18.0",
     "braces": "^2.3.2",
     "react": "^16.8.4",
diff --git a/src/playbooks/PlaybookContainer.js b/src/playbooks/PlaybookContainer.js
index 565a8b0..273a396 100644
--- a/src/playbooks/PlaybookContainer.js
+++ b/src/playbooks/PlaybookContainer.js
@@ -1,9 +1,10 @@
 import React, { Component } from "react";
+import { List, ListItem } from '@patternfly/react-core';
 import { connect } from "react-redux";
 import { isEmpty } from "lodash";
 import { LoadingContainer, Container404 } from "../containers";
 import { getPlaybook } from "./playbooksActions";
-import TasksContainer from "../tasks/TasksContainer";
+
 
 export class PlaybookContainer extends Component {
   state = {
@@ -31,12 +32,73 @@ export class PlaybookContainer extends Component {
       <div>
         <div className="pf-c-card">
           <div class="pf-c-card__header">
-            <h1 className="pf-c-title pf-m-lg">Tasks</h1>
+            <h1 className="pf-c-title pf-m-lg">Hosts</h1>
           </div>
           <div className="pf-c-card__body">
-            <TasksContainer playbook={playbook} />
+            <table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>OK</th>
+                    <th>CHANGED</th>
+                    <th>FAILED</th>
+                    <th>SKIPPED</th>
+                    <th>UNREACHABLE</th>
+                </tr>
+                </thead>
+                <tbody>
+                {playbook.hosts.map(host => (
+                    <tr key={host.id}>
+                    <td data-label="Name">{host.name}</td>
+                    <td data-label="OK">{host.ok}</td>
+                    <td data-label="CHANGED">{host.changed}</td>
+                    <td data-label="FAILED">{host.failed}</td>
+                    <td data-label="SKIPPED">{host.skipped}</td>
+                    <td data-label="UNREACHABLE">{host.unreachable}</td>
+                    </tr>
+                ))}
+                </tbody>
+            </table>
           </div>
         </div>
+        <div className="pf-c-card">
+          <div class="pf-c-card__header">
+            <h1 className="pf-c-title pf-m-lg">Plays</h1>
+          </div>
+          {playbook.plays.map(play => (
+          <div className="pf-c-card__body">
+            <h2>{play.name}</h2>
+            <List>
+                <ListItem>Started: {play.started}</ListItem>
+                <ListItem>Ended: {play.ended}</ListItem>
+                <ListItem>Duration: {play.duration}</ListItem>
+            </List>
+            <table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
+                <thead>
+                <tr>
+                    <th>Task</th>
+                    <th>Host</th>
+                    <th>Action</th>
+                    <th>Duration</th>
+                    <th>Status</th>
+                </tr>
+                </thead>
+                <tbody>
+                {play.tasks.map(task =>
+                    task.results.map(result =>
+                    <tr key={result.id}>
+                    <th data-label="Task">{task.name}</th>
+                    <th data-label="Host">{result.host.name}</th>
+                    <th data-label="Action">{task.action}</th>
+                    <th data-label="Duration">{result.duration}</th>
+                    <th data-label="Status">{result.status}</th>
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+          </div>
+          ))}
+        </div>
       </div>
     );
   }
diff --git a/src/playbooks/PlaybookSummary.js b/src/playbooks/PlaybookSummary.js
index 75a78a0..33a69a9 100644
--- a/src/playbooks/PlaybookSummary.js
+++ b/src/playbooks/PlaybookSummary.js
@@ -149,19 +149,22 @@ export default class Playbook extends Component {
               </StatusAndName>
               <PlaybookInfos>
                 <PlaybookInfo>
-                  <b>{playbook.hosts.length}</b> Hosts
+                  <b>{playbook.items.plays}</b> Plays
                 </PlaybookInfo>
                 <PlaybookInfo>
-                  <b>{playbook.files.length}</b> Files
+                  <b>{playbook.items.tasks}</b> Tasks
                 </PlaybookInfo>
                 <PlaybookInfo>
-                  <b>{Object.keys(playbook.tasks).length}</b> tasks
+                  <b>{playbook.items.results}</b> Results
                 </PlaybookInfo>
                 <PlaybookInfo>
-                  <b>{Object.keys(playbook.plays).length}</b> plays
+                  <b>{playbook.items.hosts}</b> Hosts
                 </PlaybookInfo>
                 <PlaybookInfo>
-                  <b>{Object.keys(playbook.records).length}</b> records
+                  <b>{playbook.items.files}</b> Files
+                </PlaybookInfo>
+                <PlaybookInfo>
+                  <b>{playbook.items.records}</b> Records
                 </PlaybookInfo>
               </PlaybookInfos>
               <Duration>
diff --git a/src/tasks/TasksContainer.js b/src/tasks/TasksContainer.js
deleted file mode 100644
index 969afb0..0000000
--- a/src/tasks/TasksContainer.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { isEmpty } from "lodash";
-import { getTasks } from "./tasksActions";
-
-export class TasksContainer extends Component {
-  state = {
-    isLoading: true,
-    tasks: []
-  };
-
-  componentDidMount() {
-    const { playbook, getTasks } = this.props;
-    getTasks(playbook)
-      .then(response => this.setState({ tasks: response.data.results }))
-      .catch(error => console.log(error))
-      .then(() => this.setState({ isLoading: false }));
-  }
-
-  render() {
-    const { isLoading, tasks } = this.state;
-    if (isLoading) {
-      return null;
-    }
-    if (!isLoading && isEmpty(tasks)) {
-      return <div>no tasks for this playbook</div>;
-    }
-    return (
-      <table class="pf-c-table pf-m-compact pf-m-grid-md" role="grid">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Action</th>
-            <th>Duration</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {tasks.map(task => (
-            <tr key={task.id}>
-              <th data-label="Task Name">{task.name}</th>
-              <th data-label="Action">{task.action}</th>
-              <th data-label="Duration">{task.duration}</th>
-              <th data-label="Status">{task.status}</th>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    getTasks: playbook => dispatch(getTasks(playbook))
-  };
-}
-
-export default connect(
-  null,
-  mapDispatchToProps
-)(TasksContainer);
diff --git a/src/tasks/tasksActions.js b/src/tasks/tasksActions.js
deleted file mode 100644
index ad675bc..0000000
--- a/src/tasks/tasksActions.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import axios from "axios";
-
-export function getTasks(playbook) {
-  return (dispatch, getState) => {
-    const { apiURL } = getState().config;
-    return axios
-      .get(`${apiURL}/api/v1/tasks?playbook=${playbook.id}`);
-  };
-}