diff --git a/apps/home/static/home/js/tabs/subs.js b/apps/home/static/home/js/tabs/subs.js
index e6b9434..fa0460d 100644
--- a/apps/home/static/home/js/tabs/subs.js
+++ b/apps/home/static/home/js/tabs/subs.js
@@ -301,3 +301,30 @@ $(subTableId).on("click", ".js-openSubStyle", async event => {
     $("#stylesTab").click();
     await openDataModal(styleModalId, styleId, `/api/message-styles/${styleId}/`);
 });
+
+
+// region Sub Recommendations
+
+$(document).ready(async () => {
+    const response = await ajaxRequest("/api/subscription-recommendations/", "GET");
+    response.results.forEach(recommendation => {
+        const template = $($("#subscriptionRecommendationTemplate").html());
+
+        template.find(".js-title").text(recommendation.name);
+        template.find(".js-desc").text(recommendation.description);
+        template.find(".js-url").text(recommendation.url).attr("href", recommendation.url);
+
+        $(".js-subscription-recommendations-group").append(template);
+    });
+});
+
+$(".js-subscription-recommendations-group").on("click", ".js-subRecBtn", async function() {
+    const name = $(this).find(".js-title").text();
+    const url = $(this).find(".js-url").text();
+
+    $("#subRecommendationModal").modal("hide");
+    await openDataModal(subModalId, -1);
+
+    $("#subName").val(name);
+    $("#subUrl").val(url);
+});
\ No newline at end of file
diff --git a/apps/home/templates/home/index.html b/apps/home/templates/home/index.html
index 3667f70..083ccc0 100644
--- a/apps/home/templates/home/index.html
+++ b/apps/home/templates/home/index.html
@@ -176,6 +176,17 @@
         <i class="dot-icon bg-warning "></i>
     </div>
 </script>
+<script id="subscriptionRecommendationTemplate" type="text/template">
+    <div class="col-lg-6">
+        <div class="bg-body-tertiary rounded-1 p-3 h-100 js-subRecBtn" role="button">
+            <h6 class="js-title mb-3"></h6>
+            <p class="js-desc mb-3"></p>
+            <p class="mb-0">
+                <a class="js-url text-decoration-none"></a>
+            </p>
+        </div>
+    </div>
+</script>
 <script src="{% static 'js/api.js' %}"></script>
 <script src="{% static 'home/js/index.js' %}"></script>
 <script src="{% static 'home/js/modals.js' %}"></script>
diff --git a/apps/home/templates/home/modals/editSub.html b/apps/home/templates/home/modals/editSub.html
index 54ad967..2f0ef6a 100644
--- a/apps/home/templates/home/modals/editSub.html
+++ b/apps/home/templates/home/modals/editSub.html
@@ -65,8 +65,9 @@
                     </div>
                 </div>
                 <div class="modal-footer px-4 border-top-0">
-                    <button type="button" class="btn btn-outline-secondary rounded-1 me-auto ms-0 form-create">
-                        <i class="bi bi-dice-5"></i>
+                    <button type="button" class="btn btn-outline-secondary rounded-1 me-auto ms-0 form-create" data-bs-toggle="modal" data-bs-target="#subRecommendationModal">
+                        <i class="bi bi-lightbulb"></i>
+                        <span class="ms-2 d-none d-sm-inline">Recommend</span>
                     </button>
                     <button type="button" class="btn btn-danger rounded-1 me-3 ms-0 modal-del-btn form-edit">
                         <i class="bi bi-trash3"></i>
@@ -87,6 +88,28 @@
     </div>
 </div>
 
+<div id="subRecommendationModal" class="modal modal-lg fade" data-bs-backdrop="static" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content rounded-1">
+            <div class="modal-header border-bottom-0">
+                <h5 class="modal-title ms-2">
+                    <span>Subscription Recommendations</span>
+                </h5>
+            </div>
+            <div class="modal-body p-4">
+                <div class="container-fluid">
+                    <div class="row g-4 js-subscription-recommendations-group"></div>
+                </div>
+            </div>
+            <div class="modal-footer px-4 border-top-0">
+                <button type="button" class="btn btn-secondary rounded-1 me-0 px-4" data-bs-toggle="modal" data-bs-target="#subFormModal">
+                    <i class="bi bi-arrow-return-right"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div id="subContentModal" class="modal modal-lg fade" data-bs-backdrop="static" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content rounded-1">