diff --git a/assets/css/helper.css b/assets/css/helper.css
index 6191c247095..ec99d314288 100644
--- a/assets/css/helper.css
+++ b/assets/css/helper.css
@@ -1 +1,491 @@
-.wc-helper .alternate,.wc-helper .striped>tbody>:nth-child(odd),.wc-helper ul.striped>:nth-child(odd){background-color:#fff}.wc-helper .comment-ays,.wc-helper .feature-filter,.wc-helper .imgedit-group,.wc-helper .popular-tags,.wc-helper .stuffbox,.wc-helper .widgets-holder-wrap,.wc-helper .wp-editor-container,.wc-helper p.popular-tags,.wc-helper table.widefat{padding-top:5px}.wc-helper .widefat tfoot tr td,.wc-helper .widefat tfoot tr th,.wc-helper .widefat thead tr td,.wc-helper .widefat thead tr th{color:#32373c;padding-top:10px;padding-bottom:15px}.wc-helper .widefat td{border-bottom:1px solid #e5e5e5;padding-top:15px;padding-bottom:15px}.wc-helper .product-name{color:#0073AA}.wc-helper td.color-bar{border-left:solid 4px transparent}.wc-helper td.color-bar.expired{border-left-color:#B81C23}.wc-helper td.color-bar.expiring{border-left-color:orange}.wc-helper td.color-bar.expiring.update-available,.wc-helper td.color-bar.update-available{border-left-color:#8FAE1B}.wc-helper .connect-wrapper{background-color:#fff;margin-bottom:25px;padding:20px;border:1px solid #e5e5e5}.wc-helper .connected{display:inline-block;vertical-align:top}.wc-helper .connected img{border:1px solid #e5e5e5;vertical-align:top}.wc-helper .connected p{display:inline-block;margin:10px 0 0 20px}.wc-helper .buttons{display:block;margin-top:10px}.wc-helper .start-container{background-color:#fff;padding:45px 20px 20px 30px;position:relative;overflow:hidden;border-left:4px solid #cc99c2}.wc-helper .start-container::before{content:"\e01C";font-family:WooCommerce;text-align:center;line-height:1;color:#eee2ec;display:block;width:1em;font-size:192px;top:65%;right:-3%;position:absolute}.wc-helper .start-container h2{font-size:24px;line-height:29px;position:relative}.wc-helper .start-container p{font-size:16px;margin-bottom:30px;position:relative}.wc-helper .wp-core-ui .button-primary{background:#bb77ae;border-color:#A36597;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #A36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #A36597;color:#fff;text-shadow:0 -1px 1px #A36597,1px 0 1px #A36597,0 1px 1px #A36597,-1px 0 1px #A36597}.wc-helper .wp-core-ui a.button-primary:active,.wc-helper .wp-core-ui a.button-primary:focus,.wc-helper .wp-core-ui a.button-primary:hover{background:#A36597;border-color:#A36597;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #A36597;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #A36597}
\ No newline at end of file
+/*------------------------------------------------------------------------------
+  General table styling
+------------------------------------------------------------------------------*/
+/*------------------------------------------------------------------------------
+  Tab navigation
+------------------------------------------------------------------------------*/
+.wc-helper .nav-tab-wrapper {
+  margin-bottom: 22px; }
+
+@media only screen and (max-width: 784px) {
+  .wc-helper .nav-tab {
+    max-width: 40%;
+    overflow: hidden;
+    text-overflow: ellipsis; } }
+
+/*------------------------------------------------------------------------------
+  Buttons
+------------------------------------------------------------------------------*/
+.wc-helper .button, .wc-helper .button:hover {
+  background-color: #955a89;
+  border-width: 0;
+  box-shadow: none;
+  border-radius: 3px;
+  color: #fff;
+  height: auto;
+  padding: 3px 14px;
+  text-align: center;
+  white-space: normal !important; }
+  @media only screen and (max-width: 782px) {
+    .wc-helper .button, .wc-helper .button:hover {
+      line-height: 2; } }
+
+.wc-helper .button:hover {
+  opacity: 0.8; }
+
+.wc-helper .button.button-secondary {
+  background-color: #e6e6e6;
+  color: #3c3c3c;
+  text-shadow: none; }
+
+.wc-helper .subscription-filter {
+  color: #2E4453;
+  font-size: 13px;
+  line-height: 13px;
+  margin: 22px 0; }
+  .wc-helper .subscription-filter label {
+    display: none;
+    position: relative; }
+    .wc-helper .subscription-filter label .chevron {
+      color: #E1E1E1;
+      line-height: 1;
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      border-bottom-width: 0;
+      padding: 0; }
+  .wc-helper .subscription-filter span {
+    font-weight: bold;
+    padding-right: 4px; }
+  .wc-helper .subscription-filter a {
+    position: relative;
+    color: #0073AA;
+    display: inline-block;
+    padding: 0 4px 0 8px;
+    text-decoration: none; }
+    .wc-helper .subscription-filter a:before {
+      background-color: #979797;
+      content: " ";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 1px; }
+  @media only screen and (max-width: 600px) {
+    .wc-helper .subscription-filter {
+      background-color: #fff;
+      border: 1px solid #E1E1E1;
+      border-radius: 2px;
+      font-size: 14px; }
+      .wc-helper .subscription-filter label, .wc-helper .subscription-filter span, .wc-helper .subscription-filter a {
+        border-bottom: 1px solid #E1E1E1;
+        line-height: 2;
+        padding: 8px 16px;
+        margin: 0; }
+      .wc-helper .subscription-filter label, .wc-helper .subscription-filter span.chevron {
+        display: block; }
+      .wc-helper .subscription-filter span, .wc-helper .subscription-filter a {
+        display: none; }
+      .wc-helper .subscription-filter a {
+        cursor: pointer; }
+        .wc-helper .subscription-filter a::before {
+          display: none; }
+      .wc-helper .subscription-filter span.chevron {
+        transform: rotateX(0deg); }
+      .wc-helper .subscription-filter:focus span, .wc-helper .subscription-filter:focus a, .wc-helper .subscription-filter:hover span, .wc-helper .subscription-filter:hover a {
+        display: block; }
+      .wc-helper .subscription-filter:focus span.chevron, .wc-helper .subscription-filter:hover span.chevron {
+        transform: rotateX(0deg); } }
+
+/*------------------------------------------------------------------------------
+  Subscripton table
+------------------------------------------------------------------------------*/
+.wc-helper .striped > tbody > :nth-child(odd),
+.wc-helper ul.striped > :nth-child(odd),
+.wc-helper .alternate {
+  background-color: #ffffff; }
+
+.wc-helper table.widefat,
+.wc-helper .wp-editor-container,
+.wc-helper .stuffbox,
+.wc-helper p.popular-tags,
+.wc-helper .widgets-holder-wrap,
+.wc-helper .popular-tags,
+.wc-helper .feature-filter,
+.wc-helper .imgedit-group,
+.wc-helper .comment-ays {
+  padding-top: 5px; }
+
+.wc-helper .widefat thead tr th,
+.wc-helper .widefat thead tr td,
+.wc-helper .widefat tfoot tr th,
+.wc-helper .widefat tfoot tr td {
+  color: #32373c;
+  padding-top: 10px;
+  padding-bottom: 15px; }
+
+.wc-helper .widefat td {
+  padding-top: 15px;
+  padding-bottom: 15px; }
+
+.wc-helper .wp-list-table {
+  padding-top: 0 !important;
+  border: 0; }
+
+@media only screen and (max-width: 782px) {
+  .wc-helper .button {
+    font-size: 11px; } }
+
+.wc-helper .wp-list-table__row {
+  background-color: transparent; }
+  .wc-helper .wp-list-table__row td {
+    background-color: #fff;
+    border: 0px;
+    padding: 16px 22px;
+    vertical-align: middle; }
+    @media only screen and (max-width: 782px) {
+      .wc-helper .wp-list-table__row td {
+        padding: 16px; } }
+  .wc-helper .wp-list-table__row td.color-bar {
+    border-left: 0; }
+  .wc-helper .wp-list-table__row.is-ext-header td {
+    border-top: 1px solid #E1E1E1; }
+  @media only screen and (max-width: 782px) {
+    .wc-helper .wp-list-table__row.is-ext-header {
+      display: inline-flex;
+      flex-flow: row wrap;
+      width: 100%; }
+      .wc-helper .wp-list-table__row.is-ext-header .wp-list-table__ext-details {
+        flex: 2;
+        display: block; }
+      .wc-helper .wp-list-table__row.is-ext-header .wp-list-table__ext-actions {
+        display: block;
+        flex: 1;
+        min-width: 0; } }
+  .wc-helper .wp-list-table__row:last-child td {
+    border-bottom: 6px solid #F1F1F1;
+    box-shadow: inset 0 -1px 0 #E1E1E1; }
+
+.wc-helper .wp-list-table__ext-details,
+.wc-helper .wp-list-table__ext-status {
+  border-left: 1px solid #E1E1E1 !important;
+  padding-right: 22px;
+  width: 100%; }
+
+.wc-helper .wp-list-table__ext-details {
+  display: flex; }
+  @media only screen and (max-width: 782px) {
+    .wc-helper .wp-list-table__ext-details {
+      display: table; } }
+
+.wc-helper .wp-list-table__ext-title {
+  color: #0073AA;
+  font-size: 18px;
+  font-weight: 784;
+  width: 60%; }
+  @media only screen and (max-width: 782px) {
+    .wc-helper .wp-list-table__ext-title {
+      margin-bottom: 12px;
+      width: 100%; } }
+
+.wc-helper .wp-list-table__ext-description {
+  color: #333;
+  width: 40%; }
+  @media only screen and (max-width: 782px) {
+    .wc-helper .wp-list-table__ext-description {
+      width: 100%; } }
+
+.wc-helper .wp-list-table__ext-status {
+  position: relative; }
+  .wc-helper .wp-list-table__ext-status.update-available:after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 5px;
+    background-color: #FFC322; }
+  .wc-helper .wp-list-table__ext-status.expired:after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 5px;
+    background-color: #B81C23; }
+  .wc-helper .wp-list-table__ext-status .dashicons-update {
+    color: #FFC322; }
+  .wc-helper .wp-list-table__ext-status .dashicons-info {
+    color: #B81C23; }
+  .wc-helper .wp-list-table__ext-status p {
+    color: #333333;
+    margin: 0; }
+  .wc-helper .wp-list-table__ext-status .dashicons {
+    margin-right: 5px; }
+
+.wc-helper .wp-list-table__ext-actions {
+  border-right: 1px solid #E1E1E1 !important;
+  min-width: 150px;
+  width: 25%;
+  text-align: right; }
+
+.wc-helper .wp-list-table__ext-updates td {
+  position: relative; }
+  .wc-helper .wp-list-table__ext-updates td:before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: #E1E1E1; }
+
+.wc-helper .wp-list-table__ext-updates td.wp-list-table__ext-status:before {
+  left: 22px; }
+
+.wc-helper .wp-list-table__ext-updates td.wp-list-table__ext-actions:before {
+  right: 22px; }
+
+@media only screen and (max-width: 782px) {
+  .wc-helper .wp-list-table__ext-updates {
+    display: flex; }
+    .wc-helper .wp-list-table__ext-updates .wp-list-table__ext-status {
+      flex: 2; }
+      .wc-helper .wp-list-table__ext-updates .wp-list-table__ext-status::before {
+        left: 0 !important;
+        width: 100% !important; }
+    .wc-helper .wp-list-table__ext-updates .wp-list-table__ext-actions {
+      flex: 1;
+      min-width: 0; }
+      .wc-helper .wp-list-table__ext-updates .wp-list-table__ext-actions::before {
+        right: 0  !important;
+        left: 0  !important;
+        width: 100%  !important; } }
+
+/*------------------------------------------------------------------------------
+  Expired notification bar
+------------------------------------------------------------------------------*/
+.wc-helper td.color-bar {
+  border-left: solid 4px transparent; }
+
+.wc-helper td.color-bar.expired {
+  border-left-color: #B81C23; }
+
+.wc-helper td.color-bar.expiring {
+  border-left-color: orange; }
+
+.wc-helper td.color-bar.update-available {
+  border-left-color: #8FAE1B; }
+
+.wc-helper td.color-bar.expiring.update-available {
+  border-left-color: #8FAE1B; }
+
+/*------------------------------------------------------------------------------
+  Connected account table
+------------------------------------------------------------------------------*/
+.wc-helper .connect-wrapper {
+  background-color: #fff;
+  margin-bottom: 25px;
+  border: 1px solid #e5e5e5;
+  overflow: auto; }
+
+.wc-helper .connected {
+  display: flex; }
+  .wc-helper .connected .user-info {
+    display: flex;
+    padding: 20px;
+    width: 100%;
+    vertical-align: middle; }
+  .wc-helper .connected img {
+    border: 1px solid #e5e5e5;
+    height: 34px;
+    width: 34px; }
+  .wc-helper .connected .buttons {
+    padding: 20px;
+    white-space: nowrap; }
+  .wc-helper .connected p {
+    flex: 2;
+    margin: 10px 0 0 20px; }
+  .wc-helper .connected .chevron {
+    display: none; }
+    .wc-helper .connected .chevron:hover {
+      cursor: pointer;
+      color: #955a89; }
+  @media only screen and (max-width: 784px) {
+    .wc-helper .connected {
+      display: block; }
+      .wc-helper .connected strong {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis; }
+      .wc-helper .connected p {
+        margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 80%; }
+      .wc-helper .connected .user-info {
+        padding-right: 0;
+        width: auto; }
+      .wc-helper .connected .avatar {
+        margin-right: 12px; }
+      .wc-helper .connected .chevron {
+        display: block;
+        color: #E1E1E1;
+        margin: 10px;
+        transform: rotateX(0deg); }
+      .wc-helper .connected .buttons {
+        border-top: 1px solid #E1E1E1;
+        padding: 10px 20px;
+        display: none; }
+        .wc-helper .connected .buttons.active {
+          display: block; } }
+
+/*------------------------------------------------------------------------------
+  Initial connection screen
+------------------------------------------------------------------------------*/
+.wc-helper .start-container {
+  background-color: #ffffff;
+  padding: 45px 20px 20px 30px;
+  position: relative;
+  overflow: hidden;
+  border-left: 4px solid #cc99c2; }
+
+.wc-helper .start-container::before {
+  content: "\e01C";
+  font-family: WooCommerce;
+  text-align: center;
+  line-height: 1;
+  color: #eee2ec;
+  display: block;
+  width: 1em;
+  font-size: 192px;
+  top: 65%;
+  right: -3%;
+  position: absolute; }
+
+.wc-helper .start-container h2 {
+  font-size: 24px;
+  line-height: 29px;
+  position: relative; }
+
+.wc-helper .start-container p {
+  font-size: 16px;
+  margin-bottom: 30px;
+  position: relative; }
+
+.wc-helper .wp-core-ui .button-primary {
+  background: #bb77ae;
+  border-color: #A36597;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #A36597;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #A36597;
+  color: #fff;
+  text-shadow: 0 -1px 1px #A36597, 1px 0 1px #A36597, 0 1px 1px #A36597, -1px 0 1px #A36597; }
+
+.wc-helper .wp-core-ui a.button-primary:hover {
+  background: #A36597;
+  border-color: #A36597;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #A36597;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #A36597; }
+
+.wc-helper .wp-core-ui a.button-primary:focus {
+  background: #A36597;
+  border-color: #A36597;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #A36597;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #A36597; }
+
+.wc-helper .wp-core-ui a.button-primary:active {
+  background: #A36597;
+  border-color: #A36597;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #A36597;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #A36597; }
+
+.form-toggle[type="checkbox"] {
+  display: none; }
+
+.form-toggle__switch {
+  position: relative;
+  display: inline-block;
+  border-radius: 12px;
+  box-sizing: border-box;
+  padding: 2px;
+  width: 40px;
+  height: 24px;
+  vertical-align: middle;
+  align-self: flex-start;
+  outline: 0;
+  cursor: pointer;
+  transition: all .4s ease, box-shadow 0s; }
+  .form-toggle__switch:before, .form-toggle__switch:after {
+    position: relative;
+    display: block;
+    content: "";
+    width: 20px;
+    height: 20px; }
+  .form-toggle__switch:after {
+    left: 0;
+    border-radius: 50%;
+    background: #ffffff;
+    transition: all .2s ease; }
+  .form-toggle__switch:before {
+    display: none; }
+  .accessible-focus .form-toggle__switch:focus {
+    box-shadow: 0 0 0 2px #955a89; }
+
+.form-toggle__label {
+  cursor: pointer; }
+  .is-disabled .form-toggle__label {
+    cursor: default; }
+  .form-toggle__label .form-toggle__label-content {
+    flex: 0 1 100%;
+    margin-left: 12px;
+    color: #87a6bc;
+    font-size: 13px;
+    line-height: 16px;
+    margin-right: 8px;
+    vertical-align: top;
+    text-transform: uppercase;
+    cursor: pointer; }
+    @media only screen and (max-width: 480px) {
+      .form-toggle__label .form-toggle__label-content {
+        display: none; } }
+
+.accessible-focus .form-toggle:focus + .form-toggle__label .form-toggle__switch {
+  box-shadow: 0 0 0 2px #955a89; }
+
+.accessible-focus .form-toggle:focus:checked + .form-toggle__label .form-toggle__switch {
+  box-shadow: 0 0 0 2px #bb77ae; }
+
+.form-toggle + .form-toggle__label .form-toggle__switch {
+  background: #a8bece; }
+
+.form-toggle:not(:disabled) + .form-toggle__label:hover .form-toggle__switch {
+  background: #c8d7e1; }
+
+.form-toggle:checked + .form-toggle__label .form-toggle__switch {
+  background: #955a89; }
+  .form-toggle:checked + .form-toggle__label .form-toggle__switch:after {
+    left: 16px; }
+
+.form-toggle:checked:not(:disabled) + .form-toggle__label:hover .form-toggle__switch {
+  background: #bb77ae; }
+
+.form-toggle:disabled + label.form-toggle__label span.form-toggle__switch {
+  opacity: 0.25;
+  cursor: default; }
+
+.form-toggle.is-toggling + .form-toggle__label .form-toggle__switch {
+  background: #955a89; }
+
+.form-toggle.is-toggling:checked + .form-toggle__label .form-toggle__switch {
+  background: #c8d7e1; }
+
+.form-toggle.is-compact + .form-toggle__label .form-toggle__switch {
+  border-radius: 8px;
+  width: 24px;
+  height: 16px; }
+  .form-toggle.is-compact + .form-toggle__label .form-toggle__switch:before, .form-toggle.is-compact + .form-toggle__label .form-toggle__switch:after {
+    width: 12px;
+    height: 12px; }
+
+.form-toggle.is-compact:checked + .form-toggle__label .form-toggle__switch:after {
+  left: 8px; }
diff --git a/assets/css/helper.scss b/assets/css/helper.scss
index 3b20765b8ba..674228c8424 100644
--- a/assets/css/helper.scss
+++ b/assets/css/helper.scss
@@ -2,6 +2,178 @@
   General table styling
 ------------------------------------------------------------------------------*/
 
+$white: #ffffff;
+
+// Primary Accent (Blues)
+$blue-wordpress:         #0087be;
+$woo_pink2:             #78dcfa;
+$woo_pink1:            #00aadc;
+$blue-dark:              #005082;
+
+// Jetpack Green
+$green-jetpack:          #8cc258;
+
+// Grays
+$gray:                   #87a6bc;
+$gray-light:             lighten( $gray, 33% ); //#f3f6f8
+$gray-dark:              darken( $gray, 38% ); //#2e4453
+
+// $gray-text: ideal for standard, non placeholder text
+// $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
+$gray-text:              $gray-dark;
+$gray-text-min:          darken( $gray, 18% ); //#537994
+
+$woo_pink1: #955a89;
+$woo_pink2: #bb77ae;
+
+
+$color_text_blue: #0073AA;
+$color_button_primary: $woo_pink1;
+$color_button_secondary: $woo_pink2;
+
+/*------------------------------------------------------------------------------
+  Tab navigation
+------------------------------------------------------------------------------*/
+
+.wc-helper{
+	.nav-tab-wrapper{
+		margin-bottom: 22px;
+	}
+	@media only screen and (max-width : 784px) {
+		.nav-tab{
+			max-width: 40%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+
+
+/*------------------------------------------------------------------------------
+  Buttons
+------------------------------------------------------------------------------*/
+
+.wc-helper{
+	.button, .button:hover{
+		background-color: $color_button_primary;
+		border-width: 0;
+		box-shadow: none;
+		border-radius: 3px;
+		color: #fff;
+		height: auto;
+		padding: 3px 14px;
+		text-align: center;
+		white-space: normal !important;
+
+		@media only screen and (max-width : 782px) {
+			line-height: 2;
+		}
+	}
+	.button:hover{
+		opacity: 0.8;
+	}
+
+	.button.button-secondary{
+		background-color: #e6e6e6;
+		color: #3c3c3c;
+		text-shadow: none;
+	}
+}
+
+.wc-helper .subscription-filter{
+	color: #2E4453;
+	font-size: 13px;
+	line-height: 13px;
+	margin: 22px 0;
+
+	label{
+		display: none;
+		position: relative;
+
+		.chevron{
+			color: #E1E1E1;
+			line-height: 1;
+			position: absolute;
+				top: 12px;
+				right: 12px;
+			border-bottom-width: 0;
+			padding: 0;
+		}
+	}
+
+	span{
+		font-weight: bold;
+		padding-right: 4px;
+	}
+
+	a{
+		position: relative;
+		color: #0073AA;
+		display: inline-block;
+		padding: 0 4px 0 8px;
+		text-decoration: none;
+
+		&:before{
+			background-color: #979797;
+			content: " ";
+			position: absolute;
+				top: 0;
+				left: 0;
+				bottom: 0;
+			width: 1px;
+		}
+	}
+
+	@media only screen and (max-width : 600px) {
+		background-color: #fff;
+		border: 1px solid #E1E1E1;
+		border-radius: 2px;
+		font-size: 14px;
+
+		label, span, a{
+			border-bottom: 1px solid #E1E1E1;
+			line-height: 2;
+			padding: 8px 16px;
+			margin: 0;
+		}
+
+		label, span.chevron{
+			display: block;
+		}
+
+		span, a{
+			display: none;
+		}
+
+		a{
+			cursor: pointer;
+
+			&::before{
+				display: none;
+			}
+		}
+
+		span.chevron{
+			transform: rotateX(0deg);
+		}
+
+		&:focus,&:hover{
+			span, a{
+				display: block;
+			}
+
+			span.chevron{
+				transform: rotateX(0deg);
+			}
+		}
+	}
+
+}
+
+/*------------------------------------------------------------------------------
+  Subscripton table
+------------------------------------------------------------------------------*/
+
 .wc-helper {
 	.striped > tbody > :nth-child(odd),
 	ul.striped > :nth-child(odd),
@@ -31,16 +203,203 @@
 	}
 
 	.widefat td {
-		border-bottom: 1px solid #e5e5e5;
+		//border-bottom: 1px solid #e5e5e5;
 		padding-top: 15px;
 		padding-bottom: 15px;
 	}
 
-	.product-name {
-		color: #0073AA;
+	.wp-list-table{
+		padding-top: 0 !important;
+		border: 0;
+	}
+
+	.button{
+		@media only screen and (max-width : 782px) {
+			font-size: 11px;
+		}
+	}
+
+	.wp-list-table__row{
+		background-color: rgba(0,0,0,0);
+
+		td{
+			background-color: #fff;
+			border: 0px;
+			//border-top: 1px solid #e5e5e5;
+			padding: 16px 22px;
+			vertical-align: middle;
+
+			@media only screen and (max-width : 782px) {
+				padding: 16px;
+			}
+		}
+
+		td.color-bar{
+			border-left: 0;
+		}
+
+		&.is-ext-header{
+
+			td{
+				border-top: 1px solid #E1E1E1;
+			}
+
+			@media only screen and (max-width : 782px) {
+				display: inline-flex;
+				flex-flow: row wrap;
+				width: 100%;
+
+				.wp-list-table__ext-details{
+					flex: 2;
+					display: block;
+				}
+				.wp-list-table__ext-actions{
+					display: block;
+					flex: 1;
+					min-width: 0;
+				}
+			}
+		}
+
+		&:last-child td{
+			border-bottom: 6px solid #F1F1F1;
+			box-shadow: inset 0 -1px 0 #E1E1E1;
+		}
+	}
+
+	.wp-list-table__ext-details,
+	.wp-list-table__ext-status{
+		border-left: 1px solid #E1E1E1 !important;
+		padding-right: 22px;
+		width: 100%;
+	}
+
+	.wp-list-table__ext-details{
+			display: flex;
+
+			@media only screen and (max-width : 782px) {
+				display: table;
+			}
+	}
+
+	.wp-list-table__ext-title{
+		color: $color_text_blue;
+		font-size: 18px;
+		font-weight: 784;
+			width: 60%;
+
+		@media only screen and (max-width : 782px) {
+			margin-bottom: 12px;
+			width: 100%;
+		}
+	}
+	.wp-list-table__ext-description {
+		color: #333;
+		width: 40%;
+
+		@media only screen and (max-width : 782px) {
+			width: 100%;
+		}
+	}
+	.wp-list-table__ext-status {
+		position: relative;
+
+		&.update-available:after{
+			content: " ";
+			position: absolute;
+				top: 0;
+				left: 0;
+				bottom: 0;
+			width: 5px;
+			background-color: #FFC322;
+		}
+
+		&.expired:after{
+			content: " ";
+			position: absolute;
+				top: 0;
+				left: 0;
+				bottom: 0;
+			width: 5px;
+			background-color: #B81C23;
+		}
+
+		.dashicons-update{
+			color: #FFC322;
+		}
+
+		.dashicons-info{
+			color: #B81C23;
+		}
+
+		p{
+			color: #333333;
+			margin: 0;
+		}
+
+		.dashicons{
+			margin-right: 5px;
+		}
+	}
+
+	.wp-list-table__ext-actions{
+		border-right: 1px solid #E1E1E1 !important;
+		min-width: 150px;
+		width: 25%;
+		text-align: right;
+	}
+
+	.wp-list-table__ext-updates {
+
+		td{
+			position: relative;
+
+			&:before {
+				content: " ";
+				position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+				height: 1px;
+				background-color: #E1E1E1;
+			}
+		}
+
+		td.wp-list-table__ext-status:before {
+			left: 22px;
+		}
+
+		td.wp-list-table__ext-actions:before {
+			right: 22px;
+		}
+
+		@media only screen and (max-width : 782px) {
+			display: flex;
+
+			.wp-list-table__ext-status{
+				flex: 2;
+
+				&::before{
+					left: 0 !important;
+					width: 100% !important;
+				}
+			}
+
+			.wp-list-table__ext-actions{
+				flex: 1;
+				min-width: 0;
+
+				&::before{
+					right: 0  !important;
+					left: 0  !important;
+					width: 100%  !important;
+				}
+			}
+		}
 	}
 }
 
+
 /*------------------------------------------------------------------------------
   Expired notification bar
 ------------------------------------------------------------------------------*/
@@ -75,28 +434,94 @@
 	.connect-wrapper {
 		background-color: #fff;
 		margin-bottom: 25px;
-		padding: 20px;
 		border: 1px solid #e5e5e5;
+		overflow: auto;
 	}
 
 	.connected {
-		display: inline-block;
-		vertical-align: top;
-	}
+		display: flex;
 
-	.connected img {
-		border: 1px solid #e5e5e5;
-		vertical-align: top;
-	}
+		.user-info{
+			display: flex;
+			padding: 20px;
+			width: 100%;
+			vertical-align: middle;
+		}
 
-	.connected p {
-		display: inline-block;
-		margin: 10px 0 0 20px;
-	}
+		img {
+			border: 1px solid #e5e5e5;
+			height: 34px;
+			width: 34px;
+		}
 
-	.buttons {
-		display: block;
-		margin-top: 10px;
+		.buttons{
+			padding: 20px;
+			white-space: nowrap;
+		}
+
+		p {
+			flex: 2;
+			margin: 10px 0 0 20px;
+		}
+
+		.chevron{
+			display: none;
+
+			&:hover{
+				cursor: pointer;
+				color: $woo_pink1;
+			}
+		}
+
+		@media only screen and (max-width : 784px) {
+
+			display: block;
+
+			strong{
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			p{
+				margin: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				width: 80%;
+			}
+
+			.user-info{
+				padding-right: 0;
+				width: auto;
+			}
+
+			.avatar{
+				margin-right: 12px;
+			}
+
+			.chevron{
+				display: block;
+				color: #E1E1E1;
+				margin: 10px;
+				transform: rotateX(0deg);
+			}
+
+			.buttons{
+				border-top: 1px solid #E1E1E1;
+				padding: 10px 20px;
+
+				display: none;
+
+				&.active{
+					display: block;
+
+					.chevron{
+
+					}
+				}
+
+			}
+		}
 	}
 }
 
@@ -169,3 +594,150 @@
 		box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 #A36597;
 	}
 }
+
+
+// ==========================================================================
+// FormToggle
+// ==========================================================================
+
+.form-toggle[type="checkbox"] {
+	display: none;
+}
+
+.form-toggle__switch {
+	position: relative;
+	display: inline-block;
+	border-radius: 12px;
+	box-sizing: border-box;
+	padding: 2px;
+	width: 40px;
+	height: 24px;
+	vertical-align: middle;
+	align-self: flex-start;
+	outline: 0;
+	cursor: pointer;
+	transition: all .4s ease, box-shadow 0s;
+
+	&:before,
+	&:after {
+		position: relative;
+		display: block;
+		content: "";
+		width: 20px;
+		height: 20px;
+	}
+	&:after {
+		left: 0;
+		border-radius: 50%;
+		background: $white;
+		transition: all .2s ease;
+	}
+	&:before {
+		display: none;
+	}
+	.accessible-focus &:focus{
+		box-shadow: 0 0 0 2px $woo_pink1;
+	}
+}
+
+.form-toggle__label {
+	cursor: pointer;
+
+	.is-disabled & {
+		cursor: default;
+	}
+
+	.form-toggle__label-content {
+		flex: 0 1 100%;
+		margin-left: 12px;
+
+    color: #87a6bc;
+    font-size: 13px;
+    line-height: 16px;
+    margin-right: 8px;
+    vertical-align: top;
+    text-transform: uppercase;
+    cursor: pointer;
+
+		@media only screen and (max-width : 480px) {
+			display: none;
+		}
+	}
+}
+
+.form-toggle {
+	.accessible-focus &:focus {
+		+ .form-toggle__label .form-toggle__switch {
+			box-shadow: 0 0 0 2px $woo_pink1;
+		}
+		&:checked + .form-toggle__label .form-toggle__switch {
+			box-shadow: 0 0 0 2px $woo_pink2;
+		}
+	}
+
+	& + .form-toggle__label .form-toggle__switch {
+		background: lighten( $gray, 10% );
+	}
+
+	&:not( :disabled ) {
+		+ .form-toggle__label:hover .form-toggle__switch {
+			background: lighten( $gray, 20% );
+		}
+	}
+
+	&:checked{
+		+ .form-toggle__label .form-toggle__switch {
+			background: $woo_pink1;
+
+			&:after {
+				left: 16px;
+			}
+		}
+	}
+
+	&:checked:not( :disabled ) {
+		+ .form-toggle__label:hover .form-toggle__switch {
+			background: $woo_pink2;
+		}
+	}
+
+	&:disabled {
+		+ label.form-toggle__label span.form-toggle__switch {
+			opacity: 0.25;
+			cursor: default;
+		}
+	}
+}
+
+// Classes for toggle state before action is complete (updating plugin or something)
+.form-toggle.is-toggling {
+	+ .form-toggle__label .form-toggle__switch {
+		background: $woo_pink1;
+	}
+	&:checked {
+		+ .form-toggle__label .form-toggle__switch {
+			background: lighten( $gray, 20% );
+		}
+	}
+}
+
+.form-toggle.is-compact {
+	+ .form-toggle__label .form-toggle__switch {
+		border-radius: 8px;
+		width: 24px;
+		height: 16px;
+
+		&:before,
+		&:after {
+			width: 12px;
+			height: 12px;
+		}
+	}
+	&:checked {
+		+ .form-toggle__label .form-toggle__switch {
+			&:after{
+				left: 8px;
+			}
+		}
+	}
+}
diff --git a/includes/admin/helper/views/html-main.php b/includes/admin/helper/views/html-main.php
index 47540dbba6f..6c1b813587d 100644
--- a/includes/admin/helper/views/html-main.php
+++ b/includes/admin/helper/views/html-main.php
@@ -10,15 +10,18 @@
 	<h2><?php _e( 'Subscriptions', 'woocommerce' ); ?></h2>
 	<p><?php _e( 'Below is a list of products available on your WooCommerce.com account. To receive plugin updates please make sure the product is installed, activated and connected to your WooCommerce.com account.', 'woocommerce' ); ?></p>
 
-	<table class="wp-list-table widefat fixed striped ">
-		<thead>
-			<tr>
-				<th><?php _e( 'Product', 'woocommerce' ); ?></th>
-				<th><?php _e( 'Subscription', 'woocommerce' ); ?></th>
-				<th><?php _e( 'Site Usage', 'woocommerce' ); ?></th>
-				<th><?php _e( 'Action', 'woocommerce' ); ?></th>
-			</tr>
-		</thead>
+	<!--<div class="subscription-filter">
+		<label>Sort by: <span class="chevron dashicons dashicons-arrow-up-alt2"></span></label>
+		<span >All (10)</span>
+		<a href="#">Active (4)</a>
+		<a href="#">Inactive (6)</a>
+		<a href="#">Update Available (4)</a>
+		<a href="#">Expiring Soon (4)</a>
+		<a href="#">Expired (1)</a>
+		<a href="#">Download (1)</a>
+	</div>-->
+
+	<table class="wp-list-table widefat fixed striped">
 		<?php if ( ! empty( $subscriptions ) ) : ?>
 			<?php foreach ( $subscriptions as $subscription ) : ?>
 				<?php
@@ -51,104 +54,140 @@
 
 					$classes = array_keys( $classes );
 				?>
-				<tr>
-					<td class="<?php echo implode( ' ', $classes ); ?>">
-						<a class="product-name" href="<?php echo esc_url( $subscription['product_url'] ); ?>" target="_blank"><?php
-							echo esc_html( $subscription['product_name'] ); ?></a><br>
-						<?php if ( $update_available && $connected && ! $subscription['expired'] ) : ?>
-							<?php /* translators: %s: version number */ ?>
-							<a href="<?php echo admin_url( 'update-core.php' ); ?>"><?php printf( __( 'Update to %s', 'woocommerce' ), esc_html( $updates[ $product_id ]['version'] ) ); ?></a>
-						<?php endif; ?>
+				<tbody>
+				<tr class="wp-list-table__row is-ext-header">
+					<td class="wp-list-table__ext-details <?php echo implode( ' ', $classes ); ?>">
+						<div class="wp-list-table__ext-title">
+							<a href="<?php echo esc_url( $subscription['product_url'] ); ?>" target="_blank"><?php
+								echo esc_html( $subscription['product_name'] ); ?></a>
+						</div>
 
-						<?php if ( $update_available && $connected && $subscription['expired'] ) : ?>
-							<?php /* translators: %s: version number */ ?>
-							<?php printf( __( '%s available', 'woocommerce' ), esc_html( $updates[ $product_id ]['version'] ) ); ?>
-							<a href="#">[?]</a><!-- Sub is active but expired -->
-						<?php endif; ?>
-
-						<?php if ( $update_available && ! $connected ) : ?>
-							<?php /* translators: %s: version number */ ?>
-							<?php printf( __( '%s available', 'woocommerce' ), esc_html( $updates[ $product_id ]['version'] ) ); ?>
-							<a href="#">[?]</a><!-- Subscription must be active to receive updates -->
-						<?php endif; ?>
-
-						<?php if ( ! $installed && $update_available ) : ?>
-							<?php /* translators: %s: version number */ ?>
-							<strong><?php printf( __( '%s available', 'woocommerce' ), esc_html( $updates[ $product_id ]['version'] ) ); ?></strong>
-						<?php endif; ?>
-					</td>
-					<td>
-						<?php if ( $subscription['expired'] ) : ?>
-							<strong><span class="expired" style="color: #B81C23;"><?php _e( 'Expired :(', 'woocommerce' ); ?></span></strong><br>
-							<strong><?php echo date_i18n( 'F jS, Y', $subscription['expires'] ); ?></strong>
-						<?php elseif ( $subscription['autorenew'] ) : ?>
-							<span class="renews" style="color: black;"><?php _e( 'Auto renews on:', 'woocommerce' ); ?></span><br>
-							<span><?php echo date_i18n( 'F jS, Y', $subscription['expires'] ); ?></span>
-						<?php elseif ( $subscription['expiring'] ) : ?>
-							<strong><span class="expiring" style="color: orange;"><?php _e( 'Expiring soon!', 'woocommerce' ); ?></span></strong><br>
-							<strong><?php echo date_i18n( 'F jS, Y', $subscription['expires'] ); ?></strong>
-						<?php else : ?>
-							<span class="renews" style="color: black;"><?php _e( 'Expires on:', 'woocommerce' ); ?></span><br>
-							<span><?php echo date_i18n( 'F jS, Y', $subscription['expires'] ); ?></span>
-						<?php endif; ?>
-					</td>
-					<td>
-						<?php echo esc_html( $subscription['key_type_label'] ); ?>
-						<?php
-							if ( $subscription['sites_max'] > 0 ) {
-								/* translators: %1$d: sites active, %2$d max sites active */
-								printf( __( '(%1$d of %2$d used)', 'woocommerce' ), $subscription['sites_active'], $subscription['sites_max'] );
-							}
-						?><br>
-						<?php if ( ! $installed ) : ?>
-							<?php _e( 'Not installed', 'woocommerce' ); ?><br>
-						<?php elseif ( $installed ) : ?>
-							<?php _e( 'Installed on this site', 'woocommerce' ); ?><br>
-						<?php endif; ?>
-					</td>
-					<td>
-						<?php if ( ! $subscription['expired'] ) : ?>
-							<?php if ( $connected ) : ?>
-								<?php if ( $update_available ) : ?>
-									<a class="button" href="<?php echo esc_url( $subscription['update_url'] ); ?>"><?php _e( 'Update', 'woocommerce' ); ?></a>
-								<?php endif; ?>
-								<?php if ( $subscription['expiring'] ) : ?>
-									<a class="button" href="https://woocommerce.com/my-account/my-subscriptions/"><?php _e( 'Renew', 'woocommerce' ); ?></a>
-								<?php endif; ?>
-								<a class="button" href="<?php echo esc_url( $subscription['deactivate_url'] ); ?>"><?php _e( 'Deactivate', 'woocommerce' ); ?></a>
+						<div class="wp-list-table__ext-description">
+							<?php if ( $subscription['expired'] ) : ?>
+								<span class="renews">
+									<strong><?php _e( 'Expired :(', 'woocommerce' ); ?></strong>
+									<?php echo date_i18n( 'F jS, Y', $subscription['expires'] ); ?>
+								</span>
+							<?php elseif ( $subscription['autorenew'] ) : ?>
+								<span class="renews">
+									<?php _e( 'Auto renews on:', 'woocommerce' ); ?>
+									<?php echo date_i18n( 'F jS, Y', $subscription['expires'] ); ?>
+								</span>
 							<?php elseif ( $subscription['expiring'] ) : ?>
-								<a class="button" href="https://woocommerce.com/my-account/my-subscriptions/"><?php _e( 'Renew', 'woocommerce' ); ?></a>
-							<?php elseif ( $installed ) : ?>
-								<a class="button" href="<?php echo esc_url( $subscription['activate_url'] ); ?>"><?php _e( 'Activate', 'woocommerce' ); ?></a>
+								<span class="renews">
+									<strong><?php _e( 'Expiring soon!', 'woocommerce' ); ?></strong>
+									<?php echo date_i18n( 'F jS, Y', $subscription['expires'] ); ?>
+								</span>
 							<?php else : ?>
-								<a class="button" href="<?php echo esc_url( $download_url ); ?>" target="_blank"><?php _e( 'Download', 'woocommerce' ); ?></a>
+								<span class="renews">
+									<?php _e( 'Expires on:', 'woocommerce' ); ?>
+									<?php echo date_i18n( 'F jS, Y', $subscription['expires'] ); ?>
+								</span>
 							<?php endif; ?>
+
+							<br/>
+							<span class="subscription">
+							<?php
+								if ( $subscription['sites_max'] > 0 ) {
+									/* translators: %1$d: sites active, %2$d max sites active */
+									printf( __( 'Subscription: Using %1$d of %2$d sites available', 'woocommerce' ), $subscription['sites_active'], $subscription['sites_max'] );
+								} else {
+									_e( 'Subscription: Unlimited', 'woocommerce' );
+								}
+							?>
+							</span>
+						</div>
+					</td>
+					<td class="wp-list-table__ext-actions">
+						<?php if ( ! $installed && ! $subscription['expired'] ) : ?>
+							<a class="button" href="<?php echo esc_url( $download_url ); ?>" target="_blank"><?php _e( 'Download', 'woocommerce' ); ?></a>
+						<?php elseif ( $connected ) : ?>
+							<!-- TODO: Replace with a toggle -->
+							<a class="button" href="<?php echo esc_url( $subscription['deactivate_url'] ); ?>"><?php _e( 'Deactivate', 'woocommerce' ); ?></a>
+						<?php elseif ( ! $subscription['expired'] ) : ?>
+							<a class="button" href="<?php echo esc_url( $subscription['activate_url'] ); ?>"><?php _e( 'Activate', 'woocommerce' ); ?></a>
 						<?php else : ?>
-							<a class="button" href="https://woocommerce.com/my-account/my-subscriptions/" target="_blank"><?php _e( 'Renew', 'woocommerce' ); ?></a>
+							<a class="button disabled" href="#"><?php _e( 'Activate', 'woocommerce' ); ?></a>
 						<?php endif; ?>
 					</td>
 				</tr>
 
+				<?php if ( $update_available && ! $subscription['expired'] ) : ?>
+				<tr class="wp-list-table__row wp-list-table__ext-updates">
+					<td class="wp-list-table__ext-status update-available">
+						<p><span class="dashicons dashicons-update"></span>
+							<?php /* translators: %s: version number */ ?>
+							<?php printf( __( 'Version %s is <strong>available</strong>.', 'woocommerce' ), esc_html( $updates[ $product_id ]['version'] ) ); ?>
+							<?php if ( ! $connected ) : ?>
+								<?php _e( 'To enable this update you need to <strong>activate</strong> this subscription.', 'woocommerce' ); ?>
+							<?php endif; ?>
+						</p>
+					</td>
+					<td class="wp-list-table__ext-actions">
+						<?php if ( $connected ) : ?>
+							<a class="button" href="<?php echo esc_url( $subscription['update_url'] ); ?>"><?php _e( 'Update', 'woocommerce' ); ?></a>
+							<!-- TODO: Activate & Update -->
+						<?php endif; ?>
+					</td>
+				</tr>
+				<?php endif; ?>
+
+				<?php if ( $update_available && $subscription['expired'] ) : ?>
+				<tr class="wp-list-table__row wp-list-table__ext-updates">
+					<td class="wp-list-table__ext-status expired">
+						<p><span class="dashicons dashicons-info"></span>
+							<?php /* translators: %s: version number */ ?>
+							<?php printf( __( 'Version %s is <strong>available</strong>.', 'woocommerce' ), esc_html( $updates[ $product_id ]['version'] ) ); ?>
+							<?php _e( 'To enable this update you need to <strong>purchase</strong> a new subscription.', 'woocommerce' ); ?>
+						</p>
+					</td>
+					<td class="wp-list-table__ext-actions">
+						<a class="button" href="<?php echo esc_url( $subscription['product_url'] ); ?>" target="_blank"><?php _e( 'Purchase', 'woocommerce' ); ?></a>
+					</td>
+				</tr>
+				<?php endif; ?>
+
+				<?php if ( $subscription['expiring'] && ! $subscription['autorenew'] ) : ?>
+				<tr class="wp-list-table__row wp-list-table__ext-updates">
+					<td class="wp-list-table__ext-status expired">
+						<p><span class="dashicons dashicons-info"></span>
+							<?php _e( 'Subscription is <strong>expiring</strong> soon.', 'woocommerce' ); ?>
+						</p>
+					</td>
+					<td class="wp-list-table__ext-actions">
+						<a class="button" href="https://woocommerce.com/my-account/my-subscriptions/" target="_blank"><?php _e( 'Enable auto-renew', 'woocommerce' ); ?></a>
+					</td>
+				</tr>
+				<?php endif; ?>
+
+				<?php if ( ! $connected && $subscription['sites_max'] > 0 && $subscription['sites_active'] >= $subscription['sites_max'] ) : ?>
+				<tr class="wp-list-table__row wp-list-table__ext-updates">
+					<td class="wp-list-table__ext-status expired">
+						<p><span class="dashicons dashicons-info"></span>
+							<?php _e( 'You are already using the <strong>maximum number of sites available</strong> with your current subscription.', 'woocommerce' ); ?>
+						</p>
+					</td>
+					<td class="wp-list-table__ext-actions">
+						<a class="button" href="https://woocommerce.com/my-account/my-subscriptions/" target="_blank"><?php _e( 'Upgrade', 'woocommerce' ); ?></a>
+					</td>
+				</tr>
+				<?php endif; ?>
+
+				</tbody>
 			<?php endforeach; ?>
 		<?php else : ?>
 			<tr>
 				<td colspan="3"><em><?php _e( 'Could not find any subscriptions on your WooCommerce.com account', 'woocommerce' ); ?></td>
 			</tr>
 		<?php endif; ?>
+		</tbody>
 	</table>
 
 	<?php if ( ! empty( $no_subscriptions ) ) : ?>
-		<h2><?php _e( 'Installed Extensions Without a Subscription', 'woocommerce' ); ?></h2>
-		<table class="wp-list-table widefat fixed striped ">
-			<thead>
-				<tr>
-					<th><?php _e( 'Product', 'woocommerce' ); ?></th>
-					<th><?php _e( 'Subscription', 'woocommerce' ); ?></th>
-					<th></th>
-					<th><?php _e( 'Action', 'woocommerce' ); ?></th>
-				</tr>
-			</thead>
+		<h2><?php _e( 'Installed Extensions without a Subscription', 'woocommerce' ); ?></h2>
+		<p>Below is a list of WooCommerce.com products available on your site - but are either out-dated or do not have a valid subscription.</p>
 
+		<table class="wp-list-table widefat fixed striped">
 			<?php /* Extensions without a subscription. */ ?>
 			<?php foreach ( $no_subscriptions as $filename => $data ) : ?>
 				<?php
@@ -167,28 +206,43 @@
 					$product_url = $data['PluginURI'];
 				}
 				?>
-				<tr>
-					<td>
-						<?php /* translators: %1$s: product name, %2$s: product version */ ?>
-						<?php printf( __( '%1$s<br>%2$s installed', 'woocommerce' ), esc_html( $data['Name'] ), esc_html( $data['Version'] ) ); ?>
-						<?php if ( ! $update_available ) : ?>
-							<?php _e( '(latest)', 'woocommerce' ); ?>
-						<?php endif; ?>
-						<br>
+				<tbody>
+					<tr class="wp-list-table__row is-ext-header">
+						<td class="wp-list-table__ext-details color-bar autorenews">
+							<div class="wp-list-table__ext-title">
+								<a href="<?php echo esc_url( $product_url ); ?>" target="_blank"><?php echo esc_html( $data['Name'] ); ?></a>
+							</div>
+							<div class="wp-list-table__ext-description">
+							</div>
+						</td>
+						<td class="wp-list-table__ext-actions">
+							<span class="form-toggle__wrapper">
+								<input type="checkbox" class="form-toggle is-compact" readonly="" value="on">
+								<label class="form-toggle__label" for="activate-akismet-undefined">
+									<span class="form-toggle__label-content">
+										<label class="plugin-action__label" for="activate-akismet-undefined">Inactive</label>
+									</span>
+									<span class="form-toggle__switch" id="activate-akismet-undefined" role="checkbox" aria-checked="false" tabindex="0"></span>
+								</label>
+							</span>
+						</td>
+					</tr>
 
-						<?php if ( $update_available ) : ?>
-						<?php /* translators: %s: version number */ ?>
-						<strong><?php printf( __( '%s available', 'woocommerce' ), esc_html( $updates[ $product_id ]['version'] ) ); ?></strong>
-						<a href="#">[?]</a><!-- There must be an active subscription to receive updates -->
-						<?php endif; ?>
+					<?php if ( $update_available ) : ?>
+					<tr class="wp-list-table__row wp-list-table__ext-updates">
+						<td class="wp-list-table__ext-status update-available">
+							<p><span class="dashicons dashicons-update"></span>
+								<?php printf( __( 'Version %s is available. To enable this update you need to <strong>purchase</strong> a new subscription.', 'woocommerce' ), esc_html( $updates[ $product_id ]['version'] ) ); ?>
+							</p>
+						</td>
+						<td class="wp-list-table__ext-actions">
+							<a class="button" href="<?php echo esc_url( $product_url ); ?>" target="_blank"><?php _e( 'Purchase', 'woocommerce' ); ?></a>
+						</td>
+					</tr>
+					<?php endif; ?>
+
+				</tbody>
 
-					</td>
-					<td><?php _e( 'No/Invalid subscription', 'woocommerce' ); ?></td>
-					<td></td>
-					<td>
-						<a class="button" href="<?php echo esc_url( $product_url ); ?>" target="_blank"><?php _e( 'Purchase Subscription', 'woocommerce' ); ?></a>
-					</td>
-				</tr>
 			<?php endforeach; ?>
 		</table>
 	<?php endif; ?>
diff --git a/includes/admin/helper/views/html-section-account.php b/includes/admin/helper/views/html-section-account.php
index 879cf0099ee..edfd909c8b0 100644
--- a/includes/admin/helper/views/html-section-account.php
+++ b/includes/admin/helper/views/html-section-account.php
@@ -1,17 +1,15 @@
 <?php defined( 'ABSPATH' ) or exit(); ?>
 
-<h2><?php _e( 'Your Account', 'woocommerce' ); ?></h2>
-
 <div class="connect-wrapper">
-	<div class="connected">
-		<?php echo get_avatar( $auth_user_data['email'], 100 ); ?>
-		<p>
-			<?php /* translators: %s: connected user e-mail */ ?>
-			<?php printf( __( 'Connected as:<br /> <strong>%s</strong>', 'woocommerce' ), esc_html( $auth_user_data['email'] ) ); ?>
-			<span class="buttons">
-				<a class="button" href="<?php echo esc_url( $refresh_url ); ?>"><?php _e( 'Refresh', 'woocommerce' ); ?></a>
-				<a class="button" href="<?php echo esc_url( $disconnect_url ); ?>"><?php _e( 'Disconnect', 'woocommerce' ); ?></a>
-			</span>
-		</p>
+	<div class="connected active">
+		<div class="user-info">
+			<?php echo get_avatar( $auth_user_data['email'], 100 ); ?>
+			<p><?php printf( __( 'Connected to: <strong>%s</strong>', 'woocommerce' ), esc_html( $auth_user_data['email'] ) ); ?></p>
+			<span class="chevron dashicons dashicons-arrow-up-alt2"></span>
+		</div>
+		<div class="buttons active">
+			<a class="button button-secondary" href="<?php echo esc_url( $disconnect_url ); ?>">Disconnect</a>
+			<a class="button" href="<?php echo esc_url( $refresh_url ); ?>">Refresh</a>
+		</div>
 	</div>
 </div>