diff --git a/client/me/connected-application-icon/style.scss b/client/me/connected-application-icon/style.scss
index 5dc25a477497d..37b67c2d5c149 100644
--- a/client/me/connected-application-icon/style.scss
+++ b/client/me/connected-application-icon/style.scss
@@ -7,10 +7,10 @@
 	// !important necessary here since plugin-icon uses !important as well
 	height: 40px !important;
 	width:  40px !important;
-	margin-left: 32px;
+	margin-left: 0px;
 	margin-right: 12px;
 
 	@include breakpoint( '>480px' ) {
-		margin-left: 40px;
+		margin-left: 0px;
 	}
 }
diff --git a/client/me/connected-application-item/index.jsx b/client/me/connected-application-item/index.jsx
index 0b224370c1cc4..3efe59f528997 100644
--- a/client/me/connected-application-item/index.jsx
+++ b/client/me/connected-application-item/index.jsx
@@ -8,13 +8,14 @@ var React = require( 'react' ),
 /**
  * Internal dependencies
  */
-var eventRecorder = require( 'me/event-recorder' ),
-	CompactCard = require( 'components/card/compact' ),
-	ConnectedApplicationIcon = require( 'me/connected-application-icon' ),
-	safeProtocolUrl = require( 'lib/safe-protocol-url' ),
-	analytics = require( 'analytics' );
+import eventRecorder from 'me/event-recorder';
+import ConnectedApplicationIcon from 'me/connected-application-icon';
+import safeProtocolUrl from 'lib/safe-protocol-url';
+import analytics from 'analytics';
+import Button from 'components/button';
+import FoldableCard from 'components/foldable-card';
 
