diff --git a/website/content/docs/connect/observability/ui-visualization.mdx b/website/content/docs/connect/observability/ui-visualization.mdx
index e21631a48..2102846a0 100644
--- a/website/content/docs/connect/observability/ui-visualization.mdx
+++ b/website/content/docs/connect/observability/ui-visualization.mdx
@@ -27,7 +27,7 @@ URLs](#configuring-dashboard-urls).
 It is possible to configure the UI to fetch basic metrics from your metrics
 provider storage to augment the visualization as displayed below.
 
-![Consul UI Service Mesh Visualization](/img/ui-service-topology-view.png)
+![Consul UI Service Mesh Visualization](/img/ui-service-topology-view-hover.png)
 
 Consul has built-in support for overlaying metrics from a
 [Prometheus](https://prometheus.io) backend. Alternative metrics providers may
diff --git a/website/content/docs/k8s/connect/observability/metrics.mdx b/website/content/docs/k8s/connect/observability/metrics.mdx
index de4ae3e9e..349cd3f49 100644
--- a/website/content/docs/k8s/connect/observability/metrics.mdx
+++ b/website/content/docs/k8s/connect/observability/metrics.mdx
@@ -112,7 +112,7 @@ Consul’s built-in UI has a topology visualization for services part of the Con
 
 The diagram below illustrates how the UI displays service metrics for a sample application:
 
-[![UI Topology View](/img/ui-topology.png)](/img/ui-topology.png)
+![UI Topology View](/img/ui-service-topology-view-hover.png)
 
 The topology view is configured under `ui.metrics`. This will enable the Consul UI to query the provider specified by
 `ui.metrics.provider` at the URL of the Prometheus server `ui.metrics.baseURL` to display sidecar proxy metrics for the
diff --git a/website/content/docs/k8s/installation/multi-cluster/kubernetes.mdx b/website/content/docs/k8s/installation/multi-cluster/kubernetes.mdx
index acf96338a..c48166623 100644
--- a/website/content/docs/k8s/installation/multi-cluster/kubernetes.mdx
+++ b/website/content/docs/k8s/installation/multi-cluster/kubernetes.mdx
@@ -441,7 +441,7 @@ to retrieve the bootstrap token mentioned in the UI documentation.
 With the UI open, you'll be able to switch between datacenters via the dropdown
 in the top left:
 
-![Consul Datacenter Dropdown](/img/consul-datacenter-dropdown.png 'Consul Datacenter Dropdown')
+![Consul Datacenter Dropdown](/img/data-center-dropdown.png 'Consul Datacenter Dropdown')
 
 ## Next Steps
 
diff --git a/website/public/img/data-center-dropdown.png b/website/public/img/data-center-dropdown.png
new file mode 100644
index 000000000..794405cc0
--- /dev/null
+++ b/website/public/img/data-center-dropdown.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:05f2db83f1740578f5bef8a76bd5c7455bd51d7351e97bb41310a11e0b150e8d
+size 114160
diff --git a/website/public/img/ui-service-topology-view-hover.png b/website/public/img/ui-service-topology-view-hover.png
new file mode 100644
index 000000000..30ac20493
--- /dev/null
+++ b/website/public/img/ui-service-topology-view-hover.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:47f31c0ddd3b6e67fdce032d63acdd2b153351919349ef12e6b1c8afe5ef2b4c
+size 153498