From bc4f19c967d8d1f051d39a20878542f82f568c9b Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Sat, 13 Mar 2021 14:15:23 -0700
Subject: [PATCH] update templates to bootstrap 5 classes

---
 .../templates/dcim/device/consoleports.html   |  40 +++----
 .../dcim/device/consoleserverports.html       |  38 ++++---
 netbox/templates/dcim/device/devicebays.html  |  36 +++---
 netbox/templates/dcim/device/frontports.html  |  38 ++++---
 netbox/templates/dcim/device/interfaces.html  |  36 +++---
 netbox/templates/dcim/device/inventory.html   |  34 +++---
 .../templates/dcim/device/lldp_neighbors.html |  80 ++++++-------
 .../templates/dcim/device/poweroutlets.html   |  40 +++----
 netbox/templates/dcim/device/powerports.html  |  40 +++----
 netbox/templates/dcim/device/rearports.html   |  40 +++----
 netbox/templates/dcim/device/status.html      | 106 +++++++++---------
 11 files changed, 275 insertions(+), 253 deletions(-)

diff --git a/netbox/templates/dcim/device/consoleports.html b/netbox/templates/dcim/device/consoleports.html
index 9a0c8d0e8..c558f2f85 100644
--- a/netbox/templates/dcim/device/consoleports.html
+++ b/netbox/templates/dcim/device/consoleports.html
@@ -6,37 +6,39 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Console Ports</strong>
-                <div class="pull-right noprint">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DeviceConsolePortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-                    {% endif %}
+        <div class="card">
+            <div class="card-header">
+                <h5>Console Ports</h5>
+                <div class="float-end noprint">
+                {% if request.user.is_authenticated %}
+                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceConsolePortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                {% endif %}
                 </div>
             </div>
-            {% render_table consoleport_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table consoleport_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_consoleport %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:consoleport_bulk_rename' %}?return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:consoleport_bulk_rename' %}?return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:consoleport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:consoleport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
-                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:consoleport_bulk_disconnect' %}?return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-danger btn-xs">
+                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:consoleport_bulk_disconnect' %}?return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_consoleport %}
-                    <button type="submit" name="_delete" formaction="{% url 'dcim:consoleport_bulk_delete' %}?return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
+                    <button type="submit" name="_delete" formaction="{% url 'dcim:consoleport_bulk_delete' %}?return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_consoleport %}
-                    <div class="pull-right">
-                        <a href="{% url 'dcim:consoleport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-xs btn-primary">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add console port
+                    <div class="float-end">
+                        <a href="{% url 'dcim:consoleport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleports' pk=object.pk %}" class="btn btn-sm btn-primary">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add console port
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/consoleserverports.html b/netbox/templates/dcim/device/consoleserverports.html
index 61d3afd8b..cb91ee369 100644
--- a/netbox/templates/dcim/device/consoleserverports.html
+++ b/netbox/templates/dcim/device/consoleserverports.html
@@ -6,37 +6,39 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Console Server Ports</strong>
-                <div class="pull-right noprint">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DeviceConsoleServerPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-                    {% endif %}
+        <div class="card">
+            <div class="card-header">
+                <h5>Console Server Ports</h5>
+                <div class="float-end noprint">
+                {% if request.user.is_authenticated %}
+                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceConsoleServerPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                {% endif %}
                 </div>
             </div>
-            {% render_table consoleserverport_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table consoleserverport_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_consoleserverport %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:consoleserverport_bulk_rename' %}?return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:consoleserverport_bulk_rename' %}?return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:consoleserverport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:consoleserverport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
-                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:consoleserverport_bulk_disconnect' %}?return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-danger btn-xs">
+                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:consoleserverport_bulk_disconnect' %}?return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_consoleserverport %}
-                    <button type="submit" formaction="{% url 'dcim:consoleserverport_bulk_delete' %}?return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
+                    <button type="submit" formaction="{% url 'dcim:consoleserverport_bulk_delete' %}?return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_consoleserverport %}
                     <div class="pull-right">
