diff --git a/assets/js/web-components/prpl-popover-post-content.js b/assets/js/web-components/prpl-popover-post-content.js
new file mode 100644
index 000000000..83bdb8d86
--- /dev/null
+++ b/assets/js/web-components/prpl-popover-post-content.js
@@ -0,0 +1,50 @@
+/* global customElements, HTMLElement */
+
+/**
+ * Register the custom web component.
+ */
+customElements.define(
+	'prpl-popover-post-content',
+	class extends HTMLElement {
+		constructor( postId = '', buttonContent = '' ) {
+			// Get parent class properties
+			super();
+
+			this.postId = postId;
+			this.buttonContent = buttonContent;
+
+			if ( ! this.postId && this.hasAttribute( 'post-id' ) ) {
+				this.postId = this.getAttribute( 'post-id' );
+			}
+
+			if ( ! this.postId ) {
+				return;
+			}
+
+			if ( ! this.buttonContent ) {
+				this.buttonContent = this.getAttribute( 'button-content' );
+			}
+
+			// Get the JSON response from https://progressplanner.com/wp-json/wp/v2/posts/{postId}
+			fetch(
+				`https://progressplanner.com/wp-json/wp/v2/posts/${ this.postId }`
+			)
+				.then( ( response ) => response.json() )
+				.then( ( data ) => {
+					if ( ! data.content.rendered || ! data.title.rendered ) {
+						return;
+					}
+
+					this.innerHTML = `
+						<button type="button" popovertarget="prpl-popover-post-content-${ this.postId }">
+							${ this.buttonContent }
+						</button>
+						<div id="prpl-popover-post-content-${ this.postId }" popover style="max-width:80vw; max-height:80vh; overflow-y: auto; overflow-x: hidden;">
+							<h1>${ data.title.rendered }</h1>
+							${ data.content.rendered }
+						</div>
+					`;
+				} );
+		}
+	}
+);
diff --git a/classes/admin/class-page.php b/classes/admin/class-page.php
index 5c6495258..d45a3fc93 100644
--- a/classes/admin/class-page.php
+++ b/classes/admin/class-page.php
@@ -136,6 +136,7 @@ public function enqueue_scripts() {
 				\wp_enqueue_script( 'progress-planner-web-components-prpl-chart-bar' );
 				\wp_enqueue_script( 'progress-planner-web-components-prpl-chart-line' );
 				\wp_enqueue_script( 'progress-planner-web-components-prpl-big-counter' );
+				\wp_enqueue_script( 'progress-planner-web-components-prpl-popover-post-content' );
 				\wp_enqueue_script( 'progress-planner-header-filters' );
 				\wp_enqueue_script( 'progress-planner-settings' );
 				\wp_enqueue_script( 'progress-planner-grid-masonry' );
diff --git a/views/page-widgets/suggested-tasks.php b/views/page-widgets/suggested-tasks.php
index ef7ac0f76..3eb6ff606 100644
--- a/views/page-widgets/suggested-tasks.php
+++ b/views/page-widgets/suggested-tasks.php
@@ -108,3 +108,4 @@ class="prpl-info-icon"
 	\progress_planner()->get_popover()->the_popover( 'monthly-badges' )->render();
 	?>
 </div>
+<prpl-popover-post-content post-id="3771" button-content="Read more"></prpl-popover-post-content>