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/components/HRA/CCFOrganInfo.tsx b/context/app/static/js/components/HRA/CCFOrganInfo.tsx
index 8449a2dd1c..40ae0fe4c6 100644
--- a/context/app/static/js/components/HRA/CCFOrganInfo.tsx
+++ b/context/app/static/js/components/HRA/CCFOrganInfo.tsx
@@ -8,8 +8,7 @@ import { HRAEvent } from './types';
 
 interface CCFOrganInfoProps {
   uberonIri: string;
-  remoteApiEndpoint?: string;
-  remoteApi?: string;
+  dataSources?: string;
   onNodeClick?: (event: HRAEvent) => void;
   onSexChange?: (event: HRAEvent) => void;
   onSideChange?: (event: HRAEvent) => void;
@@ -17,17 +16,16 @@ interface CCFOrganInfoProps {
 
 interface RawOrganProps {
   'organ-iri': string;
-  'remote-api-endpoint': string;
-  'use-remote-api': string;
+  'data-sources': string;
   nodeClick?: (event: HRAEvent) => void;
   sexChange?: (event: HRAEvent) => void;
   sideChange?: (event: HRAEvent) => void;
 }
 
-const defaultRemoteApiEndpoint = 'https://apps.humanatlas.io/hubmap-hra-api/v1';
+const defaultDataSources = '["https://apps.humanatlas.io/api/ds-graph/hubmap?token="]';
 
-const HRAOrganScript = 'https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/organ-info/wc.js';
-const HRAOrganStyles = 'https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/organ-info/styles.css';
+const HRAOrganScript = 'https://cdn.humanatlas.io/ui/ccf-organ-info/wc.js';
+const HRAOrganStyles = 'https://cdn.humanatlas.io/ui/ccf-organ-info/styles.css';
 
 const OrganInfo = reactifyWc('ccf-organ-info', {
   forceEvent: ['nodeClick', 'sexChange', 'sideChange'],
@@ -35,8 +33,7 @@ const OrganInfo = reactifyWc('ccf-organ-info', {
 
 function CCFOrganInfo({
   uberonIri,
-  remoteApiEndpoint = defaultRemoteApiEndpoint,
-  remoteApi = 'true',
+  dataSources = defaultDataSources,
   onNodeClick,
   onSexChange,
   onSideChange,
@@ -47,8 +44,7 @@ function CCFOrganInfo({
   return (
     <OrganInfo
       organ-iri={uberonIri}
-      use-remote-api={remoteApi}
-      remote-api-endpoint={remoteApiEndpoint}
+      data-sources={dataSources}
       nodeClick={onNodeClick}
       sexChange={onSexChange}
       sideChange={onSideChange}
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..b81770ea5d 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/">
+  <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/x-icon" href="favicon.ico">
+  <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 rel="stylesheet" href="styles.css">
+  <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