-                        <a href="{% url 'dcim:consoleserverport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-primary btn-xs">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add console server ports
+                        <a href="{% url 'dcim:consoleserverport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_consoleserverports' pk=object.pk %}" class="btn btn-primary btn-sm">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add console server ports
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/devicebays.html b/netbox/templates/dcim/device/devicebays.html
index d23f307e7..d5852c08d 100644
--- a/netbox/templates/dcim/device/devicebays.html
+++ b/netbox/templates/dcim/device/devicebays.html
@@ -6,34 +6,36 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Device Bays</strong>
-                <div class="pull-right noprint">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DeviceDeviceBayTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-                    {% endif %}
+        <div class="card">
+            <div class="card-header">
+                <h5>Device Bays</h5>
+                <div class="float-end noprint">
+                {% if request.user.is_authenticated %}
+                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceDeviceBayTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                {% endif %}
                 </div>
             </div>
-            {% render_table devicebay_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table devicebay_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_devicebay %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:devicebay_bulk_rename' %}?return_url={{ object.get_absolute_url }}%23tab_devicebays" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:devicebay_bulk_rename' %}?return_url={{ object.get_absolute_url }}%23tab_devicebays" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:devicebay_bulk_edit' %}?device={{ object.pk }}&return_url={{ object.get_absolute_url }}%23tab_devicebays" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:devicebay_bulk_edit' %}?device={{ object.pk }}&return_url={{ object.get_absolute_url }}%23tab_devicebays" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_devicebay %}
-                    <button type="submit" formaction="{% url 'dcim:devicebay_bulk_delete' %}?return_url={{ object.get_absolute_url }}%23tab_devicebays" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete selected
+                    <button type="submit" formaction="{% url 'dcim:devicebay_bulk_delete' %}?return_url={{ object.get_absolute_url }}%23tab_devicebays" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete selected
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_devicebay %}
                     <div class="pull-right">
-                        <a href="{% url 'dcim:devicebay_add' %}?device={{ object.pk }}&return_url={{ object.get_absolute_url }}%23tab_devicebays" class="btn btn-primary btn-xs">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add device bays
+                        <a href="{% url 'dcim:devicebay_add' %}?device={{ object.pk }}&return_url={{ object.get_absolute_url }}%23tab_devicebays" class="btn btn-primary btn-sm">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add device bays
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/frontports.html b/netbox/templates/dcim/device/frontports.html
index 7084f592e..192365bd0 100644
--- a/netbox/templates/dcim/device/frontports.html
+++ b/netbox/templates/dcim/device/frontports.html
@@ -6,37 +6,39 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Front Ports</strong>
-                <div class="pull-right noprint">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DeviceFrontPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-                    {% endif %}
+        <div class="card">
+            <div class="card-header">
+                <h5>Front Ports</h5>
+                <div class="float-end noprint">
+                {% if request.user.is_authenticated %}
+                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceFrontPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                {% endif %}
                 </div>
             </div>
-            {% render_table frontport_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table frontport_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_frontport %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:frontport_bulk_rename' %}?return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:frontport_bulk_rename' %}?return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:frontport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:frontport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
-                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:frontport_bulk_disconnect' %}?return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-danger btn-xs">
+                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:frontport_bulk_disconnect' %}?return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_frontport %}
-                    <button type="submit" formaction="{% url 'dcim:frontport_bulk_delete' %}?return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
+                    <button type="submit" formaction="{% url 'dcim:frontport_bulk_delete' %}?return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_frontport %}
                     <div class="pull-right">