-module.exports = React.createClass( {
+export default React.createClass( {
 
 	displayName: 'ConnectedApplicationItem',
 
@@ -40,39 +41,30 @@ module.exports = React.createClass( {
 		};
 	},
 
-	toggleDetail: function() {
-		if ( this.state.showDetail ) {
-			analytics.ga.recordEvent( 'Me', 'Collapsed Connected Application', this.props.connection.title );
-		} else {
-			analytics.ga.recordEvent( 'Me', 'Expanded Connected Application', this.props.connection.title );
-		}
-
-		this.setState( { showDetail: ! this.state.showDetail } );
-	},
-
 	disconnect: function( event ) {
 		if ( this.props.isPlaceholder ) {
 			return;
 		}
+		const { connection: { title, ID } } = this.props;
 		event.stopPropagation();
-		analytics.ga.recordEvent( 'Me', 'Clicked on Disconnect Connected Application Link', this.props.connection.title );
-		this.props.revoke( this.props.connection.ID );
+		analytics.ga.recordEvent( 'Me', 'Clicked on Disconnect Connected Application Link', title );
+		this.props.revoke( ID );
 	},
 
 	renderAccessScopeBadge: function() {
-		var meta = '',
-			connection = this.props.connection;
+		const { connection: { scope, site } } = this.props;
+		var meta = '';
 
-		if ( ! connection ) {
+		if ( ! this.props.connection ) {
 			return;
 		}
 
-		if ( 'auth' === connection.scope ) {
+		if ( 'auth' === scope ) {
 			meta = this.translate( 'Authentication' );
-		} else if ( 'global' === connection.scope ) {
+		} else if ( 'global' === scope ) {
 			meta = this.translate( 'Global' );
-		} else if ( connection.site ) {
-			meta = connection.site.site_name;
+		} else if ( site ) {
+			meta = site.site_name;
 		}
 
 		if ( meta.length ) {
@@ -85,151 +77,137 @@ module.exports = React.createClass( {
 	},
 
 	renderScopeMessage: function() {
-		var message,
-			connection = this.props.connection;
-
-		if ( ! connection ) {
+		const { connection: { scope, site } } = this.props;
+		var message;
+		if ( ! this.props.connection ) {
 			return;
 		}
 
-		if ( 'global' === connection.scope ) {
+		if ( 'global' === scope ) {
 			message = this.translate(
 				'This connection is allowed to manage all of your blogs on WordPress.com, ' +
 				'including any Jetpack blogs that are connected to your WordPress.com account.'
 			);
-		} else if ( 'auth' === connection.scope ) {
+		} else if ( 'auth' === scope ) {
 			message = this.translate(
 				'This connection is not allowed to manage any of your blogs.'
 			);
-		} else if ( false !== connection.site ) {
+		} else if ( false !== site ) {
 			message = this.translate(
 				'This connection is only allowed to access {{siteLink}}%(siteName)s{{/siteLink}}', {
 					components: {
 						siteLink: <a
 							target="_blank"
-							href={ safeProtocolUrl( connection.site.site_URL ) }
+							href={ safeProtocolUrl( this.props.connection.site.site_URL ) }
 							onClick={ this.recordClickEvent( 'Connected Application Scope Blog Link' ) }
 						/>
 					},
 					args: {
-						siteName: connection.site.site_name
+						siteName: site.site_name
 					}
 				}
 			);
 		}
 
-		if ( message ) {
-			return (
-				<li className="connected-application-item__connection-detail">
-					<strong className="connected-application-item__connection-detail-title">
-						{ this.translate( 'Access Scope' ) }
-						{ this.renderAccessScopeBadge() }
-					</strong>
-
-					<span className="connected-application-item__connection-detail-description" >
-						{ message }
-					</span>
-				</li>
-			);
+		if ( ! message ) {
+			return;
 		}
+
+		return (
+			<div>
+				<h2>
+					{ this.translate( 'Access Scope' ) }
+					{ this.renderAccessScopeBadge() }
+				</h2>
+
+				<p className="connected-application-item__connection-detail-description" >
+					{ message }
+				</p>
+			</div>
+		);
 	},
 
 	renderDetail: function() {
-		var connection = this.props.connection;
+		const { connection: { URL, authorized, permissions } } = this.props;
 		if ( this.props.isPlaceholder ) {
 			return;
 		}
 
 		return (
-			<div className="connected-application-item__content">
-				<p className="connected-application-item__content-description">
-					{ connection.description }
+			<div>
+				<h2>{ this.translate( 'Application Website' ) }</h2>
+				<p>
+					<a
+						href={ safeProtocolUrl( URL ) }
+						onClick={ this.recordClickEvent( 'Connected Application Website Link' ) }
+						target="_blank"
+					>
+						{ safeProtocolUrl( URL ) }
+					</a>
 				</p>
-				<ul className="connected-application-item__ul">
-					<li className="connected-application-item__connection-detail">
-						<strong className="connected-application-item__connection-detail-title">
-							{ this.translate( 'Application Website' ) }
-						</strong>
-
-						<span className="connected-application-item__connection-detail-description">
-							<a
-								href={ safeProtocolUrl( connection.URL ) }
-								onClick={ this.recordClickEvent( 'Connected Application Website Link' ) }
-								target="_blank"
-							>
-								{ safeProtocolUrl( connection.URL ) }
-							</a>
-						</span>
-					</li>
-
-					<li className="connected-application-item__connection-detail">
-						{
-							this.translate( '{{detailTitle}}Authorized On{{/detailTitle}}{{detailDescription}}%(date)s{{/detailDescription}}', {
-								components: {
-									detailTitle: <strong className="connected-application-item__connection-detail-title" />,
-									detailDescription: <span className="connected-application-item__connection-detail-description" />
-								},
-								args: {
-									date: this.moment( connection.authorized ).format( 'MMM D, YYYY @ h:mm a' )
-								}
-							} )
-						}
-					</li>
 
+				{ this.translate( '{{detailTitle}}Authorized On{{/detailTitle}}{{detailDescription}}%(date)s{{/detailDescription}}', {
+					components: {
+						detailTitle: <h2 />,
+						detailDescription: <p className="connected-application-item__connection-detail-description" />
+					},
+					args: {
+						date: this.moment( authorized ).format( 'MMM D, YYYY @ h:mm a' )
+					}
+				} ) }
+				<div>
 					{ this.renderScopeMessage() }
+				</div>
 
-					<li className="connected-application-item__connection-detail">
-						<strong className="connected-application-item__connection-detail-title">
-							{ this.translate( 'Access Permissions' ) }
-						</strong>
-
-						{ connection.permissions.map( function( permission ) {
-							return (
-								<span
-									className="connected-application-item__connection-detail-description"
-									key={ 'permission-' + permission.name } >
-									{ permission.description }
-								</span>
-							);
-						}, this ) }
-					</li>
+				<h2>
+					{ this.translate( 'Access Permissions' ) }
+				</h2>
+				<ul className="connected-application-item__connection-detail-descriptions">
+					{ permissions.map( ( { name, description } ) => (
+						<li key={ `permission-${ name }` }>
+							{ description }
+						</li>
+					) ) }
 				</ul>
 			</div>
 		);
 	},
 
+	header: function() {
+		return (
+			<div className="connected-application-item__header">
+				<ConnectedApplicationIcon image={ this.props.connection.icon } />
+				<h3>{ this.props.connection.title }</h3>
+			</div>
+		);
+	},
+
+	summary: function() {
+		return(
+			<div>
+				{ this.props.isPlaceholder
+					? ( <Button compact disabled>{ this.translate( 'Loading…' ) }</Button> )
+					: ( <Button compact onClick={ this.disconnect }>{ this.translate( 'Disconnect' ) }</Button> )
+				}
+			</div> );
+	},
+
 	render: function() {
-		var connection = this.props.connection,
-			classes = classNames( {
-				'connected-application-item': true,
-				'is-open': this.state.showDetail,
-				'is-placeholder': this.props.isPlaceholder
-			} ),
-			noticonClasses = classNames( {
-				'connected-application-item__content-toggle': true,
-				noticon: true,
-				'noticon-collapse': this.state.showDetail,
-				'noticon-expand': ! this.state.showDetail
-			} );
+		let classes = classNames( {
+			'connected-application-item': true,
+			'is-placeholder': this.props.isPlaceholder
+		} );
 
 		return (
-			<CompactCard className={ classes }>
-				<div className="connected-application-item__header" onClick={ this.toggleDetail }>
-					<span className={ noticonClasses }></span>
-					<ConnectedApplicationIcon image={ connection.icon } />
-
-					<div className="connected-application-item__title">
-						{ connection.title }
-					</div>
-
-					<span className="connected-application-item__disconnect">
-						<a onClick={ this.disconnect } className="button">
-							{ this.translate( 'Disconnect' ) }
-						</a>
-					</span>
-				</div>
+			<FoldableCard
+				header={ this.header() }
+				summary={ this.summary() }
+				expandedSummary={ this.summary() }
+				clickableHeader
+				compact
+				className={ classes }>
 				{ this.renderDetail() }
-			</CompactCard>
+			</FoldableCard>
 		);
 	},
 } );
diff --git a/client/me/connected-application-item/style.scss b/client/me/connected-application-item/style.scss
index b4b5563687f78..82a3985942224 100644
--- a/client/me/connected-application-item/style.scss
+++ b/client/me/connected-application-item/style.scss
@@ -1,160 +1,56 @@
-.connected-application-item.card {
-	padding: 0;
-
-	@include breakpoint( '>660px' ) {
-		padding: 0;
-	}
-
-	&.is-compact {
-		margin-bottom: 1px;
-	}
-
-	&.is-compact:last-child {
-		margin-bottom: 8px;
-	}
-
-	&.is-open {
-		margin-bottom: 16px;
-	}
-
-	&.is-placeholder {
-		.connected-application-item__title {
-			color: transparent;
-			width: 36%;
-			line-height: 24px;
-			margin-top: 8px;
-			background-color: lighten( $gray, 30% );
-			animation: loading-fade 1.6s ease-in-out infinite;
-
-			&:before {
-				content: ' ';
-			}
-		}
-	}
-}
-
-.connected-application-item {
-	position: relative;
-	@include clear-fix;
-}
-
 .connected-application-item__header {
-	cursor: pointer;
-	display: block;
-	padding: 16px;
-
-	@include clear-fix;
-}
-
-.connected-application-item__header:hover .connected-application-item__content-toggle {
-	color: $blue-medium;
-}
 
-.connected-application-item__content-toggle {
-	position: absolute;
-		top: 24px;
-		left: 16px;
-	margin-top: 4px;
-	font-size: 16px;
-	color: $gray;
+	display: flex;
 
-	@include breakpoint( '>480px' ) {
-		margin-top: 0;
-		font-size: 24px;
+	h3 {
+		flex: 2;
+		display: block;
+		overflow: hidden;
+		margin-top: 8px;
 	}
-}
-
-.connected-application-item__title {
-	display: block;
-	color: $gray-dark;
-	font-size: 14px;
-	line-height: 40px;
-	white-space: pre;
-	overflow: hidden;
 
-	@include breakpoint( '>480px' ) {
-		font-size: 20px;
+	.connected-application-icon {
+		width: 48px;
 	}
 }
 
-.connected-application-item__disconnect{
-	position: absolute;
-		top: 16px;
-		right: 16px;
-	font-size: 14px;
-	line-height: 40px;
-	color: $alert-red;
-	margin-left: 20px;
-	background: $white;
+.connected-application-item.is-placeholder {
+	h3 {
+		color: transparent;
+		width: 36%;
+		line-height: 24px;
+		margin-top: 8px;
+		background-color: lighten( $gray, 30% );
+		animation: loading-fade 1.6s ease-in-out infinite;
 
-	&:hover {
-		color: lighten( $alert-red, 10% );
-	}
-
-	&:after {
-		@include stats-fade-text( $white );
+		&:before {
+			content: ' ';
+		}
 	}
 }
 
-.connected-application-item__content {
-	position: relative;
-	display: none;
-	padding: 15px 20px 20px 20px;
-	background: $gray-light;
-	border-top: 2px solid lighten( $gray, 30% );
-}
-
-.connected-application-item.is-open .connected-application-item__content {
-	background: $gray-light;
-	border-top: 1px solid lighten( $gray, 30% );
-	display: block;
-	padding: 16px;
-
-	@include breakpoint( '>480px' ) {
-		border-top-width: 2px;
-	}
-
-	@include breakpoint( '>660px' ) {
-		padding: 24px;
+.connected-application-item {
+	h2 {
+		font-weight: bold;
 	}
 }
 
 .connected-application-item__meta {
-	position: absolute;
-		left: 110%;
-		top: 2px;
 	font-size: 12px;
-	background-color: $gray;
+	display: inline-block;
+	padding: 4px 8px;
+	margin-left: 8px;
+	border-radius: 4px;
+	background: $gray;
 	color: $white;
-	white-space: pre;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	padding: 0 4px;
-	border-radius: 2px;
 	font-weight: normal;
 }
 
-.connected-application-item__ul {
-	list-style-type: none;
-	margin: 0;
-}
-
-.connected-application-item__connection-detail {
-	margin-bottom: 1em;
+.connected-application-item__connection-detail-descriptions {
+	margin-left: 1.5em;
+	margin-top: 4px;
 
-	&:last-child {
-		margin-bottom: 0;
+	li {
+		padding: 0;
 	}
 }
-
-.connected-application-item__connection-detail-title {
-	position: relative;
-}
-
-.connected-application-item__connection-detail-description {
-	display: block;
-}
-
-.connected-application-item__content-description {
-	margin: 0 0 1em 0;
-}