diff --git a/chrome/browser/resources/BUILD.gn b/chrome/browser/resources/BUILD.gn
index 07f48f48b6496d..11c7cc0bb84eae 100644
--- a/chrome/browser/resources/BUILD.gn
+++ b/chrome/browser/resources/BUILD.gn
@@ -244,6 +244,7 @@ group("dev_ui_resources") {
     "//components/policy/resources/webui:resources",
     "//components/resources:dev_ui_components_resources",
     "//components/sync/service/resources",
+    "//components/ukm/debug:resources",
     "//content/browser/resources/gpu:resources",
     "//content/browser/resources/media:resources",
     "//content/browser/resources/net:resources",
@@ -299,6 +300,7 @@ repack("dev_ui_paks") {
     "$root_gen_dir/components/optimization_guide_internals_resources.pak",
     "$root_gen_dir/components/policy_resources.pak",
     "$root_gen_dir/components/sync_service_sync_internals_resources.pak",
+    "$root_gen_dir/components/ukm_resources.pak",
     "$root_gen_dir/content/browser/resources/media/media_internals_resources.pak",
     "$root_gen_dir/content/browser/webrtc/resources/webrtc_internals_resources.pak",
     "$root_gen_dir/content/gpu_resources.pak",
diff --git a/components/ukm/BUILD.gn b/components/ukm/BUILD.gn
index 2f40b6eaea83a6..a08021ec458ffe 100644
--- a/components/ukm/BUILD.gn
+++ b/components/ukm/BUILD.gn
@@ -62,6 +62,7 @@ static_library("ukm") {
 
   public_deps = [
     ":ukm_recorder",
+    "//components/ukm/debug:resources",
     "//services/metrics/public/cpp:metrics_cpp",
     "//services/metrics/public/cpp:ukm_builders",
     "//services/metrics/public/mojom",
diff --git a/components/ukm/debug/BUILD.gn b/components/ukm/debug/BUILD.gn
index f9ff67cd940ed7..a180dfbc0be6dc 100644
--- a/components/ukm/debug/BUILD.gn
+++ b/components/ukm/debug/BUILD.gn
@@ -2,8 +2,7 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
-import("//tools/grit/preprocess_if_expr.gni")
-import("//tools/typescript/ts_library.gni")
+import("//ui/webui/resources/tools/build_webui.gni")
 
 source_set("util") {
   sources = [
@@ -17,16 +16,17 @@ source_set("util") {
   ]
 }
 
-preprocess_if_expr("preprocess") {
-  in_folder = "."
-  out_folder = target_gen_dir
-  in_files = [ "ukm_internals.ts" ]
-}
+build_webui("build") {
+  grd_prefix = "ukm"
+
+  static_files = [
+    "ukm_internals.css",
+    "ukm_internals.html",
+  ]
+
+  non_web_component_files = [ "ukm_internals.ts" ]
+
+  ts_deps = [ "//ui/webui/resources/js:build_ts" ]
 
-ts_library("build_ts") {
-  root_dir = target_gen_dir
-  out_dir = "$target_gen_dir/tsc"
-  in_files = [ "ukm_internals.ts" ]
-  deps = [ "//ui/webui/resources/js:build_ts" ]
-  extra_deps = [ ":preprocess" ]
+  grit_output_dir = "$root_gen_dir/components"
 }
diff --git a/content/BUILD.gn b/content/BUILD.gn
index 5123b9eb517844..a66a47d083c1e2 100644
--- a/content/BUILD.gn
+++ b/content/BUILD.gn
@@ -94,10 +94,9 @@ grit("content_resources") {
     "grit/content_resources_map.h",
     "content_resources.pak",
   ]
-  deps = [ "//components/ukm/debug:build_ts" ]
 
   if (is_chromeos_ash) {
-    deps += [
+    deps = [
       "//mojo/public/mojom/base:base_js__generator",
       "//ui/base/mojom:mojom_js__generator",
       "//url/mojom:url_mojom_gurl_js__generator",
diff --git a/content/browser/DEPS b/content/browser/DEPS
index 1711caa8c444b2..55bc8da3c8a899 100644
--- a/content/browser/DEPS
+++ b/content/browser/DEPS
@@ -12,6 +12,7 @@ include_rules = [
   "+components/download/public/common",
   "+components/file_access",
   "+components/filename_generation",
+  "+components/grit",
   "+components/permissions/features.h",
   "+components/power_monitor",
   "+components/services/font",
diff --git a/content/browser/ukm_internals_ui.cc b/content/browser/ukm_internals_ui.cc
index 2e181db324ac5f..6f34203d57f4d7 100644
--- a/content/browser/ukm_internals_ui.cc
+++ b/content/browser/ukm_internals_ui.cc
@@ -12,9 +12,10 @@
 
 #include "base/functional/bind.h"
 #include "base/memory/raw_ptr.h"
+#include "components/grit/ukm_resources.h"
+#include "components/grit/ukm_resources_map.h"
 #include "components/ukm/debug/ukm_debug_data_extractor.h"
 #include "components/ukm/ukm_service.h"
-#include "content/grit/content_resources.h"
 #include "content/public/browser/browser_thread.h"
 #include "content/public/browser/content_browser_client.h"
 #include "content/public/browser/web_contents.h"
@@ -31,9 +32,8 @@ void CreateAndAddUkmHTMLSource(BrowserContext* browser_context) {
   WebUIDataSource* source =
       WebUIDataSource::CreateAndAdd(browser_context, kChromeUIUkmHost);
 
-  source->AddResourcePath("ukm_internals.js", IDR_UKM_INTERNALS_JS);
-  source->AddResourcePath("ukm_internals.css", IDR_UKM_INTERNALS_CSS);
-  source->SetDefaultResource(IDR_UKM_INTERNALS_HTML);
+  source->AddResourcePaths(base::make_span(kUkmResources, kUkmResourcesSize));
+  source->SetDefaultResource(IDR_UKM_UKM_INTERNALS_HTML);
 }
 
 // This class receives javascript messages from the renderer.
diff --git a/content/content_resources.grd b/content/content_resources.grd
index 90e309e21248ad..7fbd66acbfa81d 100644
--- a/content/content_resources.grd
+++ b/content/content_resources.grd
@@ -25,9 +25,6 @@ Other resources that belong in this file:
       <include name="IDR_DEVTOOLS_PINCH_CURSOR_ICON_2X" file="browser/resources/devtools/devtools_pinch_cursor_2x.png" type="BINDATA" />
       <include name="IDR_DEVTOOLS_TOUCH_CURSOR_ICON" file="browser/resources/devtools/devtools_touch_cursor.png" type="BINDATA" />
       <include name="IDR_DEVTOOLS_TOUCH_CURSOR_ICON_2X" file="browser/resources/devtools/devtools_touch_cursor_2x.png" type="BINDATA" />
-      <include name="IDR_UKM_INTERNALS_HTML" file="../components/ukm/debug/ukm_internals.html" type="BINDATA" />
-      <include name="IDR_UKM_INTERNALS_JS" file="${root_gen_dir}/components/ukm/debug/tsc/ukm_internals.js" use_base_dir="false" resource_path="ukm_internals.js" type="BINDATA" />
-      <include name="IDR_UKM_INTERNALS_CSS" file="../components/ukm/debug/ukm_internals.css" type="BINDATA" />
       <if expr="chromeos_ash">
         <include name="IDR_UNGUESSABLE_TOKEN_MOJO_JS" file="${root_gen_dir}/mojo/public/mojom/base/unguessable_token.mojom-lite.js" resource_path="mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_URL_MOJO_JS" file="${root_gen_dir}/url/mojom/url.mojom-lite.js" resource_path="mojo/url/mojom/url.mojom-lite.js" use_base_dir="false" type="BINDATA" />
diff --git a/content/shell/BUILD.gn b/content/shell/BUILD.gn
index 5b6efec0248c51..5cc4261f375024 100644
--- a/content/shell/BUILD.gn
+++ b/content/shell/BUILD.gn
@@ -487,6 +487,7 @@ repack("pak") {
 
   sources = [
     "$root_gen_dir/base/tracing/protos/tracing_proto_resources.pak",
+    "$root_gen_dir/components/ukm_resources.pak",
     "$root_gen_dir/content/attribution_internals_resources.pak",
     "$root_gen_dir/content/browser/resources/media/media_internals_resources.pak",
     "$root_gen_dir/content/browser/webrtc/resources/webrtc_internals_resources.pak",
@@ -517,6 +518,7 @@ repack("pak") {
   deps = [
     ":resources",
     "//base/tracing/protos:chrome_track_event_resources",
+    "//components/ukm/debug:resources",
     "//content:content_resources",
     "//content/browser/resources:resources",
     "//content/browser/resources/media:resources",
diff --git a/ios/chrome/app/resources/BUILD.gn b/ios/chrome/app/resources/BUILD.gn
index a4f1c1e553e145..4324102a550230 100644
--- a/ios/chrome/app/resources/BUILD.gn
+++ b/ios/chrome/app/resources/BUILD.gn
@@ -30,8 +30,6 @@ grit("ios_resources") {
     "grit/ios_resources.h",
     "ios_resources.pak",
   ]
-
-  deps = [ "//components/ukm/debug:build_ts" ]
 }
 
 group("packed_resources") {
@@ -68,6 +66,7 @@ repack("repack_unscaled_resources") {
     "$root_gen_dir/components/optimization_guide_internals_resources.pak",
     "$root_gen_dir/components/policy_resources.pak",
     "$root_gen_dir/components/sync_service_sync_internals_resources.pak",
+    "$root_gen_dir/components/ukm_resources.pak",
     "$root_gen_dir/components/version_ui_resources.pak",
     "$root_gen_dir/ios/chrome/ios_resources.pak",
     "$root_gen_dir/ios/web/ios_web_resources.pak",
@@ -83,6 +82,7 @@ repack("repack_unscaled_resources") {
     "//components/policy/resources/webui:resources",
     "//components/resources",
     "//components/sync/service/resources",
+    "//components/ukm/debug:resources",
     "//ios/web:resources",
     "//mojo/public/js:resources",
     "//net:net_resources",
diff --git a/ios/chrome/app/resources/ios_resources.grd b/ios/chrome/app/resources/ios_resources.grd
index 91624f44f56bc7..347a6583dc2853 100644
--- a/ios/chrome/app/resources/ios_resources.grd
+++ b/ios/chrome/app/resources/ios_resources.grd
@@ -12,8 +12,6 @@
       <include name="IDR_IOS_INSPECT_JS" file="inspect/inspect.js" type="BINDATA" />
       <include name="IDR_IOS_OMAHA_HTML" file="omaha/omaha.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
       <include name="IDR_IOS_OMAHA_JS" file="omaha/omaha.js" type="BINDATA" />
-      <include name="IDR_IOS_UKM_INTERNALS_HTML" file="../../../../components/ukm/debug/ukm_internals.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
-      <include name="IDR_IOS_UKM_INTERNALS_JS" file="${root_gen_dir}/components/ukm/debug/tsc/ukm_internals.js" use_base_dir="false" type="BINDATA" />
       <include name="IDR_IOS_TRANSLATE_INTERNALS_CSS" file="../../../../components/translate/translate_internals/translate_internals.css" type="BINDATA" />
       <include name="IDR_IOS_TRANSLATE_INTERNALS_HTML" file="../../../../components/translate/translate_internals/translate_internals.html" type="BINDATA" />
       <include name="IDR_IOS_TRANSLATE_INTERNALS_JS" file="../../../../components/translate/translate_internals/translate_internals.js" preprocess="true" type="BINDATA" />
diff --git a/ios/chrome/browser/ui/webui/ukm_internals_ui.mm b/ios/chrome/browser/ui/webui/ukm_internals_ui.mm
index a2226ce394a638..10b738f5c64ee0 100644
--- a/ios/chrome/browser/ui/webui/ukm_internals_ui.mm
+++ b/ios/chrome/browser/ui/webui/ukm_internals_ui.mm
@@ -6,13 +6,14 @@
 
 #import "base/functional/bind.h"
 #import "base/memory/ref_counted_memory.h"
+#import "components/grit/ukm_resources.h"
+#import "components/grit/ukm_resources_map.h"
 #import "components/metrics_services_manager/metrics_services_manager.h"
 #import "components/ukm/debug/ukm_debug_data_extractor.h"
 #import "components/ukm/ukm_service.h"
 #import "ios/chrome/browser/shared/model/application_context/application_context.h"
 #import "ios/chrome/browser/shared/model/browser_state/chrome_browser_state.h"
 #import "ios/chrome/browser/shared/model/url/chrome_url_constants.h"
-#import "ios/chrome/grit/ios_resources.h"
 #import "ios/web/public/webui/url_data_source_ios.h"
 #import "ios/web/public/webui/web_ui_ios.h"
 #import "ios/web/public/webui/web_ui_ios_data_source.h"
@@ -24,8 +25,8 @@
   web::WebUIIOSDataSource* source =
       web::WebUIIOSDataSource::Create(kChromeUIURLKeyedMetricsHost);
 
-  source->AddResourcePath("ukm_internals.js", IDR_IOS_UKM_INTERNALS_JS);
-  source->SetDefaultResource(IDR_IOS_UKM_INTERNALS_HTML);
+  source->AddResourcePaths(base::make_span(kUkmResources, kUkmResourcesSize));
+  source->SetDefaultResource(IDR_UKM_UKM_INTERNALS_HTML);
   return source;
 }
 
diff --git a/tools/gritsettings/resource_ids.spec b/tools/gritsettings/resource_ids.spec
index 4231e77e2302b5..e54327cd4748ef 100644
--- a/tools/gritsettings/resource_ids.spec
+++ b/tools/gritsettings/resource_ids.spec
@@ -542,6 +542,10 @@
     "META": {"sizes": {"includes": [10]}},
     "includes": [4500],
   },
+  "<(SHARED_INTERMEDIATE_DIR)/components/ukm/debug/resources.grd": {
+    "META": {"sizes": {"includes": [5]}},
+    "includes": [4510],
+  },
   "<(SHARED_INTERMEDIATE_DIR)/chrome/browser/resources/app_home/resources.grd": {
     "META": {"sizes": {"includes": [20]}},
     "includes": [4520],