diff --git a/app/models/frame.rb b/app/models/frame.rb
index 72dac7304..972fd4b6b 100644
--- a/app/models/frame.rb
+++ b/app/models/frame.rb
@@ -12,8 +12,20 @@ class Frame < ApplicationRecord # rubocop:disable Metrics/ClassLength
   belongs_to :bay
 
   has_many :materials, -> { order("servers.position desc") }, class_name: "Server", dependent: :restrict_with_error
-  has_many :pdus, -> { only_pdus }, class_name: "Server", dependent: :restrict_with_error
-  has_many :servers, -> { no_pdus.order("servers.position desc") }, class_name: "Server", dependent: :restrict_with_error
+  has_many :servers,
+           -> { no_pdus.order("servers.position desc") },
+           class_name: "Server",
+           dependent: :restrict_with_error
+
+  has_many :power_distribution_units, dependent: :restrict_with_error
+  has_many :left_power_distribution_units,
+           -> { left },
+           class_name: "PowerDistributionUnit",
+           dependent: :restrict_with_error
+  has_many :right_power_distribution_units,
+           -> { right },
+           class_name: "PowerDistributionUnit",
+           dependent: :restrict_with_error
 
   has_one :islet, through: :bay
   has_one :room, through: :islet
diff --git a/app/views/visualization/frames/_show_complete_frame.html.erb b/app/views/visualization/frames/_show_complete_frame.html.erb
index 8649d7e50..c6da08b6c 100644
--- a/app/views/visualization/frames/_show_complete_frame.html.erb
+++ b/app/views/visualization/frames/_show_complete_frame.html.erb
@@ -1,8 +1,6 @@
 <%# locals: (room:, frame:, should_show_heading: true) -%>
 
-<%
-  settings = { min_height: params[:view] == "back" ? 20 : 27 }
-%>
+<% settings = { min_height: params[:view] == "back" ? 20 : 27 } %>
 
 <div id="<%= room.try(:name).try(:parameterize).try(:underscore) %>">
   <div>
@@ -20,24 +18,59 @@
 
         <div class="frames col-12 d-flex flex-row flex-wrap row-gap-4 <%= params[:view] %>"
              data-update-url="<%= sort_frames_path %>">
-
-          <div class="col-12 col-lg-4 pe-lg-4 view-front">
+          <div class="col-12 col-md-6 col-lg-8 col-xxl-3 flex-grow-1 flex-xxl-grow-0 order-md-2 pe-xxl-4 view-front">
             <%= render partial: "visualization/frames/show_frame",
                        locals: {
                          frame:, servers: frame.servers, settings:, view_type: "front",
                        } %>
           </div>
-          <div class="col-12 col-lg-6 flex-grow-1 view-back">
+
+          <div class="col-12 col-xxl-5 order-md-4 flex-grow-1 view-back">
             <%= render partial: "visualization/frames/show_frame",
                        locals: {
                          frame:, servers: frame.servers, settings:, view_type: "back",
                        } %>
           </div>
-          <!--
-          <div class="d-none d-lg-block ps-lg-4 col-lg-2" style="max-width: 200px;">
-            <%#= render partial: "pdus/show", locals: { frame: } %>
-          </div>
-          -->
+
+          <% if frame.left_power_distribution_units.any? %>
+            <div class="col-6 col-md-3 col-lg-2 order-md-1 pe-4 mx-auto d-flex flex-column row-gap-4"
+                 style="min-width: fit-content; max-width: 150px; height: fit-content;">
+              <% frame.left_power_distribution_units.each do |power_distribution_unit| %>
+                <%= render CardComponent.new(extra_classes: "bg-body-tertiary rounded-bottom") do |card| %>
+                  <% card.with_header do %>
+                    <div class="text-center">
+                      <%= link_to power_distribution_unit_path(power_distribution_unit) do %>
+                        <%= render power_distribution_unit.decorated.power_line_badge_component %>
+                      <% end %>
+                    </div>
+                  <% end %>
+
+                  <%= render partial: "power_distribution_units/visualization",
+                             locals: { power_distribution_unit: } %>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+
+          <% if frame.right_power_distribution_units.any? %>
+            <div class="col-6 col-md-3 col-lg-2 order-md-3 order-xxl-4 ps-md-4 mx-auto d-inline-flex column-gap-4"
+                 style="min-width: fit-content; max-width: 150px; height: fit-content;">
+              <% frame.right_power_distribution_units.each do |power_distribution_unit| %>
+                <%= render CardComponent.new(extra_classes: "bg-body-tertiary rounded-bottom") do |card| %>
+                  <% card.with_header do %>
+                    <div class="text-center">
+                      <%= link_to power_distribution_unit_path(power_distribution_unit) do %>
+                        <%= render power_distribution_unit.decorated.power_line_badge_component %>
+                      <% end %>
+                    </div>
+                  <% end %>
+
+                  <%= render partial: "power_distribution_units/visualization",
+                             locals: { power_distribution_unit: } %>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
         </div>
       </div>
     </div>
diff --git a/app/views/visualization/frames/show.html.erb b/app/views/visualization/frames/show.html.erb
index b08adcda8..fe9c87ebb 100644
--- a/app/views/visualization/frames/show.html.erb
+++ b/app/views/visualization/frames/show.html.erb
@@ -41,7 +41,7 @@
 
 <%= render "ports/modal_edit_port" %>
 
-<script type="text/javascript">
+<script type="text/javascript" nonce="<%= request.content_security_policy_nonce %>">
   window.onload = function () {
     reset_u_heights()
 
diff --git a/spec/models/frame_spec.rb b/spec/models/frame_spec.rb
index 5ee9c790c..054e39587 100644
--- a/spec/models/frame_spec.rb
+++ b/spec/models/frame_spec.rb
@@ -15,8 +15,11 @@
     it { is_expected.to have_one(:room).through(:islet) }
 
     it { is_expected.to have_many(:materials).dependent(:restrict_with_error) }
-    it { is_expected.to have_many(:pdus).dependent(:restrict_with_error) }
     it { is_expected.to have_many(:servers).dependent(:restrict_with_error) }
+
+    it { is_expected.to have_many(:power_distribution_units).dependent(:restrict_with_error) }
+    it { is_expected.to have_many(:left_power_distribution_units).dependent(:restrict_with_error) }
+    it { is_expected.to have_many(:right_power_distribution_units).dependent(:restrict_with_error) }
   end
 
   describe "validations" do