diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss
index d0ec8fa5685fa..939121ae861c0 100644
--- a/assets/stylesheets/_components.scss
+++ b/assets/stylesheets/_components.scss
@@ -103,7 +103,7 @@
 @import 'components/card/style';
 @import 'components/card-heading/style';
 @import 'components/chart/style';
-@import 'blocks/checklist/style';
+@import 'components/checklist/style';
 @import 'components/clipboard-button-input/style';
 @import 'components/domains/contact-details-form-fields/style';
 @import 'components/community-translator/style';
diff --git a/client/blocks/checklist/README.md b/client/blocks/checklist/README.md
deleted file mode 100644
index 184abcc701a5c..0000000000000
--- a/client/blocks/checklist/README.md
+++ /dev/null
@@ -1,83 +0,0 @@
-Checklist
-===========
-
-Checklist of `ChecklistItem`s.
-
-#### How to use:
-
-```jsx
-import Checklist from 'components/checklist';
-
-export default class ChecklistExample extends Component {
-	static displayName = 'Checklist';
-
-	state = {
-		showPlaceholder: false,
-		tasks: [
-			{
-				id: 'first-completed-task',
-				title: 'A completed task',
-				completedTitle: 'You completed the first task',
-				completedButtonText: 'View',
-				description: 'This row shows how completed tasks look.',
-				duration: '2 mins',
-				url: 'https://wordpress.com/url-to-the-first-task',
-				completed: true,
-			},
-			{
-				id: 'second-completed-task',
-				title: 'A second completed task',
-				completedTitle: 'You completed the second task',
-				description: 'This row shows how completed tasks look.',
-				duration: '2 mins',
-				url: 'https://wordpress.com/url-to-the-second-task',
-				completed: true,
-			},
-			{
-				id: 'site-name',
-				title: "Add your site's name or logo",
-				completedTitle: "You chose your site's name",
-				completedButtonText: 'Change',
-				description: "A logo or site name helps people know what site they're looking at.",
-				duration: '3 mins',
-				url: 'https://wordpress.com/url-to-site-name',
-				completed: false,
-			},
-		],
-	};
-
-	handleAction = id => {
-		const theTask = find( this.state.tasks, { id } );
-		console.log( `You will move to ${ theTask.url }.` );
-	};
-
-	handleToggle = id => {
-		const theTask = find( this.state.tasks, { id } );
-		theTask.completed = ! theTask.completed;
-
-		this.setState( { tasks: [ ...this.state.tasks ] } );
-	};
-
-	render() {
-		return (
-			<div>
-				<Checklist
-					tasks={ this.state.tasks }
-					onAction={ this.handleAction }
-					onToggle={ this.handleToggle }
-					isLoading={ this.state.showPlaceholder }
-					placeholderCount={ 3 }
-				/>
-			</div>
-		);
-	}
-}
-```
-
-#### Props
-
-* `tasks`: (array) A set of task objects, passed to `ChecklistItem`s
-* `onAction`: (function) Points the user to the given item's action URL. Takes the item's `id`.
-* `onToggle`: (function) Changes the state of the given item, toggled on or off. Takes the item's `id`.
-* `isLoading`: (boolean) Whether to show the placeholder or not.
-* `placeholderCount`: (number) The number of placeholder items to show.
diff --git a/client/blocks/checklist/docs/example.jsx b/client/blocks/checklist/docs/example.jsx
deleted file mode 100644
index 50fc7908f9de4..0000000000000
--- a/client/blocks/checklist/docs/example.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * External dependencies
- *
- * @format
- */
-
-import React, { Component } from 'react';
-import { find } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import Button from 'components/button';
-import Checklist from '../';
-
-export default class ChecklistExample extends Component {
-	static displayName = 'Checklist';
-
-	state = {
-		showPlaceholder: false,
-		tasks: [
-			{
-				id: 'first-completed-task',
-				title: 'A completed task',
-				completedTitle: 'You completed the first task',
-				completedButtonText: 'View',
-				description: 'This row shows how completed tasks look.',
-				duration: '2 mins',
-				url: 'https://wordpress.com/url-to-the-first-task',
-				completed: true,
-			},
-			{
-				id: 'second-completed-task',
-				title: 'A second completed task',
-				completedTitle: 'You completed the second task',
-				description: 'This row shows how completed tasks look.',
-				duration: '2 mins',
-				url: 'https://wordpress.com/url-to-the-second-task',
-				completed: true,
-			},
-			{
-				id: 'site-name',
-				title: "Add your site's name or logo",
-				completedTitle: "You chose your site's name",
-				completedButtonText: 'Change',
-				description: "A logo or site name helps people know what site they're looking at.",
-				duration: '3 mins',
-				url: 'https://wordpress.com/url-to-site-name',
-				completed: false,
-			},
-			{
-				id: 'site-colors',
-				title: "Pick your site's colors",
-				completedTitle: "You picked your site's colors",
-				completedButtonText: 'Change',
-				description: 'Add your personal touch to your site by picking your colors.',
-				duration: '2 mins',
-				url: 'https://wordpress.com/url-to-site-colors',
-				completed: false,
-			},
-			{
-				id: 'site-fonts',
-				title: "Pick your site's fonts",
-				completedTitle: "You picked your site's fonts",
-				description: 'Add your personal touch to your site by picking your fonts.',
-				duration: '2 mins',
-				url: 'https://wordpress.com/url-to-site-fonts',
-				completed: false,
-			},
-			{
-				id: 'header-image',
-				title: 'Change your header image',
-				completedTitle: 'You changed your header image',
-				description: 'Personalize your site with a custom image or background color.',
-				duration: '2 mins',
-				url: 'https://wordpress.com/url-to-header-image',
-				completed: false,
-			},
-		],
-	};
-
-	togglePlaceholder = () => {
-		this.setState( { showPlaceholder: ! this.state.showPlaceholder } );
-	};
-
-	handleAction = id => {
-		const theTask = find( this.state.tasks, { id } );
-		console.log( `You will move to ${ theTask.url }.` );
-	};
-
-	handleToggle = id => {
-		const theTask = find( this.state.tasks, { id } );
-		theTask.completed = ! theTask.completed;
-
-		this.setState( { tasks: [ ...this.state.tasks ] } );
-	};
-
-	render() {
-		const toggleText = this.state.showPlaceholder ? 'Hide Placeholder' : 'Show Placeholder';
-
-		return (
-			<div>
-				<Button className="docs__design-toggle" onClick={ this.togglePlaceholder }>
-					{ toggleText }
-				</Button>
-				<div style={ { clear: 'both' } } />
-				<Checklist
-					tasks={ this.state.tasks }
-					onAction={ this.handleAction }
-					onToggle={ this.handleToggle }
-					isLoading={ this.state.showPlaceholder }
-					placeholderCount={ 5 }
-				/>
-			</div>
-		);
-	}
-}
diff --git a/client/blocks/checklist/index.jsx b/client/blocks/checklist/index.jsx
deleted file mode 100644
index 461b9aa084c5e..0000000000000
--- a/client/blocks/checklist/index.jsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/**
- * External dependencies
- *
- * @format
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { filter, noop, times } from 'lodash';
-import classNames from 'classnames';
-
-/**
- * Internal dependencies
- */
-import ChecklistHeader from './checklist-header';
-import ChecklistTask from './checklist-task';
-import ChecklistPlaceholder from './checklist-placeholder';
-import { loadTrackingTool } from 'state/analytics/actions';
-
-export class Checklist extends Component {
-	static propTypes = {
-		tasks: PropTypes.array,
-		onAction: PropTypes.func,
-		onToggle: PropTypes.func,
-		isLoading: PropTypes.bool,
-		placeholderCount: PropTypes.number,
-	};
-
-	static defaultProps = {
-		tasks: [],
-		onAction: noop,
-		onToggle: noop,
-		isLoading: true,
-		placeholderCount: 5,
-	};
-
-	state = {
-		hideCompleted: false,
-	};
-
-	componentDidMount() {
-		this.props.loadTrackingTool( 'HotJar' );
-	}
-
-	toggleCompleted = () => {
-		this.setState( { hideCompleted: ! this.state.hideCompleted } );
-	};
-
-	getCompletedTasks() {
-		return filter( this.props.tasks, task => task.completed );
-	}
-
-	getUncompletedTasks() {
-		return filter( this.props.tasks, task => ! task.completed );
-	}
-
-	renderPlaceholder() {
-		return (
-			<div className={ classNames( 'checklist', 'is-expanded', 'is-placeholder' ) }>
-				<ChecklistHeader total={ 0 } completed={ 0 } hideCompleted={ false } />
-				{ times( this.props.placeholderCount, index => (
-					<ChecklistPlaceholder key={ index } />
-				) ) }
-			</div>
-		);
-	}
-
-	renderTask = task => {
-		return (
-			<ChecklistTask
-				buttonPrimary={ task.buttonPrimary }
-				buttonText={ task.buttonText }
-				completed={ task.completed }
-				completedButtonText={ task.completedButtonText }
-				completedTitle={ task.completedTitle }
-				description={ task.description }
-				duration={ task.duration }
-				id={ task.id }
-				key={ task.id }
-				onAction={ this.props.onAction }
-				onToggle={ this.props.onToggle }
-				title={ task.title }
-			/>
-		);
-	};
-
-	render() {
-		const { isLoading, tasks } = this.props;
-
-		if ( isLoading ) {
-			return this.renderPlaceholder();
-		}
-
-		return (
-			<div className={ classNames( 'checklist', { 'is-expanded': ! this.state.hideCompleted } ) }>
-				<ChecklistHeader
-					total={ tasks.length }
-					completed={ this.getCompletedTasks().length }
-					hideCompleted={ this.state.hideCompleted }
-					onClick={ this.toggleCompleted }
-				/>
-				{ ! this.state.hideCompleted && this.getCompletedTasks().map( this.renderTask ) }
-				{ this.getUncompletedTasks().map( this.renderTask ) }
-			</div>
-		);
-	}
-}
-
-export default connect(
-	null,
-	{ loadTrackingTool }
-)( Checklist );
diff --git a/client/components/checklist/README.md b/client/components/checklist/README.md
new file mode 100644
index 0000000000000..8a84197b89a2c
--- /dev/null
+++ b/client/components/checklist/README.md
@@ -0,0 +1,90 @@
+Checklist
+=======
+
+`Checklist` and `Task` are components used to render checklists.
+
+If your checklist tasks use checklist state from Redux, you can use `Task` from `blocks/checklist/tasks` to pull state by the `id` prop.
+
+## `Checklist` props
+
+### `isPlaceholder { bool } - default: false`
+
+Render as a placeholder.
+
+### `inferCompletedCount { bool } - default: false`
+
+If `Task` children will have a provided `complete` prop, the `Checklist` will count the completed
+tasks. This will not work when using connected tasks (see `blocks/checklist/task`).
+
+### `completedCount { number }`
+
+If you cannot use `inferCompletedCount` (you're using connected `Task`s), provide the completion
+count here.
+
+## `Task` props
+
+### `completed { bool }`
+
+Whether the task is complete.
+
+### `onClick { Function }`
+
+Handle the action button click.
+
+### `onDismiss { func }`
+
+Handle dismissal (or un-dismissal) click.
+
+### `buttonPrimary { bool }`
+
+Display the action button as primary.
+
+### `completedButtonText { node }`
+
+Button text on complete.
+
+### `completedTitle { node }`
+
+Override title when completed (fallback to `title` prop)
+
+### `description { node }`
+
+Description
+
+### `duration { string }`
+
+Duration, like "2 minutes".
+
+Translate as `translate( '%d minutes', '%d minutes', { count: 2, args: [ 2 ] } )`.
+
+### `title { node }`
+
+Task title
+
+## Usage
+
+```jsx
+<Checklist inferCompletedCount>
+	<Task
+		onClick={ handleSplineClick }
+		onDismiss={ handleSplineDismiss }
+		title="Reticulate splines"
+		buttonText="Reticulate!"
+		buttonPrimary
+		completedTitle="Splines are reticulated 👍"
+		description="Make sure that all the splines are reticulated."
+		duration="1 minute"
+		completed
+	/>
+	<Task
+		onClick={ handleYakClick }
+		onDismiss={ handleYakDismiss }
+		title="Shave yaks!"
+		buttonText="Buzzzz"
+		buttonPrimary
+		completedTitle="Yaks shaved."
+		description="Make sure you shave the yaks so you can get on with your life."
+		duration="10,000 minutes"
+	/>
+</Checklist>
+```
diff --git a/client/components/checklist/docs/example.jsx b/client/components/checklist/docs/example.jsx
new file mode 100644
index 0000000000000..cff4b90c36c58
--- /dev/null
+++ b/client/components/checklist/docs/example.jsx
@@ -0,0 +1,68 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import React, { PureComponent } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import accept from 'lib/accept';
+import Button from 'components/button';
+import Checklist from '../';
+import Task from '../task';
+
+export default class ChecklistExample extends PureComponent {
+	static displayName = 'ChecklistExample';
+
+	state = {
+		showPlaceholder: false,
+	};
+
+	togglePlaceholder = () =>
+		void this.setState( ( { showPlaceholder } ) => ( { showPlaceholder: ! showPlaceholder } ) );
+
+	getClickHandler = taskId => () =>
+		accept(
+			'Will you complete this thing?',
+			accepted => ( accepted ? void this.setState( { [ taskId ]: true } ) : undefined ),
+			'Yes',
+			'No'
+		);
+	getToggleHandler = taskId => () =>
+		void this.setState( state => ( { [ taskId ]: ! state[ taskId ] } ) );
+
+	render() {
+		return (
+			<>
+				<Button onClick={ this.togglePlaceholder }>
+					{ this.state.showPlaceholder ? 'Hide Placeholder' : 'Show Placeholder' }
+				</Button>
+				<Checklist isPlaceholder={ this.state.showPlaceholder } inferCompletedCount>
+					<Task
+						onClick={ this.getClickHandler( 'reticulateSplines' ) }
+						onDismiss={ this.getToggleHandler( 'reticulateSplines' ) }
+						title="Reticulate splines"
+						buttonText="Reticulate!"
+						buttonPrimary
+						completedTitle="Splines are reticulated 👍"
+						description="Make sure that all the splines are reticulated."
+						duration="1 minute"
+						completed={ this.state.reticulateSplines }
+					/>
+					<Task
+						onClick={ this.getClickHandler( 'shaveYak' ) }
+						onDismiss={ this.getToggleHandler( 'shaveYak' ) }
+						title="Shave yaks!"
+						buttonText="Buzzzz"
+						buttonPrimary
+						completedTitle="Yaks shaved."
+						description="Make sure you shave the yaks so you can get on with your life."
+						duration="10,000 minutes"
+						completed={ this.state.shaveYak }
+					/>
+				</Checklist>
+			</>
+		);
+	}
+}
diff --git a/client/blocks/checklist/checklist-header.jsx b/client/components/checklist/header.js
similarity index 95%
rename from client/blocks/checklist/checklist-header.jsx
rename to client/components/checklist/header.js
index f35ec064a14fd..ad16c404dbf38 100644
--- a/client/blocks/checklist/checklist-header.jsx
+++ b/client/components/checklist/header.js
@@ -1,20 +1,18 @@
+/** @format */
 /**
  * External dependencies
- *
- * @format
  */
-
-import React, { PureComponent } from 'react';
+import Gridicon from 'gridicons';
 import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
 import { localize } from 'i18n-calypso';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
  */
 import Card from 'components/card';
-import ScreenReaderText from 'components/screen-reader-text';
 import ProgressBar from 'components/progress-bar';
+import ScreenReaderText from 'components/screen-reader-text';
 
 export class ChecklistHeader extends PureComponent {
 	static propTypes = {
@@ -40,6 +38,7 @@ export class ChecklistHeader extends PureComponent {
 					<ProgressBar compact total={ total } value={ completed } />
 				</div>
 				<div className="checklist__header-secondary">
+					{ /* eslint-disable-next-line jsx-a11y/label-has-for */ }
 					<label htmlFor="checklist__header-action" className="checklist__header-summary">
 						{ buttonText }
 					</label>
diff --git a/client/components/checklist/index.js b/client/components/checklist/index.js
new file mode 100644
index 0000000000000..7c82e3438b7ef
--- /dev/null
+++ b/client/components/checklist/index.js
@@ -0,0 +1,72 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import React, { Children, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { times } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import ChecklistHeader from 'components/checklist/header';
+import TaskPlaceholder from 'components/checklist/task-placeholder';
+
+export default class Checklist extends PureComponent {
+	static propTyps = {
+		completedCount: PropTypes.number,
+		inferCompletedCount: PropTypes.bool,
+		isPlaceholder: PropTypes.bool,
+	};
+
+	state = { hideCompleted: false };
+
+	toggleCompleted = () =>
+		this.setState( ( { hideCompleted } ) => ( { hideCompleted: ! hideCompleted } ) );
+
+	renderPlaceholder() {
+		return (
+			<div className={ classNames( 'checklist', 'is-expanded', 'is-placeholder' ) }>
+				<ChecklistHeader total={ 0 } completed={ 0 } />
+				<div className="checklist__tasks">
+					{ times( Children.count( this.props.children ), index => (
+						<TaskPlaceholder key={ index } />
+					) ) }
+				</div>
+			</div>
+		);
+	}
+
+	render() {
+		if ( this.props.isPlaceholder ) {
+			return this.renderPlaceholder();
+		}
+
+		const { children, completedCount, inferCompletedCount } = this.props;
+
+		const count = inferCompletedCount
+			? Children.map( children, child => child.props.completed ).reduce(
+					( acc, completed ) => ( true === completed ? acc + 1 : acc ),
+					0
+			  )
+			: completedCount;
+
+		return (
+			<div
+				className={ classNames( 'checklist', {
+					'is-expanded': ! this.state.hideCompleted,
+					'hide-completed': this.state.hideCompleted,
+				} ) }
+			>
+				<ChecklistHeader
+					total={ Children.count( children ) }
+					completed={ count }
+					hideCompleted={ this.state.hideCompleted }
+					onClick={ this.toggleCompleted }
+				/>
+				<div className="checklist__tasks">{ children }</div>
+			</div>
+		);
+	}
+}
diff --git a/client/blocks/checklist/style.scss b/client/components/checklist/style.scss
similarity index 96%
rename from client/blocks/checklist/style.scss
rename to client/components/checklist/style.scss
index 36e804a8d922e..bf31a8d856c7c 100644
--- a/client/blocks/checklist/style.scss
+++ b/client/components/checklist/style.scss
@@ -86,7 +86,23 @@
 	}
 }
 
+.checklist__tasks {
+	display: flex;
+	flex-direction: column;
+}
+
 .checklist__task {
+	width: 100%;
+	order: 100;
+
+	.hide-completed &.is-completed {
+		display: none;
+	}
+
+	&.is-completed {
+		order: 0;
+	}
+
 	&.card {
 		display: flex;
 		flex-direction: row;
diff --git a/client/blocks/checklist/checklist-placeholder.jsx b/client/components/checklist/task-placeholder.js
similarity index 89%
rename from client/blocks/checklist/checklist-placeholder.jsx
rename to client/components/checklist/task-placeholder.js
index 08d9e91591b85..aabdb8497e201 100644
--- a/client/blocks/checklist/checklist-placeholder.jsx
+++ b/client/components/checklist/task-placeholder.js
@@ -1,9 +1,7 @@
+/** @format */
 /**
  * External dependencies
- *
- * @format
  */
-
 import React from 'react';
 
 /**
@@ -11,7 +9,7 @@ import React from 'react';
  */
 import Card from 'components/card';
 
-export default function ChecklistPlaceholder() {
+export default function TaskPlaceholder() {
 	return (
 		<Card compact className="checklist__task is-placeholder">
 			<div className="checklist__task-primary">
diff --git a/client/blocks/checklist/checklist-task.jsx b/client/components/checklist/task.js
similarity index 60%
rename from client/blocks/checklist/checklist-task.jsx
rename to client/components/checklist/task.js
index 9517f6dd78405..58f6db74d7f49 100644
--- a/client/blocks/checklist/checklist-task.jsx
+++ b/client/components/checklist/task.js
@@ -1,68 +1,56 @@
+/** @format */
 /**
  * External dependencies
- *
- * @format
  */
-
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { localize } from 'i18n-calypso';
-import { noop } from 'lodash';
 import classNames from 'classnames';
 import Gridicon from 'gridicons';
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import { localize } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
 import Button from 'components/button';
-import Card from 'components/card';
+import CompactCard from 'components/card/compact';
 import Focusable from 'components/focusable';
 import ScreenReaderText from 'components/screen-reader-text';
 
-export class ChecklistTask extends PureComponent {
+export class Task extends PureComponent {
 	static propTypes = {
-		id: PropTypes.string.isRequired,
-		title: PropTypes.string.isRequired,
-		buttonText: PropTypes.string,
-		buttonPrimary: PropTypes.bool,
-		completedTitle: PropTypes.string,
-		completedButtonText: PropTypes.string,
-		description: PropTypes.string.isRequired,
-		duration: PropTypes.string,
 		completed: PropTypes.bool,
-		onAction: PropTypes.func,
-		onToggle: PropTypes.func,
-	};
+		onClick: PropTypes.func,
+		onDismiss: PropTypes.func,
 
-	static defaultProps = {
-		onClick: noop,
-	};
-
-	handleClick = () => {
-		this.props.onAction( this.props.id );
-	};
-
-	handleToggle = () => {
-		this.props.onToggle( this.props.id );
+		buttonPrimary: PropTypes.bool,
+		completedButtonText: PropTypes.node,
+		completedTitle: PropTypes.node,
+		description: PropTypes.node,
+		duration: PropTypes.string,
+		title: PropTypes.node.isRequired,
+		translate: PropTypes.func.isRequired,
 	};
 
 	render() {
 		const {
 			buttonPrimary,
 			completed,
-			completedTitle,
 			completedButtonText,
+			completedTitle,
 			description,
 			duration,
+			onClick,
+			onDismiss,
 			title,
 			translate,
 		} = this.props;
 		const { buttonText = translate( 'Do it!' ) } = this.props;
 		const hasActionlink = completed && completedButtonText;
 
+		const ToggleContainer = onDismiss ? Focusable : 'div';
+
 		return (
-			<Card
-				compact
+			<CompactCard
 				className={ classNames( 'checklist__task', {
 					'is-completed': completed,
 					'has-actionlink': hasActionlink,
@@ -70,7 +58,7 @@ export class ChecklistTask extends PureComponent {
 			>
 				<div className="checklist__task-primary">
 					<h3 className="checklist__task-title">
-						<Button borderless className="checklist__task-title-link" onClick={ this.handleClick }>
+						<Button borderless className="checklist__task-title-link" onClick={ onClick }>
 							{ ( completed && completedTitle ) || title }
 						</Button>
 					</h3>
@@ -82,11 +70,7 @@ export class ChecklistTask extends PureComponent {
 					) }
 				</div>
 				<div className="checklist__task-secondary">
-					<Button
-						className="checklist__task-action"
-						onClick={ this.handleClick }
-						primary={ buttonPrimary }
-					>
+					<Button className="checklist__task-action" onClick={ onClick } primary={ buttonPrimary }>
 						{ hasActionlink ? completedButtonText : buttonText }
 					</Button>
 					{ duration && (
@@ -95,19 +79,31 @@ export class ChecklistTask extends PureComponent {
 						</small>
 					) }
 				</div>
-				<Focusable
+				<ToggleContainer
 					className="checklist__task-icon"
-					onClick={ this.handleToggle }
-					aria-pressed={ completed ? 'true' : 'false' }
+					onClick={ onDismiss }
+					aria-pressed={
+						/* eslint-disable-next-line no-nested-ternary */
+						onDismiss ? ( completed ? 'true' : 'false' ) : undefined
+					}
 				>
 					<ScreenReaderText>
-						{ completed ? translate( 'Mark as uncompleted' ) : translate( 'Mark as completed' ) }
+						{ /* eslint-disable no-nested-ternary */
+						onDismiss
+							? completed
+								? translate( 'Mark as uncompleted' )
+								: translate( 'Mark as completed' )
+							: completed
+								? translate( 'Complete' )
+								: translate( 'Not complete' )
+						/* eslint-enable no-nested-ternary */
+						 }
 					</ScreenReaderText>
-					{ <Gridicon icon="checkmark" size={ 18 } /> }
-				</Focusable>
-			</Card>
+					<Gridicon icon="checkmark" size={ 18 } />
+				</ToggleContainer>
+			</CompactCard>
 		);
 	}
 }
 
-export default localize( ChecklistTask );
+export default localize( Task );
diff --git a/client/devdocs/design/blocks.jsx b/client/devdocs/design/blocks.jsx
index 2ab0242e3149f..b18fb93408fd2 100644
--- a/client/devdocs/design/blocks.jsx
+++ b/client/devdocs/design/blocks.jsx
@@ -26,7 +26,6 @@ import AllSites from 'blocks/all-sites/docs/example';
 import CreditCardForm from 'blocks/credit-card-form/docs/example';
 import CalendarButton from 'blocks/calendar-button/docs/example';
 import CalendarPopover from 'blocks/calendar-popover/docs/example';
-import Checklist from 'blocks/checklist/docs/example';
 import AuthorSelector from 'blocks/author-selector/docs/example';
 import CommentButtons from 'blocks/comment-button/docs/example';
 import DisconnectJetpackDialog from 'blocks/disconnect-jetpack/docs/example';
@@ -135,7 +134,6 @@ export default class AppComponents extends React.Component {
 					<CalendarButton readmeFilePath="calendar-button" />
 					<CalendarPopover readmeFilePath="calendar-popover" />
 					<CommentButtons readmeFilePath="comment-button" />
-					<Checklist readmeFilePath="checklist" />
 					<DisconnectJetpackDialog />
 					<CreditCardForm readmeFilePath="credit-card-form" />
 					<FollowButton readmeFilePath="follow-button" />
diff --git a/client/devdocs/design/component-examples.js b/client/devdocs/design/component-examples.js
index e85faf8f192af..97dc7db3bf7b6 100644
--- a/client/devdocs/design/component-examples.js
+++ b/client/devdocs/design/component-examples.js
@@ -14,7 +14,7 @@ export Buttons from 'components/button/docs/example';
 export Cards from 'components/card/docs/example';
 export CardHeading from 'components/card-heading/docs/example';
 export Chart from 'components/chart/docs/example';
-export Checklist from 'blocks/checklist/docs/example';
+export Checklist from 'components/checklist/docs/example';
 export ClipboardButtonInput from 'components/clipboard-button-input/docs/example';
 export ClipboardButtons from 'components/forms/clipboard-button/docs/example';
 export Collection from 'devdocs/design/search-collection';
diff --git a/client/devdocs/design/index.jsx b/client/devdocs/design/index.jsx
index 7580000b2a701..867cc89a8e4eb 100644
--- a/client/devdocs/design/index.jsx
+++ b/client/devdocs/design/index.jsx
@@ -39,6 +39,7 @@ import Buttons from 'components/button/docs/example';
 import CardHeading from 'components/card-heading/docs/example';
 import Cards from 'components/card/docs/example';
 import Chart from 'components/chart/docs/example';
+import Checklist from 'components/checklist/docs/example';
 import ClipboardButtonInput from 'components/clipboard-button-input/docs/example';
 import ClipboardButtons from 'components/forms/clipboard-button/docs/example';
 import Collection from 'devdocs/design/search-collection';
@@ -183,6 +184,7 @@ class DesignAssets extends React.Component {
 					<Cards readmeFilePath="card" />
 					<CardHeading readmeFilePath="card-heading" />
 					<Chart readmeFilePath="chart" />
+					<Checklist readmeFilePath="checklist" />
 					<ClipboardButtonInput readmeFilePath="clipboard-button-input" />
 					<ClipboardButtons readmeFilePath="forms/clipboard-button" />
 					<Count readmeFilePath="count" />
diff --git a/client/devdocs/design/playground-scope.js b/client/devdocs/design/playground-scope.js
index 60d955acbf137..f259c2fa87727 100644
--- a/client/devdocs/design/playground-scope.js
+++ b/client/devdocs/design/playground-scope.js
@@ -20,7 +20,8 @@ export ButtonGroup from 'components/button-group';
 export Button from 'components/button';
 export Card from 'components/card';
 export CardHeading from 'components/card-heading';
-export Checklist from 'blocks/checklist';
+export Checklist from 'components/checklist';
+export ChecklistTask from 'components/checklist/task';
 export ClipboardButtonInput from 'components/clipboard-button-input';
 export ClipboardButton from 'components/forms/clipboard-button';
 export Collection from 'devdocs/design/search-collection';
diff --git a/client/extensions/woocommerce/app/dashboard/setup/tasks.js b/client/extensions/woocommerce/app/dashboard/setup/tasks.js
index 5174d6105f2fa..0aa8f46716193 100644
--- a/client/extensions/woocommerce/app/dashboard/setup/tasks.js
+++ b/client/extensions/woocommerce/app/dashboard/setup/tasks.js
@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { localize } from 'i18n-calypso';
-import { find } from 'lodash';
 import page from 'page';
 
 /**
@@ -20,7 +19,8 @@ import {
 	getTriedCustomizerDuringInitialSetup,
 	getCheckedTaxSetup,
 } from 'woocommerce/state/sites/setup-choices/selectors';
-import Checklist from 'blocks/checklist';
+import Checklist from 'components/checklist';
+import Task from 'components/checklist/task';
 import { getTotalProducts, areProductsLoaded } from 'woocommerce/state/sites/products/selectors';
 import { fetchProducts } from 'woocommerce/state/sites/products/actions';
 import { fetchPaymentMethods } from 'woocommerce/state/sites/payment-methods/actions';
@@ -30,6 +30,7 @@ import { arePaymentsSetup } from 'woocommerce/state/ui/payments/methods/selector
 import { getLink } from 'woocommerce/lib/nav-utils';
 import { recordTrack } from 'woocommerce/lib/analytics';
 import { areAnyShippingMethodsEnabled } from 'woocommerce/state/ui/shipping/zones/selectors';
+import { loadTrackingTool } from 'state/analytics/actions';
 
 class SetupTasks extends Component {
 	static propTypes = {
@@ -49,6 +50,8 @@ class SetupTasks extends Component {
 				this.props.fetchProducts( site.ID, { page: 1 } );
 			}
 		}
+
+		this.props.loadTrackingTool( 'HotJar' );
 	};
 
 	componentWillReceiveProps = newProps => {
@@ -64,114 +67,113 @@ class SetupTasks extends Component {
 		}
 	};
 
-	getSetupTasks = () => {
-		const {
-			site,
-			triedCustomizer,
-			hasProducts,
-			paymentsAreSetUp,
-			shippingIsSetUp,
-			taxesAreSetUp,
-			translate,
-		} = this.props;
-		const siteSlug = encodeURIComponent( '//' + site.slug );
-		const customizerUrl = getLink(
-			'https://:site/wp-admin/customize.php?store-wpcom-nux=true&return=' + siteSlug,
-			site
-		);
-
-		return [
-			{
-				id: 'add-product',
-				title: translate( 'Add a product' ),
-				buttonText: translate( 'Add a product' ),
-				buttonPrimary: true,
-				completedTitle: translate( 'You have added a product' ),
-				completedButtonText: translate( 'View products' ),
-				description: translate( 'Start by adding the first product to your\u00a0store.' ),
-				duration: translate( '%d minute', '%d minutes', { count: 3, args: [ 3 ] } ),
-				url: getLink( '/store/product/:site', site ),
-				completed: hasProducts,
-			},
-			{
-				id: 'set-up-shipping',
-				title: translate( 'Review shipping' ),
-				buttonText: translate( 'Review shipping' ),
-				buttonPrimary: true,
-				completedTitle: translate( 'Shipping is set up' ),
-				completedButtonText: translate( 'View shipping' ),
-				description: translate( "We've set up shipping based on your store location." ),
-				duration: translate( '%d minute', '%d minutes', { count: 2, args: [ 2 ] } ),
-				url: getLink( '/store/settings/shipping/:site', site ),
-				completed: shippingIsSetUp,
-			},
-			{
-				id: 'set-up-payments',
-				title: translate( 'Review payments' ),
-				buttonText: translate( 'Review payments' ),
-				buttonPrimary: true,
-				completedTitle: translate( 'Payments are set up' ),
-				completedButtonText: translate( 'Review payments' ),
-				description: translate( 'Choose how you would like your customers to pay you.' ),
-				duration: translate( '%d minute', '%d minutes', { count: 2, args: [ 2 ] } ),
-				url: getLink( '/store/settings/payments/:site', site ),
-				completed: paymentsAreSetUp,
-			},
-			{
-				id: 'set-up-taxes',
-				title: translate( 'Review taxes' ),
-				buttonText: translate( 'Review taxes' ),
-				buttonPrimary: true,
-				completedTitle: translate( 'Taxes are setup' ),
-				completedButtonText: translate( 'Review taxes' ),
-				description: translate( "We've set up automatic tax calculations for you." ),
-				duration: translate( '%d minute', '%d minutes', { count: 2, args: [ 2 ] } ),
-				url: getLink( '/store/settings/taxes/:site', site ),
-				completed: taxesAreSetUp,
-			},
-			{
-				id: 'view-and-customize',
-				title: translate( 'View and customize' ),
-				buttonText: translate( 'Customize' ),
-				buttonPrimary: true,
-				completedTitle: translate( 'View and customize' ),
-				completedButtonText: translate( 'View and customize' ),
-				description: translate(
-					'View your store and make any final tweaks before opening for business.'
-				),
-				duration: translate( '%d minute', '%d minutes', { count: 4, args: [ 4 ] } ),
-				url: customizerUrl,
-				completed: triedCustomizer,
-			},
-		];
-	};
-
-	handleAction = id => {
-		const task = find( this.getSetupTasks(), { id } );
-
+	getClickHandler = ( id, url ) => () => {
 		recordTrack( 'calypso_woocommerce_dashboard_action_click', {
 			action: id,
 		} );
 
 		if ( 'view-and-customize' === id ) {
 			this.props.setTriedCustomizerDuringInitialSetup( this.props.site.ID, true );
-			window.open( task.url );
+			window.open( url );
 		} else {
-			page.show( task.url );
+			page.show( url );
 		}
 	};
 
 	render = () => {
+		const {
+			site,
+			triedCustomizer,
+			hasProducts,
+			paymentsAreSetUp,
+			shippingIsSetUp,
+			taxesAreSetUp,
+			translate,
+		} = this.props;
+		const siteSlug = encodeURIComponent( '//' + site.slug );
 		return (
 			<div className="setup__checklist">
 				<QuerySettingsGeneral siteId={ this.props.site.ID } />
 				<Checklist
-					tasks={ this.getSetupTasks() }
-					onAction={ this.handleAction }
-					onToggle={ this.handleToggle }
-					isLoading={ this.props.loading || ! this.props.productsLoaded }
-					placeholderCount={ 5 }
-				/>
+					isPlaceholder={ this.props.loading || ! this.props.productsLoaded }
+					inferCompletedCount
+				>
+					<Task
+						onClick={ this.getClickHandler(
+							'add-product',
+							getLink( '/store/product/:site', site )
+						) }
+						title={ translate( 'Add a product' ) }
+						buttonText={ translate( 'Add a product' ) }
+						buttonPrimary
+						completedTitle={ translate( 'You have added a product' ) }
+						completedButtonText={ translate( 'View products' ) }
+						description={ translate( 'Start by adding the first product to your\u00a0store.' ) }
+						duration={ translate( '%d minute', '%d minutes', { count: 3, args: [ 3 ] } ) }
+						completed={ hasProducts }
+					/>
+					<Task
+						onClick={ this.getClickHandler(
+							'set-up-shipping',
+							getLink( '/store/settings/shipping/:site', site )
+						) }
+						title={ translate( 'Review shipping' ) }
+						buttonText={ translate( 'Review shipping' ) }
+						buttonPrimary
+						completedTitle={ translate( 'Shipping is set up' ) }
+						completedButtonText={ translate( 'View shipping' ) }
+						description={ translate( "We've set up shipping based on your store location." ) }
+						duration={ translate( '%d minute', '%d minutes', { count: 2, args: [ 2 ] } ) }
+						completed={ shippingIsSetUp }
+					/>
+					<Task
+						onClick={ this.getClickHandler(
+							'set-up-payments',
+							getLink( '/store/settings/payments/:site', site )
+						) }
+						title={ translate( 'Review payments' ) }
+						buttonText={ translate( 'Review payments' ) }
+						buttonPrimary
+						completedTitle={ translate( 'Payments are set up' ) }
+						completedButtonText={ translate( 'Review payments' ) }
+						description={ translate( 'Choose how you would like your customers to pay you.' ) }
+						duration={ translate( '%d minute', '%d minutes', { count: 2, args: [ 2 ] } ) }
+						completed={ paymentsAreSetUp }
+					/>
+					<Task
+						onClick={ this.getClickHandler(
+							'set-up-taxes',
+							getLink( '/store/settings/taxes/:site', site )
+						) }
+						title={ translate( 'Review taxes' ) }
+						buttonText={ translate( 'Review taxes' ) }
+						buttonPrimary
+						completedTitle={ translate( 'Taxes are setup' ) }
+						completedButtonText={ translate( 'Review taxes' ) }
+						description={ translate( "We've set up automatic tax calculations for you." ) }
+						duration={ translate( '%d minute', '%d minutes', { count: 2, args: [ 2 ] } ) }
+						completed={ taxesAreSetUp }
+					/>
+					<Task
+						onClick={ this.getClickHandler(
+							'view-and-customize',
+							getLink(
+								'https://:site/wp-admin/customize.php?store-wpcom-nux=true&return=' + siteSlug,
+								site
+							)
+						) }
+						title={ translate( 'View and customize' ) }
+						buttonText={ translate( 'Customize' ) }
+						buttonPrimary
+						completedTitle={ translate( 'View and customize' ) }
+						completedButtonText={ translate( 'View and customize' ) }
+						description={ translate(
+							'View your store and make any final tweaks before opening for business.'
+						) }
+						duration={ translate( '%d minute', '%d minutes', { count: 4, args: [ 4 ] } ) }
+						completed={ triedCustomizer }
+					/>
+				</Checklist>
 			</div>
 		);
 	};
@@ -194,6 +196,7 @@ function mapDispatchToProps( dispatch ) {
 		{
 			fetchPaymentMethods,
 			fetchProducts,
+			loadTrackingTool,
 			setTriedCustomizerDuringInitialSetup,
 		},
 		dispatch
diff --git a/client/my-sites/checklist/checklist-show/index.jsx b/client/my-sites/checklist/checklist-show/index.jsx
index 5b07ac4d5d6ce..7472b4f5561be 100644
--- a/client/my-sites/checklist/checklist-show/index.jsx
+++ b/client/my-sites/checklist/checklist-show/index.jsx
@@ -11,7 +11,8 @@ import { find, get } from 'lodash';
 /**
  * Internal dependencies
  */
-import Checklist from 'blocks/checklist';
+import Checklist from 'components/checklist';
+import Task from 'components/checklist/task';
 import { tasks as jetpackTasks } from '../jetpack-checklist';
 import { requestSiteChecklistTaskUpdate } from 'state/checklist/actions';
 import { getSelectedSiteId } from 'state/ui/selectors';
@@ -19,13 +20,16 @@ import getSiteChecklist from 'state/selectors/get-site-checklist';
 import { isJetpackSite, getSiteSlug } from 'state/sites/selectors';
 import QuerySiteChecklist from 'components/data/query-site-checklist';
 import { launchTask, tasks as wpcomTasks } from '../onboardingChecklist';
-import { mergeObjectIntoArrayById } from '../util';
-import { recordTracksEvent } from 'state/analytics/actions';
+import { loadTrackingTool, recordTracksEvent } from 'state/analytics/actions';
 import { createNotice } from 'state/notices/actions';
 import { requestGuidedTour } from 'state/ui/guided-tours/actions';
 
 class ChecklistShow extends PureComponent {
-	handleAction = id => {
+	componentDidMount() {
+		this.props.loadTrackingTool( 'HotJar' );
+	}
+
+	handleAction = id => () => {
 		const { requestTour, siteSlug, tasks, track } = this.props;
 		const task = find( tasks, { id } );
 
@@ -38,7 +42,7 @@ class ChecklistShow extends PureComponent {
 		} );
 	};
 
-	handleToggle = id => {
+	handleToggle = id => () => {
 		const { notify, siteId, tasks, update } = this.props;
 		const task = find( tasks, { id } );
 
@@ -49,17 +53,30 @@ class ChecklistShow extends PureComponent {
 	};
 
 	render() {
-		const { siteId, tasks } = this.props;
+		const { isJetpack, siteId, taskStatuses } = this.props;
+		const tasks = isJetpack ? jetpackTasks : wpcomTasks;
 
 		return (
 			<Fragment>
 				{ siteId && <QuerySiteChecklist siteId={ siteId } /> }
-				<Checklist
-					isLoading={ ! tasks }
-					tasks={ tasks }
-					onAction={ this.handleAction }
-					onToggle={ this.handleToggle }
-				/>
+				<Checklist isPlaceholder={ ! taskStatuses }>
+					{ tasks.map( task => (
+						<Task
+							buttonPrimary={ task.buttonPrimary }
+							buttonText={ task.buttonText }
+							completed={ task.completed || get( taskStatuses, [ task.id, 'completed' ], false ) }
+							completedButtonText={ task.completedButtonText }
+							completedTitle={ task.completedTitle }
+							description={ task.description }
+							duration={ task.duration }
+							id={ task.id }
+							key={ task.id }
+							onAction={ this.handleAction( task.id ) }
+							onToggle={ this.handleToggle( task.id ) }
+							title={ task.title }
+						/>
+					) ) }
+				</Checklist>
 			</Fragment>
 		);
 	}
@@ -67,20 +84,17 @@ class ChecklistShow extends PureComponent {
 
 const mapStateToProps = state => {
 	const siteId = getSelectedSiteId( state );
-	const siteSlug = getSiteSlug( state, siteId );
-	const siteChecklist = getSiteChecklist( state, siteId );
-	const isJetpack = isJetpackSite( state, siteId );
-	const tasks = isJetpack ? jetpackTasks : wpcomTasks;
-	const tasksFromServer = get( siteChecklist, [ 'tasks' ] );
 
 	return {
+		isJetpack: isJetpackSite( state, siteId ),
 		siteId,
-		siteSlug,
-		tasks: tasksFromServer ? mergeObjectIntoArrayById( tasks, tasksFromServer ) : null,
+		siteSlug: getSiteSlug( state, siteId ),
+		taskStatuses: get( getSiteChecklist( state, siteId ), [ 'tasks' ], null ),
 	};
 };
 
 const mapDispatchToProps = {
+	loadTrackingTool,
 	track: recordTracksEvent,
 	notify: createNotice,
 	requestTour: requestGuidedTour,