diff --git a/app/controllers/clusters/metrics_controller.rb b/app/controllers/clusters/metrics_controller.rb
index ffda8282..c6075afb 100644
--- a/app/controllers/clusters/metrics_controller.rb
+++ b/app/controllers/clusters/metrics_controller.rb
@@ -4,7 +4,6 @@ class Clusters::MetricsController < Clusters::BaseController
   before_action :set_cluster
 
   def show
-    @nodes = K8::Metrics::Api::Node.ls(@cluster)
     @time_range = params[:time_range] || "2h"
     start_time = parse_time_range(@time_range)
     end_time = Time.now
diff --git a/app/view_models/async/clusters/metrics/show_view_model.rb b/app/view_models/async/clusters/metrics/show_view_model.rb
new file mode 100644
index 00000000..c1e985a6
--- /dev/null
+++ b/app/view_models/async/clusters/metrics/show_view_model.rb
@@ -0,0 +1,21 @@
+class Async::Clusters::Metrics::ShowViewModel < Async::BaseViewModel
+  include MetricsHelper
+  include StorageHelper
+
+  expects :cluster_id
+
+  def cluster
+    @cluster ||= current_user.clusters.find(params[:cluster_id])
+  end
+
+  def initial_render
+    render "shared/components/table_skeleton", locals: { columns: 5 }
+  end
+
+  def async_render
+    nodes = K8::Metrics::Api::Node.ls(cluster)
+    render "clusters/metrics/live_metrics", locals: {
+      nodes: nodes
+    }
+  end
+end
diff --git a/app/views/add_ons/metrics/show.html.erb b/app/views/add_ons/metrics/show.html.erb
index d827a91a..661d033c 100644
--- a/app/views/add_ons/metrics/show.html.erb
+++ b/app/views/add_ons/metrics/show.html.erb
@@ -1,5 +1,5 @@
 <%= add_on_layout(@add_on) do %>
-  <%= turbo_frame_tag "metrics", data: { controller: "refresh-turbo-frame", "refresh-turbo-frame-frequency-value": 5000 } do %>
+  <%= turbo_frame_tag "metrics", data: { controller: "refresh-turbo-frame", "refresh-turbo-frame-frequency-value": 30000 } do %>
     <%= render(
       "shared/partials/async_renderer",
       view_model: Async::AddOns::Metrics::ShowViewModel.new(
diff --git a/app/views/clusters/metrics/_live_metrics.html.erb b/app/views/clusters/metrics/_live_metrics.html.erb
index 4a8de76d..7f8a8513 100644
--- a/app/views/clusters/metrics/_live_metrics.html.erb
+++ b/app/views/clusters/metrics/_live_metrics.html.erb
@@ -33,7 +33,7 @@
         </tr>
       </thead>
       <tbody>
-        <% @nodes.each do |node| %>
+        <% nodes.each do |node| %>
         <tr class="cursor-pointer hover:bg-base-200/40">
           <td>
             <div class="flex items-center space-x-3 truncate">
@@ -86,7 +86,7 @@
         </tr>
       </thead>
       <tbody>
-        <% @nodes.each do |node| %>
+        <% nodes.each do |node| %>
           <% node.namespaces.each do |namespace, pods| %>
             <% pods.each do |pod| %>
               <tr class="cursor-pointer hover:bg-base-200/40">
diff --git a/app/views/clusters/metrics/show.html.erb b/app/views/clusters/metrics/show.html.erb
index 8a40ebbc..7ce779fe 100644
--- a/app/views/clusters/metrics/show.html.erb
+++ b/app/views/clusters/metrics/show.html.erb
@@ -1,6 +1,12 @@
 <%= cluster_layout(@cluster) do %>
-  <%= turbo_frame_tag "metrics", data: { controller: "refresh-turbo-frame", "refresh-turbo-frame-frequency-value": 5000 } do %>
-    <%= render "clusters/metrics/live_metrics" %>
+  <%= turbo_frame_tag "metrics", data: { controller: "refresh-turbo-frame", "refresh-turbo-frame-frequency-value": 30000 } do %>
+    <%= render(
+      "shared/partials/async_renderer",
+      view_model: Async::Clusters::Metrics::ShowViewModel.new(
+        current_user,
+        cluster_id: @cluster.id
+      )
+    ) %>
   <% end %>
 
   <%= turbo_frame_tag "charts" do %>
diff --git a/app/views/projects/metrics/index.html.erb b/app/views/projects/metrics/index.html.erb
index cf4c8a79..ff90860b 100644
--- a/app/views/projects/metrics/index.html.erb
+++ b/app/views/projects/metrics/index.html.erb
@@ -1,7 +1,7 @@
 <%= content_for :title, t("scaffold.edit.title", model: "Project") %>
 
 <%= project_layout(@project) do %>
-  <%= turbo_frame_tag "metrics", data: { controller: "refresh-turbo-frame", "refresh-turbo-frame-frequency-value": 5000 } do %>
+  <%= turbo_frame_tag "metrics", data: { controller: "refresh-turbo-frame", "refresh-turbo-frame-frequency-value": 30000 } do %>
     <%= render(
       "shared/partials/async_renderer",
       view_model: Async::Projects::Metrics::IndexViewModel.new(