diff --git a/generate_translations.mjs b/generate_translations.mjs
index 2e2278d..7268c8f 100644
--- a/generate_translations.mjs
+++ b/generate_translations.mjs
@@ -1,11 +1,13 @@
 import fs from 'fs';
 import fetch from 'node-fetch';
 import path from 'path';
+import { exit } from 'process';
 
 const translationDir = "joinlemmy-translations/translations/";
 const outDir = "src/shared/translations/";
 const translatorsJsonFile = "lemmy-translations/translators.json";
 const statsFile = "lemmy-instance-stats/stats.json";
+const recommendationsFile = "lemmy-instance-stats/recommended-instances.csv";
 const newsDir = "src/assets/news";
 const releasesLocation = "https://raw.githubusercontent.com/LemmyNet/lemmy/main/RELEASES.md";
 
@@ -13,15 +15,32 @@ fs.mkdirSync(outDir, { recursive: true });
 
 // Write the stats file
 try {
-  const json = JSON.parse(fs.readFileSync(statsFile, "utf8"));
+  const stats = JSON.parse(fs.readFileSync(statsFile, "utf8"));
+  const recommended_domains = fs.readFileSync(recommendationsFile, "utf8").split(',');
+  const recommended = stats.instance_details.filter(i => 
+    recommended_domains.includes(i.domain)
+  );
+  const remaining = stats.instance_details.filter(i => 
+    !recommended_domains.includes(i.domain)
+  );
+
+  let stats2 = {
+    crawled_instances: stats.crawled_instances,
+    total_users: stats.total_users,
+    recommended: recommended,
+    remaining: remaining,
+  }
+
   let data = `export const instance_stats = \n `;
-  data += JSON.stringify(json, null, 2) + ";";
+  data += JSON.stringify(stats2, null, 2) + ";";
   const target = outDir + "instance_stats.ts";
   fs.writeFileSync(target, data);
 } catch (err) {
   console.error(err);
 }
 
+exit();
+
 // Write the news file
 try {
   let files = fs.readdirSync(newsDir);
diff --git a/lemmy-instance-stats b/lemmy-instance-stats
index 9d7a7f7..226c793 160000
--- a/lemmy-instance-stats
+++ b/lemmy-instance-stats
@@ -1 +1 @@
-Subproject commit 9d7a7f751aa43cbbf062244523d448b94a81e7ee
+Subproject commit 226c7930eca4fafb0aefc7121d9a15add7ea5d60
diff --git a/src/shared/components/instances.tsx b/src/shared/components/instances.tsx
index abd9c18..ea67483 100644
--- a/src/shared/components/instances.tsx
+++ b/src/shared/components/instances.tsx
@@ -11,6 +11,22 @@ export class Instances extends Component<any, any> {
     super(props, context);
   }
 
+  render() {
+    return (
+      <div class="container">
+        <Helmet title={title}>
+          <meta property={"title"} content={title} />
+        </Helmet>
+        <h1 class="is-marginless">{i18n.t("lemmy_servers")}</h1>
+        {this.header()}
+        <br />
+        <br />
+        {this.render_list("Recommended", instance_stats.recommended)}
+        {this.render_list("Popular", instance_stats.remaining)}
+      </div>
+    );
+  }
+
   header() {
     return (
       <i>
@@ -22,56 +38,45 @@ export class Instances extends Component<any, any> {
     );
   }
 
-  render() {
-    let instances = instance_stats.instance_details;
+  render_list(header: string, instances: any[]) {
     return (
       <div>
-        <Helmet title={title}>
-          <meta property={"title"} content={title} />
-        </Helmet>
-        <div class="container">
-          <h1 class="is-marginless">{i18n.t("lemmy_servers")}</h1>
-          {this.header()}
-          <br />
-          <br />
-          <p>{i18n.t("choose_and_join")}</p>
-
-          <div class="row">
-            {instances.map(i => (
-              <div class="card col-6">
-                <header>
-                  <div class="row">
-                    <h4 class="col">{i.domain}</h4>
-                    <h4 class="col text-right">
-                      <i>
-                        {numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
-                        {i18n.t("month")}
-                      </i>
-                    </h4>
-                  </div>
-                </header>
-                <div class="is-center">
-                  <img
-                    class="join-banner"
-                    src={i.icon || "/static/assets/images/lemmy.svg"}
-                  />
+        <h2>{header}</h2>
+        <div class="row">
+          {instances.map(i => (
+            <div class="card col-6">
+              <header>
+                <div class="row">
+                  <h4 class="col">{i.domain}</h4>
+                  <h4 class="col text-right">
+                    <i>
+                      {numToSI(i.users_active_month)} {i18n.t("users")} /{" "}
+                      {i18n.t("month")}
+                    </i>
+                  </h4>
                 </div>
-                <br />
-                <p class="join-desc">{i.description}</p>
-                <footer>
-                  {i.require_application ? (
-                    <a class="button primary" href={`https://${i.domain}`}>
-                      {i18n.t("apply_to_join")}
-                    </a>
-                  ) : (
-                    <a class="button primary" href={`https://${i.domain}`}>
-                      {i18n.t("join")}
-                    </a>
-                  )}
-                </footer>
+              </header>
+              <div class="is-center">
+                <img
+                  class="join-banner"
+                  src={i.icon || "/static/assets/images/lemmy.svg"}
+                />
               </div>
-            ))}
-          </div>
+              <br />
+              <p class="join-desc">{i.description}</p>
+              <footer>
+                {i.require_application ? (
+                  <a class="button primary" href={`https://${i.domain}`}>
+                    {i18n.t("apply_to_join")}
+                  </a>
+                ) : (
+                  <a class="button primary" href={`https://${i.domain}`}>
+                    {i18n.t("join")}
+                  </a>
+                )}
+              </footer>
+            </div>
+          ))}
         </div>
       </div>
     );