diff --git a/WordPress/Classes/ViewRelated/Post/PrepublishingAutoSharingView.swift b/WordPress/Classes/ViewRelated/Post/PrepublishingAutoSharingView.swift
index b66d92eeb224..0e6152ca7c6b 100644
--- a/WordPress/Classes/ViewRelated/Post/PrepublishingAutoSharingView.swift
+++ b/WordPress/Classes/ViewRelated/Post/PrepublishingAutoSharingView.swift
@@ -2,47 +2,69 @@ import SwiftUI
 
 struct PrepublishingAutoSharingView: View {
 
-    // TODO: view model.
+    let model: PrepublishingAutoSharingViewModel
 
     var body: some View {
         HStack {
             textStack
             Spacer()
-            iconTrain
+            if model.connections.count > 0 {
+                socialIconsView
+            }
         }
     }
 
-    var textStack: some View {
-        VStack(alignment: .leading) {
-            Text(String(format: Strings.primaryLabelActiveConnectionsFormat, 3))
+    private var textStack: some View {
+        VStack(alignment: .leading, spacing: .zero) {
+            Text(String(format: Constants.primaryLabelActiveConnectionsFormat, 3))
                 .font(.body)
                 .foregroundColor(Color(.label))
-            Text(String(format: Strings.remainingSharesTextFormat, 27, 30))
-                .font(.subheadline)
-                .foregroundColor(Color(.secondaryLabel))
+            if let sharingLimit = model.sharingLimit {
+                remainingSharesView(sharingLimit: sharingLimit, showsWarning: model.showsWarning)
+            }
         }
     }
 
-    // TODO: This will be implemented separately.
-    var iconTrain: some View {
-        HStack {
-            if let uiImage = UIImage(named: "icon-tumblr") {
-                Image(uiImage: uiImage)
+    private func remainingSharesView(sharingLimit: PublicizeInfo.SharingLimit, showsWarning: Bool) -> some View {
+        HStack(spacing: 4.0) {
+            if showsWarning {
+                Image("icon-warning")
                     .resizable()
-                    .frame(width: 32.0, height: 32.0)
-                    .background(Color(UIColor.listForeground))
-                    .clipShape(Circle())
-                    .overlay(Circle().stroke(Color(UIColor.listForeground), lineWidth: 2.0))
+                    .frame(width: 16.0, height: 16.0)
+                    .padding(4.0)
+            }
+            Text(String(format: Constants.remainingSharesTextFormat, sharingLimit.remaining, sharingLimit.limit))
+                .font(.subheadline)
+                .foregroundColor(Color(showsWarning ? Constants.warningColor : .secondaryLabel))
+        }
+    }
+
+    private var socialIconsView: some View {
+        HStack(spacing: -2.0) {
+            ForEach(model.connections, id: \.self) { connection in
+                iconImage(connection.serviceName.localIconImage, opaque: connection.enabled)
             }
         }
     }
+
+    private func iconImage(_ uiImage: UIImage, opaque: Bool) -> some View {
+        Image(uiImage: uiImage)
+            .resizable()
+            .frame(width: 28.0, height: 28.0)
+            .opacity(opaque ? 1.0 : Constants.disabledSocialIconOpacity)
+            .background(Color(.listForeground))
+            .clipShape(Circle())
+    }
 }
 
-// MARK: - Helpers
+// MARK: - View Helpers
 
 private extension PrepublishingAutoSharingView {
 
-    enum Strings {
+    enum Constants {
+        static let disabledSocialIconOpacity: CGFloat = 0.36
+        static let warningColor = UIColor.muriel(color: MurielColor(name: .yellow, shade: .shade50))
+
         static let primaryLabelActiveConnectionsFormat = NSLocalizedString(
             "prepublishing.social.text.activeConnections",
             value: "Sharing to %1$d accounts",
@@ -68,5 +90,35 @@ private extension PrepublishingAutoSharingView {
                 """
         )
     }
+}
+
+// MARK: - View Model
+
+/// The value-type data model that drives the `PrepublishingAutoSharingView`.
+struct PrepublishingAutoSharingViewModel {
+
+    struct Connection: Hashable {
+        let serviceName: PublicizeService.ServiceName
+        let account: String
+        let enabled: Bool
+    }
+
+    // TODO: Default values are for temporary testing purposes. Will be removed later.
+    let connections: [Connection] = [.init(serviceName: .facebook, account: "foo", enabled: true),
+                                     .init(serviceName: .twitter, account: "bar", enabled: false),
+                                     .init(serviceName: .tumblr, account: "baz", enabled: true)]
 
+    // TODO: Default values are for temporary testing purposes. Will be removed later.
+    let sharingLimit: PublicizeInfo.SharingLimit? = .init(remaining: 1, limit: 30)
+
+    var enabledConnectionsCount: Int {
+        connections.filter({ $0.enabled }).count
+    }
+
+    var showsWarning: Bool {
+        guard let remaining = sharingLimit?.remaining else {
+            return false
+        }
+        return enabledConnectionsCount > remaining
+    }
 }
diff --git a/WordPress/Classes/ViewRelated/Post/PrepublishingViewController+JetpackSocial.swift b/WordPress/Classes/ViewRelated/Post/PrepublishingViewController+JetpackSocial.swift
index aaabc472a3fe..54252bf3cac5 100644
--- a/WordPress/Classes/ViewRelated/Post/PrepublishingViewController+JetpackSocial.swift
+++ b/WordPress/Classes/ViewRelated/Post/PrepublishingViewController+JetpackSocial.swift
@@ -15,7 +15,7 @@ extension PrepublishingViewController {
         // TODO:
         // - Show the NoConnectionView if user has 0 connections.
         // - Properly create and configure the view models.
-        let autoSharingView = UIView.embedSwiftUIView(PrepublishingAutoSharingView())
+        let autoSharingView = UIView.embedSwiftUIView(PrepublishingAutoSharingView(model: .init()))
         cell.contentView.addSubview(autoSharingView)
 
         // Pin constraints to the cell's layoutMarginsGuide so that the content is properly aligned.