diff --git a/content/research/_index.md b/content/research/_index.md
index 324e0740afd4a6162ad8518432122f6cfa44740b..b1fad19dabb90af138698f566abfc11a92ee6c83 100644
--- a/content/research/_index.md
+++ b/content/research/_index.md
@@ -47,7 +47,7 @@ container: "container-fluid"
 
 {{< grid/section-container id="projects" class="row-gray padding-top-40 padding-bottom-40" isMarkdown="false" >}}
     <h2 class="text-center margin-bottom-40">The Eclipse Foundation is a Partner in these Projects</h2>
-    {{< eclipsefdn_projects is_static_source="true" types="projects" url="/research/projects/index.json" templateId="tpl-projects-item-research" display_view_more="false" >}}
+    <ul class="eclipsefdn-research-projects list-inline"></ul>
 {{</ grid/section-container >}}
 
 {{< pages/research/collaboration-section >}}
diff --git a/js/main.js b/js/main.js
index b2d6cf8de38ab5379018fae139dad8cf7ce5e558..308b62d67e149c494f26002afdb7cd11d8704a88 100644
--- a/js/main.js
+++ b/js/main.js
@@ -15,10 +15,13 @@
 import 'eclipsefdn-solstice-assets/js/astro';
 
 import './src/blogs-and-videos';
-import eclipsefdnFeaturedProjectCommitter from './src/featured-projects-committer';
 import './src/collaborations/eclipsefdn.rollover-link';
 import './src/collaborations/eclipsefdn.weighted-working-groups';
 import './src/eclipsefdn-promo-content'
 import './src/research/projects-section';
 
+import eclipsefdnFeaturedProjectCommitter from './src/featured-projects-committer';
+import eclipsefdnResearchProjects from './src/research/research-projects';
+
 eclipsefdnFeaturedProjectCommitter.render();
+eclipsefdnResearchProjects.render();
diff --git a/js/src/research/research-projects.js b/js/src/research/research-projects.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b71801de988575aeb595bbfd7356571a8b3bbbf
--- /dev/null
+++ b/js/src/research/research-projects.js
@@ -0,0 +1,39 @@
+import renderTemplate from 'eclipsefdn-solstice-assets/js/solstice/templates/render-template';
+import defaultTemplate from '../templates/research/tpl-projects-item-research.mustache';
+import { transformSnakeToCamel } from 'eclipsefdn-solstice-assets/js/api/utils';
+
+/** Fetches research projects */
+const getResearchProjects = async () => {
+  try {
+    const response = await fetch('/research/projects/index.json');
+    const data = await response.json();
+    const researchProjects = data.map(transformSnakeToCamel);
+
+    return [researchProjects, null];
+  } catch (error) {
+    return [null, error];
+  }
+};
+
+/** Renders the research projects widget */
+const render = async () => {
+  const element = document.querySelector('.eclipsefdn-research-projects');
+  if (!element) return;
+  
+  const [researchProjects, error] = await getResearchProjects();
+  
+  if (error) {
+    element.innerHTML = `<div class="alert alert-danger">Research projects could not be loaded.</div>`
+  }
+  
+  await renderTemplate({
+    element,
+    templates: { default: defaultTemplate },
+    templateId: 'default',
+    data: {
+      items: researchProjects,
+    },
+  });
+};
+
+export default { render };
diff --git a/js/src/templates/research/tpl-projects-item-research.mustache b/js/src/templates/research/tpl-projects-item-research.mustache
index adaf3e8748e9291d936e1723a1753dc9b44c24fc..64a403ed47cee59cf3d008ef7d7511a6cdbe1510 100644
--- a/js/src/templates/research/tpl-projects-item-research.mustache
+++ b/js/src/templates/research/tpl-projects-item-research.mustache
@@ -3,7 +3,7 @@
    <div class="featured-projects-item tpl-projects-research match-height-item-by-row" data-mh="m-header">
       <div class="featured-projects-item-category category labels">{{ name }}</div>
       <div class="featured-projects-item-content">
-         <a href="{{ website_url }}" class="link">
+         <a href="{{ websiteUrl }}" class="link">
           <img class="featured-projects-item-img img-responsive logo logo_alt" alt="{{ name }}" src="{{ logo }}" height="40">
         </a>
          <div class="featured-projects-item-text">
@@ -12,12 +12,12 @@
       </div>
       <div class="details">
          <div class="featured-projects-website-url">
-            <a href="{{ website_url }}">Read More</a>
+            <a href="{{ websiteUrl }}">Read More</a>
             <span class="featured-projects-website-url-bar"></span>
          </div>
-         {{#project_topic}}
-           <p>Main topic: <strong>{{ project_topic }}</strong></p>
-         {{/project_topic}}
+         {{#projectTopic}}
+           <p>Main topic: <strong>{{ projectTopic }}</strong></p>
+         {{/projectTopic}}
       </div>
    </div>
 </li>
diff --git a/package.json b/package.json
index 53a93ecbfd7a59cd77b0e1356a79fc5c04015b63..b32dbbd1d5b63634df683400446c7b969d97885b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "datatables.net-dt": "^1.13.1",
     "eclipsefdn-hugo-solstice-theme": "0.0.210",
+    "eclipsefdn-solstice-assets": "^0.0.260",
     "js-yaml": "^3.13.1",
     "json-minify": "^1.0.0"
   },
diff --git a/yarn.lock b/yarn.lock
index 743a89c20ee12d442d72d2ad6c3fefa9e6414427..879d67bbb288ab65bd606dbfdec0cf8e704b5157 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2673,7 +2673,7 @@ eclipsefdn-hugo-solstice-theme@0.0.210:
     json2yaml "^1.1.0"
     toml "^3.0.0"
 
-eclipsefdn-solstice-assets@0.0.260:
+eclipsefdn-solstice-assets@0.0.260, eclipsefdn-solstice-assets@^0.0.260:
   version "0.0.260"
   resolved "https://registry.yarnpkg.com/eclipsefdn-solstice-assets/-/eclipsefdn-solstice-assets-0.0.260.tgz#4916fd7e812584cbe1ec8080c3fc4d3949f4fa71"
   integrity sha512-eI5G8gUVa7Uz7ajCkjcfhAEa1yQwWGp6mWi8lMEiTONu1fIsZ5NLdN1aK+UQb5rbOfX3zESx2NOa/PgheCyZRw==