-                        <a href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-primary btn-xs">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add front ports
+                        <a href="{% url 'dcim:frontport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_frontports' pk=object.pk %}" class="btn btn-primary btn-sm">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add front ports
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/interfaces.html b/netbox/templates/dcim/device/interfaces.html
index 34897a601..2f2b2c44d 100644
--- a/netbox/templates/dcim/device/interfaces.html
+++ b/netbox/templates/dcim/device/interfaces.html
@@ -6,40 +6,42 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Interfaces</strong>
-                <div class="pull-right noprint">
+        <div class="card">
+            <div class="card-header">
+                <h5>Interfaces</h5>
+                <div class="float-end noprint">
                     {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DeviceInterfaceTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                        <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceInterfaceTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
                     {% endif %}
                 </div>
-                <div class="pull-right col-md-2 noprint">
+                <div class="float-end col-md-2 noprint">
                     <input class="form-control interface-filter" type="text" placeholder="Filter" title="Filter text (regular expressions supported)" style="height: 23px" />
                 </div>
             </div>
-            {% render_table interface_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table interface_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_interface %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:interface_bulk_rename' %}?return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:interface_bulk_rename' %}?return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:interface_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:interface_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
-                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:interface_bulk_disconnect' %}?return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-danger btn-xs">
+                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:interface_bulk_disconnect' %}?return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_interface %}
-                    <button type="submit" name="_delete" formaction="{% url 'dcim:interface_bulk_delete' %}?return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
+                    <button type="submit" name="_delete" formaction="{% url 'dcim:interface_bulk_delete' %}?return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_interface %}
                     <div class="pull-right">
-                        <a href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-primary btn-xs">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add interfaces
+                        <a href="{% url 'dcim:interface_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_interfaces' pk=object.pk %}" class="btn btn-primary btn-sm">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add interfaces
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/inventory.html b/netbox/templates/dcim/device/inventory.html
index 5e52667cb..2d74758d8 100644
--- a/netbox/templates/dcim/device/inventory.html
+++ b/netbox/templates/dcim/device/inventory.html
@@ -6,34 +6,36 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Inventory Items</strong>
-                <div class="pull-right noprint">
+        <div class="card">
+            <div class="card-header">
+                <h5>Inventory Items</h5>
+                <div class="float-end noprint">
                     {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DeviceInventoryItemTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                        <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceInventoryItemTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
                     {% endif %}
                 </div>
             </div>
-            {% render_table inventoryitem_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table inventoryitem_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_inventoryitem %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:inventoryitem_bulk_rename' %}?return_url={% url 'dcim:device_inventory' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:inventoryitem_bulk_rename' %}?return_url={% url 'dcim:device_inventory' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:inventoryitem_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:inventoryitem_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_inventoryitem %}
-                    <button type="submit" name="_delete" formaction="{% url 'dcim:inventoryitem_bulk_delete' %}?return_url={% url 'dcim:device_inventory' pk=object.pk %}" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
+                    <button type="submit" name="_delete" formaction="{% url 'dcim:inventoryitem_bulk_delete' %}?return_url={% url 'dcim:device_inventory' pk=object.pk %}" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_inventoryitem %}
-                    <div class="pull-right">
-                        <a href="{% url 'dcim:inventoryitem_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}" class="btn btn-primary btn-xs">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Inventory Item
+                    <div class="float-end">
+                        <a href="{% url 'dcim:inventoryitem_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_inventory' pk=object.pk %}" class="btn btn-primary btn-sm">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add Inventory Item
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/lldp_neighbors.html b/netbox/templates/dcim/device/lldp_neighbors.html
index a2baa6322..b4600b773 100644
--- a/netbox/templates/dcim/device/lldp_neighbors.html
+++ b/netbox/templates/dcim/device/lldp_neighbors.html
@@ -4,47 +4,47 @@
 
 {% block content %}
     {% include 'inc/ajax_loader.html' %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <strong>LLDP Neighbors</strong>
-        </div>
-        <table class="table table-hover panel-body">
-            <thead>
-                <tr>
-                    <th>Interface</th>
-                    <th>Configured Device</th>
-                    <th>Configured Interface</th>
-                    <th>LLDP Device</th>
-                    <th>LLDP Interface</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for iface in interfaces %}
-                    <tr id="{{ iface.name }}">
-                        <td>{{ iface }}</td>
-                        {% if iface.connected_endpoint.device %}
-                            <td class="configured_device" data="{{ iface.connected_endpoint.device }}" data-chassis="{{ iface.connected_endpoint.device.virtual_chassis.name }}">
-                                <a href="{% url 'dcim:device' pk=iface.connected_endpoint.device.pk %}">{{ iface.connected_endpoint.device }}</a>
-                            </td>
-                            <td class="configured_interface" data="{{ iface.connected_endpoint }}">
-                                <span title="{{ iface.connected_endpoint.get_type_display }}">{{ iface.connected_endpoint }}</span>
-                            </td>
-                        {% elif iface.connected_endpoint.circuit %}
-                            {% with circuit=iface.connected_endpoint.circuit %}
-                                <td colspan="2">
-                                    <i class="mdi mdi-lightning-bolt" title="Circuit"></i>
-                                    <a href="{{ circuit.get_absolute_url }}">{{ circuit.provider }} {{ circuit }}</a>
-                                </td>
-                            {% endwith %}
-                        {% else %}
-                            <td colspan="2">None</td>
-                        {% endif %}
-                        <td class="device"></td>
-                        <td class="interface"></td>
+    <div class="card">
+        <h5 class="card-header">LLDP Neighbors</h5>
+        <div class="card-body">
+            <table class="table table-hover">
+                <thead>
+                    <tr>
+                        <th>Interface</th>
+                        <th>Configured Device</th>
+                        <th>Configured Interface</th>
+                        <th>LLDP Device</th>
+                        <th>LLDP Interface</th>
                     </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                    {% for iface in interfaces %}
+                        <tr id="{{ iface.name }}">
+                            <td>{{ iface }}</td>
+                            {% if iface.connected_endpoint.device %}
+                                <td class="configured_device" data="{{ iface.connected_endpoint.device }}" data-chassis="{{ iface.connected_endpoint.device.virtual_chassis.name }}">
+                                    <a href="{% url 'dcim:device' pk=iface.connected_endpoint.device.pk %}">{{ iface.connected_endpoint.device }}</a>
+                                </td>
+                                <td class="configured_interface" data="{{ iface.connected_endpoint }}">
+                                    <span title="{{ iface.connected_endpoint.get_type_display }}">{{ iface.connected_endpoint }}</span>
+                                </td>
+                            {% elif iface.connected_endpoint.circuit %}
+                                {% with circuit=iface.connected_endpoint.circuit %}
+                                    <td colspan="2">
+                                        <i class="mdi mdi-lightning-bolt" title="Circuit"></i>
+                                        <a href="{{ circuit.get_absolute_url }}">{{ circuit.provider }} {{ circuit }}</a>
+                                    </td>
+                                {% endwith %}
+                            {% else %}
+                                <td colspan="2">None</td>
+                            {% endif %}
+                            <td class="device"></td>
+                            <td class="interface"></td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
 {% endblock %}
 
diff --git a/netbox/templates/dcim/device/poweroutlets.html b/netbox/templates/dcim/device/poweroutlets.html
index 8e0cd9790..cd72b1f0e 100644
--- a/netbox/templates/dcim/device/poweroutlets.html
+++ b/netbox/templates/dcim/device/poweroutlets.html
@@ -6,37 +6,39 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Power Outlets</strong>
-                <div class="pull-right noprint">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DevicePowerOutletTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-                    {% endif %}
+        <div class="card">
+            <div class="card-header">
+                <h5>Power Outlets</h5>
+                <div class="float-right noprint">
+                {% if request.user.is_authenticated %}
+                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DevicePowerOutletTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                {% endif %}
                 </div>
             </div>
-            {% render_table poweroutlet_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table poweroutlet_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_powerport %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:poweroutlet_bulk_rename' %}?return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:poweroutlet_bulk_rename' %}?return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:poweroutlet_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:poweroutlet_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
-                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:poweroutlet_bulk_disconnect' %}?return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-danger btn-xs">
+                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:poweroutlet_bulk_disconnect' %}?return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_poweroutlet %}
-                    <button type="submit" formaction="{% url 'dcim:poweroutlet_bulk_delete' %}?return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
+                    <button type="submit" formaction="{% url 'dcim:poweroutlet_bulk_delete' %}?return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_poweroutlet %}
-                    <div class="pull-right">
-                        <a href="{% url 'dcim:poweroutlet_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-primary btn-xs">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add power outlets
+                    <div class="float-end">
+                        <a href="{% url 'dcim:poweroutlet_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_poweroutlets' pk=object.pk %}" class="btn btn-primary btn-sm">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add power outlets
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/powerports.html b/netbox/templates/dcim/device/powerports.html
index 9b56b64a3..a2ba31e52 100644
--- a/netbox/templates/dcim/device/powerports.html
+++ b/netbox/templates/dcim/device/powerports.html
@@ -6,37 +6,39 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Power Ports</strong>
-                <div class="pull-right noprint">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DevicePowerPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-                    {% endif %}
+        <div class="card">
+            <div class="card-header">
+                <h5>Power Ports</h5>
+                <div class="float-end noprint">
+                {% if request.user.is_authenticated %}
+                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DevicePowerPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                {% endif %}
                 </div>
             </div>
-            {% render_table powerport_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table powerport_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_powerport %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:powerport_bulk_rename' %}?return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:powerport_bulk_rename' %}?return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:powerport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:powerport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
-                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:powerport_bulk_disconnect' %}?return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-danger btn-xs">
+                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:powerport_bulk_disconnect' %}?return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_powerport %}
-                    <button type="submit" name="_delete" formaction="{% url 'dcim:powerport_bulk_delete' %}?return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
+                    <button type="submit" name="_delete" formaction="{% url 'dcim:powerport_bulk_delete' %}?return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_powerport %}
-                    <div class="pull-right">
-                        <a href="{% url 'dcim:powerport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-xs btn-primary">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add power port
+                    <div class="float-end">
+                        <a href="{% url 'dcim:powerport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_powerports' pk=object.pk %}" class="btn btn-sm btn-primary">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add power port
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/rearports.html b/netbox/templates/dcim/device/rearports.html
index eeef667c2..007303e19 100644
--- a/netbox/templates/dcim/device/rearports.html
+++ b/netbox/templates/dcim/device/rearports.html
@@ -6,37 +6,39 @@
 {% block content %}
     <form method="post">
         {% csrf_token %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <strong>Rear Ports</strong>
-                <div class="pull-right noprint">
-                    {% if request.user.is_authenticated %}
-                        <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#DeviceRearPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
-                    {% endif %}
+        <div class="card">
+            <div class="card-header">
+                <h5>Rear Ports</h5>
+                <div class="float-end noprint">
+                {% if request.user.is_authenticated %}
+                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#DeviceRearPortTable_config" title="Configure table"><i class="mdi mdi-cog"></i> Configure</button>
+                {% endif %}
                 </div>
             </div>
-            {% render_table rearport_table 'inc/table.html' %}
-            <div class="panel-footer noprint">
+            <div class="card-body">
+                {% render_table rearport_table 'inc/table.html' %}
+            </div>
+            <div class="card-footer noprint">
                 {% if perms.dcim.change_rearport %}
-                    <button type="submit" name="_rename" formaction="{% url 'dcim:rearport_bulk_rename' %}?return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Rename
+                    <button type="submit" name="_rename" formaction="{% url 'dcim:rearport_bulk_rename' %}?return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-input-cursor-text" aria-hidden="true"></i> Rename
                     </button>
-                    <button type="submit" name="_edit" formaction="{% url 'dcim:rearport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-warning btn-xs">
-                        <span class="mdi mdi-pencil" aria-hidden="true"></span> Edit
+                    <button type="submit" name="_edit" formaction="{% url 'dcim:rearport_bulk_edit' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit
                     </button>
-                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:rearport_bulk_disconnect' %}?return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-danger btn-xs">
+                    <button type="submit" name="_disconnect" formaction="{% url 'dcim:rearport_bulk_disconnect' %}?return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-danger btn-sm">
                         <span class="mdi mdi-ethernet-cable-off" aria-hidden="true"></span> Disconnect
                     </button>
                 {% endif %}
                 {% if perms.dcim.delete_rearport %}
-                    <button type="submit" formaction="{% url 'dcim:rearport_bulk_delete' %}?return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-danger btn-xs">
-                        <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> Delete
+                    <button type="submit" formaction="{% url 'dcim:rearport_bulk_delete' %}?return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-danger btn-sm">
+                        <i class="bi bi-trash-fill" aria-hidden="true"></i> Delete
                     </button>
                 {% endif %}
                 {% if perms.dcim.add_rearport %}
-                    <div class="pull-right">
-                        <a href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-primary btn-xs">
-                            <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add rear ports
+                    <div class="float-end">
+                        <a href="{% url 'dcim:rearport_add' %}?device={{ object.pk }}&return_url={% url 'dcim:device_rearports' pk=object.pk %}" class="btn btn-primary btn-sm">
+                            <i class="bi bi-plus" aria-hidden="true"></i> Add rear ports
                         </a>
                     </div>
                 {% endif %}
diff --git a/netbox/templates/dcim/device/status.html b/netbox/templates/dcim/device/status.html
index b7f8d0eaa..0e0fb0e8f 100644
--- a/netbox/templates/dcim/device/status.html
+++ b/netbox/templates/dcim/device/status.html
@@ -7,60 +7,64 @@
     {% include 'inc/ajax_loader.html' %}
     <div class="row">
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading"><strong>Device Facts</strong></div>
-                <table class="table panel-body">
-                    <tr>
-                        <th>Hostname</th>
-                        <td id="hostname"></td>
-                    </tr>
-                    <tr>
-                        <th>FQDN</th>
-                        <td id="fqdn"></td>
-                    </tr>
-                    <tr>
-                        <th>Vendor</th>
-                        <td id="vendor"></td>
-                    </tr>
-                    <tr>
-                        <th>Model</th>
-                        <td id="model"></td>
-                    </tr>
-                    <tr>
-                        <th>Serial Number</th>
-                        <td id="serial_number"></td>
-                    </tr>
-                    <tr>
-                        <th>OS Version</th>
-                        <td id="os_version"></td>
-                    </tr>
-                    <tr>
-                        <th>Uptime</th>
-                        <td id="uptime"></td>
-                    </tr>
-                </table>
+            <div class="card">
+                <h5 class="card-header">Device Facts</h5>
+                <div class="card-body">
+                    <table class="table">
+                        <tr>
+                            <th scope="row">Hostname</th>
+                            <td id="hostname"></td>
+                        </tr>
+                        <tr>
+                            <th scope="row">FQDN</th>
+                            <td id="fqdn"></td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Vendor</th>
+                            <td id="vendor"></td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Model</th>
+                            <td id="model"></td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Serial Number</th>
+                            <td id="serial_number"></td>
+                        </tr>
+                        <tr>
+                            <th scope="row">OS Version</th>
+                            <td id="os_version"></td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Uptime</th>
+                            <td id="uptime"></td>
+                        </tr>
+                    </table>
+                </div>
             </div>
         </div>
         <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading"><strong>Environment</strong></div>
-                <table class="table panel-body">
-                    <tr id="cpu">
-                        <th colspan="2"><i class="mdi mdi-gauge"></i> CPU</th>
-                    </tr>
-                    <tr id="memory">
-                        <th colspan="2"><i class="mdi mdi-chip"></i> Memory</th>
-                    </tr>
-                    <tr id="temperature">
-                        <th colspan="2"><i class="mdi mdi-thermometer"></i> Temperature</th>
-                    </tr>
-                    <tr id="fans">
-                        <th colspan="2"><i class="mdi mdi-fan"></i> Fans</th>
-                    </tr>
-                    <tr id="power">
-                        <th colspan="2"><i class="mdi mdi-power"></i> Power</th>
-                    </tr>
-                </table>
+            <div class="card">
+                <h5 class="card-header">Environment</h5>
+                <div class="card-body">
+                    <table class="table">
+                        <tr id="cpu">
+                            <th colspan="2"><i class="mdi mdi-gauge"></i> CPU</th>
+                        </tr>
+                        <tr id="memory">
+                            <th colspan="2"><i class="mdi mdi-chip"></i> Memory</th>
+                        </tr>
+                        <tr id="temperature">
+                            <th colspan="2"><i class="mdi mdi-thermometer"></i> Temperature</th>
+                        </tr>
+                        <tr id="fans">
+                            <th colspan="2"><i class="mdi mdi-fan"></i> Fans</th>
+                        </tr>
+                        <tr id="power">
+                            <th colspan="2"><i class="mdi mdi-power"></i> Power</th>
+                        </tr>
+                    </table>
+                </div>
             </div>
         </div>
     </div>