diff --git a/CHANGELOG-update-hra.md b/CHANGELOG-update-hra.md
new file mode 100644
index 0000000000..7aca3b99a8
--- /dev/null
+++ b/CHANGELOG-update-hra.md
@@ -0,0 +1 @@
+- Updated HRA EUI and organ-info web components to latest version
diff --git a/context/app/static/js/pages/Iframe/Iframe.jsx b/context/app/static/js/pages/Iframe/Iframe.jsx
index 9702624d2c..adca7583bc 100644
--- a/context/app/static/js/pages/Iframe/Iframe.jsx
+++ b/context/app/static/js/pages/Iframe/Iframe.jsx
@@ -19,8 +19,7 @@ function Switch({ organs_count }) {
       return (
         <ccf-organ-info
           organ-iri={iri}
-          use-remote-api="true"
-          remote-api-endpoint="https://apps.humanatlas.io/hubmap-hra-api/v1"
+          data-sources='["https://apps.humanatlas.io/api/ds-graph/hubmap?token="]'
         />
       );
     default:
diff --git a/context/app/templates/special-pages/ccf-eui.html b/context/app/templates/special-pages/ccf-eui.html
index 517f896d3b..64f10444d1 100644
--- a/context/app/templates/special-pages/ccf-eui.html
+++ b/context/app/templates/special-pages/ccf-eui.html
@@ -1,23 +1,24 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <title>HuBMAP CCF Exploration User Interface (CCF-EUI)</title>
-  <base href="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
-  <link rel="stylesheet" href="styles.css">
+  <meta charset="utf-8" />
+  <title>HuBMAP HRA Exploration User Interface</title>
+  <base href="https://cdn.humanatlas.io/ui/ccf-eui/" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/png" href="/favicon.png" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
+  <link href="styles.css" rel="stylesheet" />
   <script src="wc.js" async></script>
 </head>
 
-<body class="mat-typography">
+<body>
   <ccf-eui
-    hubmap-token="{{ groups_token }}"
-    use-remote-api="true"
-    remote-api-endpoint="https://apps.humanatlas.io/hubmap-hra-api/v1"
+    logo-tooltip="HuBMAP Data Portal"
+    home-url="https://portal.hubmapconsortium.org/"
+    data-sources='["https://apps.humanatlas.io/api/ds-graph/hubmap?token={{ groups_token }}"]'
+    theme="hubmap"
   ></ccf-eui>
 </body>
 
diff --git a/context/app/templates/special-pages/organ.html b/context/app/templates/special-pages/organ.html
index 2f04789196..32970e8543 100644
--- a/context/app/templates/special-pages/organ.html
+++ b/context/app/templates/special-pages/organ.html
@@ -1,6 +1,7 @@
 {% extends 'base-pages/react-content.html' %}
 {% block extra_stylesheets %}
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/organ-info/styles.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/organ-info/wc.js" async></script>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
+<link href="https://cdn.humanatlas.io/ui/ccf-organ-info/styles.css" rel="stylesheet">
+<script src="https://cdn.humanatlas.io/ui/ccf-organ-info/wc.js" async></script>
 {% endblock %}
\ No newline at end of file
