diff --git a/Views/dashboard_config.php b/Views/dashboard_config.php
index 197599b..8b17695 100644
--- a/Views/dashboard_config.php
+++ b/Views/dashboard_config.php
@@ -18,59 +18,63 @@ function dashboard_config_attr($value)
 }
 ?>
 
-<div id="dashConfigModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="dashConfigModalLabel" aria-hidden="true" data-backdrop="static">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h3 id="dashConfigModalLabel"><?php echo ctx_tr('dashboard_messages', 'Dashboard Configuration'); ?></h3>
-    </div>
-    <div class="modal-body">
-        <label><?php echo ctx_tr('dashboard_messages', 'Dashboard name: '); ?></label>
-        <input type="text" name="name" value="<?php echo dashboard_config_attr($dashboard['name']); ?>" />
-        <label><?php echo ctx_tr('dashboard_messages', 'Alias name: '); ?></label>
-        <input type="text" name="alias" value="<?php echo dashboard_config_attr($dashboard['alias']); ?>" />
-        <label><?php echo ctx_tr('dashboard_messages', 'Background color: '); ?></label>
-        <input type="color" name="backgroundcolor" value="#<?php echo preg_replace('/[^0-9a-fA-F]/', '', (string) $dashboard['backgroundcolor']); ?>" />
-        <label><?php echo ctx_tr('dashboard_messages', 'Description: '); ?></label>
-        <textarea name="description"><?php echo dashboard_config_attr($dashboard['description']); ?></textarea>
-        <label><?php echo ctx_tr('dashboard_messages', 'Grid size: '); ?></label>
-        <input type="text" name="gridsize" value="<?php echo (int) $dashboard['gridsize']; ?>" />
-
-
-        <label><?php echo ctx_tr('dashboard_messages', 'Feed selection mode: '); ?></label>
-        <i style="font-size:12px"><?php echo ctx_tr('dashboard_messages', 'Note: Reset feeds in all widgets in dashboard if changing'); ?><br><?php echo ctx_tr('dashboard_messages', 'this part way through a dashboard build'); ?></i><br>
-        <select name="feedmode">
-            <option value="tagname" <?php echo $dashboard['feedmode'] == "tagname" ? 'selected' : ''; ?>><?php echo ctx_tr('dashboard_messages', 'By tag:name'); ?></option>
-            <option value="feedid" <?php echo $dashboard['feedmode'] == "feedid" ? 'selected' : ''; ?>><?php echo ctx_tr('dashboard_messages', 'By feedid'); ?></option>
-        </select>
-
-        <label class="checkbox">
-            <input type="checkbox" name="main" id="chk_main" value="1" <?php echo $dashboard['main'] ? 'checked' : ''; ?> />
-            <abbr title="<?php echo ctx_tr('dashboard_messages', 'Make this dashboard the first shown'); ?>"><?php echo ctx_tr('dashboard_messages', 'Main'); ?></abbr>
-        </label>
-
-        <label class="checkbox">
-            <input type="checkbox" name="published" id="chk_published" value="1" <?php echo $dashboard['published'] ? 'checked' : ''; ?> />
-            <abbr title="<?php echo ctx_tr('dashboard_messages', 'Activate this dashboard'); ?>"><?php echo ctx_tr('dashboard_messages', 'Published'); ?></abbr>
-        </label>
-
-        <label class="checkbox">
-            <input type="checkbox" name="public" id="chk_public" value="1" <?php echo $dashboard['public'] ? 'checked' : ''; ?> />
-            <abbr title="<?php echo ctx_tr('dashboard_messages', 'Anyone with the URL can see this dashboard'); ?>"><?php echo ctx_tr('dashboard_messages', 'Public'); ?></abbr>
-        </label>
-
-        <label class="checkbox">
-            <input type="checkbox" name="showdescription" id="chk_showdescription" value="1" <?php echo $dashboard['showdescription'] ? 'checked' : ''; ?> />
-            <abbr title="<?php echo ctx_tr('dashboard_messages', 'Shows dashboard description on mouse over dashboard name in menu project'); ?>"><?php echo ctx_tr('dashboard_messages', 'Show description'); ?></abbr>
-        </label>
-
-        <label class="checkbox">
-            <input type="checkbox" name="fullscreen" id="chk_fullscreen" value="1" <?php echo $dashboard['fullscreen'] ? 'checked' : ''; ?> />
-            <abbr title="<?php echo ctx_tr('dashboard_messages', 'Hide menus on dashboard. Make full screen.'); ?>"><?php echo ctx_tr('dashboard_messages', 'Hide Menus'); ?></abbr>
-        </label>
-    </div>
-    <div class="modal-footer">
-        <button class="btn" data-dismiss="modal" aria-hidden="true"><?php echo ctx_tr('dashboard_messages', 'Close'); ?></button>
-        <button id="configure-save" class="btn btn-primary"><?php echo ctx_tr('dashboard_messages', 'Save changes'); ?></button>
+<div id="dashConfigModal" class="modal" tabindex="-1" aria-labelledby="dashConfigModalLabel" aria-hidden="true" data-bs-backdrop="static">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="dashConfigModalLabel" class="modal-title"><?php echo ctx_tr('dashboard_messages', 'Dashboard Configuration'); ?></h3>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <label class="form-label"><?php echo ctx_tr('dashboard_messages', 'Dashboard name: '); ?></label>
+                <input type="text" class="form-control input-220 mb-2" name="name" value="<?php echo dashboard_config_attr($dashboard['name']); ?>" />
+                <label class="form-label"><?php echo ctx_tr('dashboard_messages', 'Alias name: '); ?></label>
+                <input type="text" class="form-control input-220 mb-2" name="alias" value="<?php echo dashboard_config_attr($dashboard['alias']); ?>" />
+                <label class="form-label"><?php echo ctx_tr('dashboard_messages', 'Background color: '); ?></label>
+                <input type="color" class="form-control form-control-color input-220 mb-2" name="backgroundcolor" value="#<?php echo preg_replace('/[^0-9a-fA-F]/', '', (string) $dashboard['backgroundcolor']); ?>" />
+                <label class="form-label"><?php echo ctx_tr('dashboard_messages', 'Description: '); ?></label>
+                <textarea class="form-control input-220 mb-2" name="description"><?php echo dashboard_config_attr($dashboard['description']); ?></textarea>
+                <label class="form-label"><?php echo ctx_tr('dashboard_messages', 'Grid size: '); ?></label>
+                <input type="text" class="form-control input-220 mb-2" name="gridsize" value="<?php echo (int) $dashboard['gridsize']; ?>" />
+        
+        
+                <label class="form-label"><?php echo ctx_tr('dashboard_messages', 'Feed selection mode: '); ?></label>
+                <i style="font-size:12px"><?php echo ctx_tr('dashboard_messages', 'Note: Reset feeds in all widgets in dashboard if changing'); ?><br><?php echo ctx_tr('dashboard_messages', 'this part way through a dashboard build'); ?></i><br>
+                <select class="form-select input-220 mb-2" name="feedmode">
+                    <option value="tagname" <?php echo $dashboard['feedmode'] == "tagname" ? 'selected' : ''; ?>><?php echo ctx_tr('dashboard_messages', 'By tag:name'); ?></option>
+                    <option value="feedid" <?php echo $dashboard['feedmode'] == "feedid" ? 'selected' : ''; ?>><?php echo ctx_tr('dashboard_messages', 'By feedid'); ?></option>
+                </select>
+        
+                <label class="d-block">
+                    <input type="checkbox" name="main" id="chk_main" value="1" <?php echo $dashboard['main'] ? 'checked' : ''; ?> />
+                    <abbr title="<?php echo ctx_tr('dashboard_messages', 'Make this dashboard the first shown'); ?>"><?php echo ctx_tr('dashboard_messages', 'Main'); ?></abbr>
+                </label>
+        
+                <label class="d-block">
+                    <input type="checkbox" name="published" id="chk_published" value="1" <?php echo $dashboard['published'] ? 'checked' : ''; ?> />
+                    <abbr title="<?php echo ctx_tr('dashboard_messages', 'Activate this dashboard'); ?>"><?php echo ctx_tr('dashboard_messages', 'Published'); ?></abbr>
+                </label>
+        
+                <label class="d-block">
+                    <input type="checkbox" name="public" id="chk_public" value="1" <?php echo $dashboard['public'] ? 'checked' : ''; ?> />
+                    <abbr title="<?php echo ctx_tr('dashboard_messages', 'Anyone with the URL can see this dashboard'); ?>"><?php echo ctx_tr('dashboard_messages', 'Public'); ?></abbr>
+                </label>
+        
+                <label class="d-block">
+                    <input type="checkbox" name="showdescription" id="chk_showdescription" value="1" <?php echo $dashboard['showdescription'] ? 'checked' : ''; ?> />
+                    <abbr title="<?php echo ctx_tr('dashboard_messages', 'Shows dashboard description on mouse over dashboard name in menu project'); ?>"><?php echo ctx_tr('dashboard_messages', 'Show description'); ?></abbr>
+                </label>
+        
+                <label class="d-block">
+                    <input type="checkbox" name="fullscreen" id="chk_fullscreen" value="1" <?php echo $dashboard['fullscreen'] ? 'checked' : ''; ?> />
+                    <abbr title="<?php echo ctx_tr('dashboard_messages', 'Hide menus on dashboard. Make full screen.'); ?>"><?php echo ctx_tr('dashboard_messages', 'Hide Menus'); ?></abbr>
+                </label>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-default" data-bs-dismiss="modal" aria-hidden="true"><?php echo ctx_tr('dashboard_messages', 'Close'); ?></button>
+                <button id="configure-save" class="btn btn-primary"><?php echo ctx_tr('dashboard_messages', 'Save changes'); ?></button>
+            </div>
+        </div>
     </div>
 </div>
 
diff --git a/Views/dashboard_edit_view.php b/Views/dashboard_edit_view.php
index a2369d6..664064a 100644
--- a/Views/dashboard_edit_view.php
+++ b/Views/dashboard_edit_view.php
@@ -52,40 +52,44 @@ function getTranslations() {
     }
     </script>
 <div id="dashboardpage">
-    <div id="widget_options" class="modal hide keyboard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
-        <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-            <h3 id="myModalLabel"><?php echo ctx_tr('dashboard_messages', 'Configure element'); ?></h3>
-        </div>
-        <div id="widget_options_body" class="modal-body"></div>
-        <div class="modal-footer">
-            <span id="options-problem" class="text-error" style="margin-right:10px"></span>
-            <button class="btn" data-dismiss="modal" aria-hidden="true"><?php echo ctx_tr('dashboard_messages', 'Cancel'); ?></button>
-            <button id="options-save" class="btn btn-primary"><?php echo ctx_tr('dashboard_messages', 'Save changes'); ?></button>
+    <div id="widget_options" class="modal keyboard" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" data-bs-backdrop="static">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 id="myModalLabel" class="modal-title"><?php echo ctx_tr('dashboard_messages', 'Configure element'); ?></h3>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div id="widget_options_body" class="modal-body"></div>
+                <div class="modal-footer">
+                    <span id="options-problem" class="text-danger" style="margin-right:10px"></span>
+                    <button class="btn btn-default" data-bs-dismiss="modal" aria-hidden="true"><?php echo ctx_tr('dashboard_messages', 'Cancel'); ?></button>
+                    <button id="options-save" class="btn btn-primary"><?php echo ctx_tr('dashboard_messages', 'Save changes'); ?></button>
+                </div>
+            </div>
         </div>
     </div>
 </div>
 
-<div id="toolbox" style="cursor:move; text-align: center; background-color:#ddd; padding-left:5px; padding-right:5px; padding-bottom:15px; position:fixed;z-index:1; border-radius: 5px 5px 5px 5px; border-style:groove; width: 125px; height: auto; top: 5rem; right: 1rem;"><?php echo ctx_tr('dashboard_messages', 'Toolbox'); ?>
+<div id="toolbox" style="box-sizing:content-box; cursor:move; text-align: center; background-color:#ddd; padding-left:5px; padding-right:5px; padding-bottom:15px; position:fixed;z-index:1; border-radius: 5px 5px 5px 5px; border-style:groove; width: 125px; height: auto; top: 5rem; right: 1rem;"><?php echo ctx_tr('dashboard_messages', 'Toolbox'); ?>
     <div id="separator" style="height:1.5px; background:#717171"></div>
     <div id="Buttons" style="position:relative; top:5px; cursor:pointer">
     <span id="dashboard-config-buttons">
-    <button id="dashboard-config-button" style="padding:4px; float:left; width:31px" class="btn" href="#dashConfigModal" role="button" data-toggle="modal" title="<?php echo ctx_tr('dashboard_messages', 'Configure dashboard basic data'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-gear.png'); ?>"></span></button>
-    <button id="undo-button" class="btn" style="padding:4px; float:left; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Undo last step'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-undo.png'); ?>"></span></button>
-    <button id="redo-button" class="btn" style="padding:4px; float:left; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Redo last step'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-redo.png'); ?>"></span></button>
-    <button id="view-mode" class="btn" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Return to view mode'); ?>" onclick="window.location.href='view?id=<?php echo $dashid; ?>'"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-view.png'); ?>" ></span></button>
+    <button id="dashboard-config-button" style="padding:4px; float:left; width:31px" class="btn btn-default" href="#dashConfigModal" role="button" data-bs-toggle="modal" title="<?php echo ctx_tr('dashboard_messages', 'Configure dashboard basic data'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-gear.png'); ?>"></span></button>
+    <button id="undo-button" class="btn btn-default" style="padding:4px; float:left; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Undo last step'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-undo.png'); ?>"></span></button>
+    <button id="redo-button" class="btn btn-default" style="padding:4px; float:left; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Redo last step'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-redo.png'); ?>"></span></button>
+    <button id="view-mode" class="btn btn-default" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Return to view mode'); ?>" onclick="window.location.href='view?id=<?php echo $dashid; ?>'"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-view.png'); ?>" ></span></button>
     </span>
     <span id="when-selected">
-        <button id="options-button" class="btn" style="float:left; padding:4px; width:31px" data-toggle="modal" data-target="#widget_options" title="<?php echo ctx_tr('dashboard_messages', 'Configure selected item'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-tool.png'); ?>"></span></button>
-        <button id="move-forward-button" class="btn" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Move selected item in front of other items'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-front.png'); ?>"></span></button>
-        <button id="move-backward-button" class="btn" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Move selected item to back of other items'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-back.png'); ?>"></span></button>
+        <button id="options-button" class="btn btn-default" style="float:left; padding:4px; width:31px" data-bs-toggle="modal" data-bs-target="#widget_options" title="<?php echo ctx_tr('dashboard_messages', 'Configure selected item'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-tool.png'); ?>"></span></button>
+        <button id="move-forward-button" class="btn btn-default" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Move selected item in front of other items'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-front.png'); ?>"></span></button>
+        <button id="move-backward-button" class="btn btn-default" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Move selected item to back of other items'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-back.png'); ?>"></span></button>
         <button id="delete-button" class="btn btn-danger" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Delete selected items'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-delete.png'); ?>"></span></button>
     </span>
     <span id="clipboard-buttons">
-        <button id="copy-button" class="btn" style="float:left; padding:4px; width:31px" disabled title="<?php echo ctx_tr('dashboard_messages', 'Copy selected items (Ctrl+C)'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-copy.png'); ?>"></span></button>
-        <button id="cut-button" class="btn" style="float:left; padding:4px; width:31px" disabled title="<?php echo ctx_tr('dashboard_messages', 'Cut selected items (Ctrl+X)'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-cut.png'); ?>"></span></button>
-        <button id="paste-button" class="btn" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Paste copied items (Ctrl+V)'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-paste.png'); ?>"></span></button>
-        <button class="btn" style="float:left; padding:4px; width:31px; visibility:hidden" disabled><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-paste.png'); ?>"></span></button>
+        <button id="copy-button" class="btn btn-default" style="float:left; padding:4px; width:31px" disabled title="<?php echo ctx_tr('dashboard_messages', 'Copy selected items (Ctrl+C)'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-copy.png'); ?>"></span></button>
+        <button id="cut-button" class="btn btn-default" style="float:left; padding:4px; width:31px" disabled title="<?php echo ctx_tr('dashboard_messages', 'Cut selected items (Ctrl+X)'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-cut.png'); ?>"></span></button>
+        <button id="paste-button" class="btn btn-default" style="float:left; padding:4px; width:31px" title="<?php echo ctx_tr('dashboard_messages', 'Paste copied items (Ctrl+V)'); ?>"><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-paste.png'); ?>"></span></button>
+        <button class="btn btn-default" style="float:left; padding:4px; width:31px; visibility:hidden" disabled><span><img src="<?php echo ($path . 'Modules/dashboard/Views/icons/emon-icon-paste.png'); ?>"></span></button>
     </span>
     <span id="widget-buttons" ></span>
     <span><button id="save-dashboard" class="btn btn-success" style="float:left; padding:2px; width:125px" title="<?php echo ctx_tr('dashboard_messages', 'Nothing to save'); ?>" ><?php echo ctx_tr('dashboard_messages', 'Not modified'); ?></button></span>
diff --git a/Views/dashboard_list.css b/Views/dashboard_list.css
index d7b1b76..30ec894 100644
--- a/Views/dashboard_list.css
+++ b/Views/dashboard_list.css
@@ -23,23 +23,19 @@ div:empty{
     width: 5em;
     height: 1em;
 }
-.table-condensed th {
+.table-sm th {
     font-size: 10px;
     font-weight: normal;
 }
-.table-condensed th,
-.table-condensed td {
+.table-sm th,
+.table-sm td {
     padding-left: 0;
     padding-right: 0;
 }
-.table .control-group{
-    margin:0
-}
-.table .control-group {
+.table .field-row {
     position: relative;
 }
-.table .control-group .help-inline{
-    display: block;
+.table .field-row .field-hint {
     top: 0;
     position: absolute;
     font-size: 11px;
@@ -49,6 +45,7 @@ div:empty{
     -moz-user-select: none;
 }
 .table .form-control{
+    box-sizing: content-box;
     cursor: pointer;
     border: 1px solid transparent;
     box-shadow: none;
@@ -74,12 +71,8 @@ th:nth-child(n+4):nth-child(-n+9) .d-flex{
 .table caption{
     caption-side: bottom
 }
-[v-cloak] { display: none; }
 
-.caret-dark{
-    border-top-color: #212429!important;
-}
-.table-condensed td .form-control[type="text"] {
+.table-sm td .form-control[type="text"] {
     padding-top: .4em;
     padding-bottom: .4em;
 }
@@ -100,14 +93,14 @@ th:nth-child(n+4):nth-child(-n+9) .d-flex{
         font-size: 14px;
         border-radius: 4px;
     }
-    .table-condensed th,
-    .table-condensed td {
+    .table-sm th,
+    .table-sm td {
         padding: 4px 5px;
     }
     .arrow {
         margin-left: 5px;
     }
-    .table-condensed th {
+    .table-sm th {
         font-size: 14px;
         font-weight: bold;
     }
diff --git a/Views/dashboard_list.php b/Views/dashboard_list.php
index f8ba744..aa68b42 100644
--- a/Views/dashboard_list.php
+++ b/Views/dashboard_list.php
@@ -6,69 +6,67 @@
 <?php load_css("Modules/dashboard/Views/dashboard_list.css"); ?>
 
 <div id="app" class="container-fluid" v-cloak>
-    <div class="alert mt-2" :class="{'alert-warning':true}" v-if="gridData.length === 0">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
+    <div class="alert alert-warning mt-2" :class="{'alert-warning':true}" v-if="gridData.length === 0">
+        <button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="Close"></button>
         <h4 class="alert-heading" if="status.title"><?php echo tr('No dashboards created') ?></h4>
         <?php echo tr('Maybe you would like to add your first dashboard using the button below&hellip;') ?>
     </div>
-    <div class="d-flex justify-content-between align-items-center">
+    <div class="page-header">
         <div class="d-flex align-items-center">
             <h3><?php echo tr('Dashboards') ?></h3>
-            <button class="btn btn-light ml-3" @click.prevent="addNew"><?php echo tr('New') ?>  <span class="svg-icon-plus"></span> </button>
+            <button class="btn btn-default ms-3" @click.prevent="addNew"><?php echo tr('New') ?>  <span class="svg-icon-plus"></span> </button>
         </div>
-        <form v-if="gridData.length > 0" id="search" class="form-inline position-relative mb-0">
+        <form v-if="gridData.length > 0" id="search" class="d-flex align-items-center position-relative">
             <div class="form-group">
-                <input id="search-box" name="query" v-model="searchQuery" type="search" class="form-control input-medium mb-0" aria-describedby="searchHelp" placeholder="<?php echo tr('Search') ?>" title="<?php echo tr('Search the data by any column') ?>">
+                <input id="search-box" name="query" v-model="searchQuery" type="search" class="form-control input-165" aria-describedby="searchHelp" placeholder="<?php echo tr('Search') ?>" title="<?php echo tr('Search the data by any column') ?>">
                 <button id="searchclear" @click.prevent="searchQuery = ''"style="right:0" class="btn btn-link position-absolute" :class="{'d-none':searchQuery.length===0}"><span class="svg-icon-close"></span></button>
             </div>
         </form>
     </div>
 
     <!-- Dashboard grid table -->
-    <table v-if="gridData.length > 0" class="table table-sm table-hover table-condensed">
-        <caption v-if="status" class="text-muted muted text-left mt-3">{{ status.title }}</caption>
+    <table v-if="gridData.length > 0" class="table table-sm table-hover">
+        <caption v-if="status" class="text-muted text-start mt-3">{{ status.title }}</caption>
         <thead>
             <tr>
                 <!-- ID Column -->
                 <th :class="{ active: sortKey == 'id' }" @click="sortBy('id')">
-                    <a href="#" class="text-body d-flex align-items-center">
+                    <a href="#" class="d-flex align-items-center">
                         <span>ID</span>
                         <span class="arrow" :class="sortOrders.id > 0 ? 'asc' : 'dsc'"></span>
                     </a>
                 </th>
                 <!-- Name Column -->
                 <th :class="{ active: sortKey == 'name' }" @click="sortBy('name')">
-                    <a href="#" class="text-body d-flex align-items-center pl-2">
+                    <a href="#" class="d-flex align-items-center ps-2">
                         <span>Name</span>
                         <span class="arrow" :class="sortOrders.name > 0 ? 'asc' : 'dsc'"></span>
                     </a>
                 </th>
                 <!-- Alias Column -->
                 <th :class="{ active: sortKey == 'alias' }" @click="sortBy('alias')">
-                    <a href="#" class="text-body d-flex align-items-center pl-2">
+                    <a href="#" class="d-flex align-items-center ps-2">
                         <span>Alias</span>
                         <span class="arrow" :class="sortOrders.alias > 0 ? 'asc' : 'dsc'"></span>
                     </a>
                 </th>
                 <!-- Default Column -->
                 <th :class="{ active: sortKey == 'main' }" @click="sortBy('main')">
-                    <a href="#" class="text-body d-flex align-items-center">
+                    <a href="#" class="d-flex align-items-center">
                         <span>{{ capitalize(translations['default']) }}</span>
                         <span class="arrow" :class="sortOrders.main > 0 ? 'asc' : 'dsc'"></span>
                     </a>
                 </th>
                 <!-- Public Column -->
                 <th :class="{ active: sortKey == 'public' }" @click="sortBy('public')">
-                    <a href="#" class="text-body d-flex align-items-center">
+                    <a href="#" class="d-flex align-items-center">
                         <span>Public</span>
                         <span class="arrow" :class="sortOrders.public > 0 ? 'asc' : 'dsc'"></span>
                     </a>
                 </th>
                 <!-- Published Column -->
                 <th :class="{ active: sortKey == 'published' }" @click="sortBy('published')">
-                    <a href="#" class="text-body d-flex align-items-center">
+                    <a href="#" class="d-flex align-items-center">
                         <span>Published</span>
                         <span class="arrow" :class="sortOrders.published > 0 ? 'asc' : 'dsc'"></span>
                     </a>
@@ -87,39 +85,35 @@
                 
                 <!-- Name Column (Editable) -->
                 <td>
-                    <div class="control-group">
-                        <div class="controls">
-                            <input @input="updateName($event, entry)" 
-                                   :value="entry.name" 
-                                   type="text" 
-                                   class="form-control border-0 m-0" 
-                                   @keyup.enter="$event.target.blur()" 
-                                   :title="'#' + entry.id + ' NAME\n' + translations['Label this dashboard with a name']">
-                            <span class="help-inline d-none d-sm-block text-right"></span>
-                        </div>
+                    <div class="field-row">
+                        <input @input="updateName($event, entry)" 
+                               :value="entry.name" 
+                               type="text" 
+                               class="form-control border-0" 
+                               @keyup.enter="$event.target.blur()" 
+                               :title="'#' + entry.id + ' NAME\n' + translations['Label this dashboard with a name']">
+                        <span class="form-text field-hint mt-0 d-none d-sm-block text-end"></span>
                     </div>
                 </td>
                 
                 <!-- Alias Column (Editable) -->
                 <td>
-                    <div class="control-group">
-                        <div class="controls">
-                            <input @input="updateAlias($event, entry)" 
-                                   :value="entry.alias" 
-                                   type="text" 
-                                   class="form-control border-0 m-0" 
-                                   @keyup.enter="$event.target.blur()" 
-                                   :title="'#' + entry.id + ' ALIAS\n' + translations['Must be unique. Short title to use in URL.\neg roof-solar']">
-                            <span class="help-inline d-none d-sm-block text-right"></span>
-                        </div>
+                    <div class="field-row">
+                        <input @input="updateAlias($event, entry)" 
+                               :value="entry.alias" 
+                               type="text" 
+                               class="form-control border-0" 
+                               @keyup.enter="$event.target.blur()" 
+                               :title="'#' + entry.id + ' ALIAS\n' + translations['Must be unique. Short title to use in URL.\neg roof-solar']">
+                        <span class="form-text field-hint mt-0 d-none d-sm-block text-end"></span>
                     </div>
                 </td>
                 
                 <!-- Default Toggle -->
                 <td>
                     <button @click="toggleMain(entry)"
-                            class="btn btn-sm-md btn-small"
-                            :class="entry.main ? 'btn-primary active' : 'btn-light'"
+                            class="btn btn-sm-md btn-sm"
+                            :class="entry.main ? 'btn-primary active' : 'btn-default'"
                             :title="'#' + entry.id + ' MAIN\n' + translations['Adds a Default Dashboard bookmark in the sidebar.\nAlso visible at dashboard/view']">
                         <span class="svg-icon-star_border"></span>
                     </button>
@@ -128,8 +122,8 @@ class="btn btn-sm-md btn-small"
                 <!-- Public Toggle -->
                 <td>
                     <button @click="togglePublic(entry)"
-                            class="btn btn-sm-md btn-small"
-                            :class="entry.public ? 'btn-primary active' : 'btn-light'"
+                            class="btn btn-sm-md btn-sm"
+                            :class="entry.public ? 'btn-primary active' : 'btn-default'"
                             :title="'#' + entry.id + ' PUBLIC\n' + translations['Allow this Dashboard to be viewed by anyone']">
                         <span class="svg-icon-earth"></span>
                     </button>
@@ -138,8 +132,8 @@ class="btn btn-sm-md btn-small"
                 <!-- Published Toggle -->
                 <td>
                     <button @click="togglePublished(entry)"
-                            class="btn btn-sm-md btn-small"
-                            :class="entry.published ? 'btn-primary active' : 'btn-light'"
+                            class="btn btn-sm-md btn-sm"
+                            :class="entry.published ? 'btn-primary active' : 'btn-default'"
                             :title="'#' + entry.id + ' PUBLISHED\n' + translations['Allow this Dashboard on the menu']">
                         <span class="svg-icon-dashboard"></span>
                     </button>
@@ -148,7 +142,7 @@ class="btn btn-sm-md btn-small"
                 <!-- Clone Button -->
                 <td>
                     <button @click="cloneDashboard(entry)"
-                            class="btn btn-light btn-sm-md btn-small"
+                            class="btn btn-default btn-sm-md btn-sm"
                             :title="'#' + entry.id + ' CLONE\n' + translations['Clone the layout of this dashboard to a new Dashboard']">
                         <span class="svg-icon-content_copy"></span>
                     </button>
@@ -156,7 +150,7 @@ class="btn btn-light btn-sm-md btn-small"
                 
                 <!-- Edit Link -->
                 <td class="d-none d-sm-table-cell">
-                    <a class="btn btn-light btn-sm-md btn-small"
+                    <a class="btn btn-default btn-sm-md btn-sm"
                        :title="'#' + entry.id + ' EDIT\n' + translations['Edit this dashboard layout']"
                        :href="entry.edit">
                         <span class="svg-icon-cog"></span>
@@ -166,7 +160,7 @@ class="btn btn-light btn-sm-md btn-small"
                 <!-- Delete Button -->
                 <td>
                     <button @click="deleteDashboard(entry)"
-                            class="btn btn-light btn-sm-md btn-small"
+                            class="btn btn-default btn-sm-md btn-sm"
                             :title="'#' + entry.id + ' DELETE\n' + translations['Delete this dashboard']">
                         <span class="svg-icon-bin"></span>
                     </button>
@@ -174,7 +168,7 @@ class="btn btn-light btn-sm-md btn-small"
                 
                 <!-- View Link -->
                 <td class="d-none d-sm-table-cell">
-                    <a class="btn btn-light btn-sm-md btn-small"
+                    <a class="btn btn-default btn-sm-md btn-sm"
                        :title="'#' + entry.id + ' VIEW\n' + translations['View this dashboard']"
                        :href="entry.view">
                         <span class="svg-icon-arrow_forward"></span>
@@ -333,23 +327,26 @@ function getTranslations(){
 
             // Input field feedback helper
             showInputFeedback: function(input, message, type = 'success') {
-                const container = input.parentNode.parentNode;
-                const feedback = input.parentNode.querySelector('.help-inline');
-                if (feedback) {
-                    // Reset classes
-                    container.classList.remove('success', 'error', 'warning');
+                const feedback = input.parentNode.querySelector('.field-hint');
+                const colours = { success: 'text-success', error: 'text-danger', warning: 'text-warning' };
+                const clear = () => {
+                    input.classList.remove('is-invalid');
+                    feedback.classList.remove('text-success', 'text-danger', 'text-warning');
                     feedback.innerText = '';
+                };
+                if (feedback) {
+                    clear();
                     
                     // Add feedback
                     if (message) {
-                        container.classList.add(type);
+                        if (type === 'error') input.classList.add('is-invalid');
+                        feedback.classList.add(colours[type]);
                         feedback.innerText = message;
                         feedback.classList.add('fade');
                         
                         // Auto-clear after delay
                         setTimeout(() => {
-                            container.classList.remove('success', 'error', 'warning');
-                            feedback.innerText = '';
+                            clear();
                             feedback.classList.remove('fade');
                         }, this.wait * 2.3);
                     }
diff --git a/Views/dashboard_view.php b/Views/dashboard_view.php
index 6868c8e..a6b6c19 100644
--- a/Views/dashboard_view.php
+++ b/Views/dashboard_view.php
@@ -56,7 +56,7 @@
     ?>
     <?php require_once "Modules/dashboard/Views/loadwidgets.php"; ?>
 <h2 class="d-none"><?php echo htmlspecialchars($dashboard['name'], ENT_QUOTES, 'UTF-8'); ?></h2>
-<div id="editicon" class="hidden-phone">
+<div id="editicon" class="d-none d-md-block">
     <div id="innerbutton" style="cursor: default">
         <?php echo $dashboard_editor_icon; ?>
     </div>
diff --git a/Views/dashboardeditor.css b/Views/dashboardeditor.css
index cda9609..cf7606c 100644
--- a/Views/dashboardeditor.css
+++ b/Views/dashboardeditor.css
@@ -9,34 +9,6 @@ http://openenergymonitor.org
 
 */
  
-.dropdown-menu-toolbox {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  display: none;
-  float: left;
-  min-width: 160px;
-  padding: 5px 0;
-  margin: 2px 0 0;
-  list-style: none;
-  background-color: #ffffff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  *border-right-width: 2px;
-  *border-bottom-width: 2px;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box;
-}
-
-
 .scrollable-menu {
   height: auto;
   max-height: 250px;
@@ -60,6 +32,11 @@ http://openenergymonitor.org
   background: rgba(0, 0, 0, 0.5);
 }
 
+/* Widget group buttons open a menu, without the Bootstrap 5 caret */
+.widgetmenu.dropdown-toggle::after {
+  display: none;
+}
+
 /* Toolbox button for a widget waiting to be placed on the canvas */
 .widgetmenu.active {
   background-color: #dff0d8;
diff --git a/Views/js/chart.helper.css b/Views/js/chart.helper.css
index 1f53594..290c422 100644
--- a/Views/js/chart.helper.css
+++ b/Views/js/chart.helper.css
@@ -45,6 +45,7 @@
    panel the width of its text to read against them. A handle at its left
    edge slides the text away and back. */
 .chart-widget .chart-readout-bottom {
+    box-sizing: content-box;
     bottom: 4px; right: auto; max-width: calc(100% - 20px);
     display: flex; align-items: center;
     padding: 1px 6px 1px 0; border-radius: 3px;
diff --git a/Views/js/chart.helper.js b/Views/js/chart.helper.js
index e0bd949..edbe0f6 100644
--- a/Views/js/chart.helper.js
+++ b/Views/js/chart.helper.js
@@ -361,7 +361,7 @@ function chart_frame(element){
 
 // A button in a bar, or in a group inside one.
 function chart_button(group, label, title, handler){
-    var button = $('<button type="button" class="btn btn-small"></button>')
+    var button = $('<button type="button" class="btn btn-default btn-sm"></button>')
     .attr("title", title || label).html(label);
     button.click(handler);
     group.append(button);
diff --git a/Views/js/designer.js b/Views/js/designer.js
index 6c57567..d31dba9 100644
--- a/Views/js/designer.js
+++ b/Views/js/designer.js
@@ -567,7 +567,7 @@ var designer = {
         var title = widgets[widget]["title"] ? widgets[widget]["title"] : widget;
         $("#myModalLabel").text(_Tr("Configure") + " " + String(title).toLowerCase());
         if (widgets[widget]["description"]) {
-            options_html += '<p class="muted" style="font-size:12px;">'+designer_escape(widgets[widget]["description"])+"</p>";
+            options_html += '<p class="text-muted" style="font-size:12px;">'+designer_escape(widgets[widget]["description"])+"</p>";
         }
 
         // A widget whose settings do not fit in attributes holds them in one
@@ -577,10 +577,10 @@ var designer = {
         // before the options, which are the less used part of the form.
         if (widgets[widget]["config"]) {
             var config_value = selected_widget.config ? JSON.stringify(selected_widget.config) : "";
-            options_html += '<div class="control-group"><div class="controls">';
+            options_html += '<div class="option-row mb-2">';
             options_html += '<input type="hidden" class="options" id="config" value="'+designer_escape(config_value)+'">';
             options_html += '<div id="widget-config-editor"></div>';
-            options_html += "</div></div>";
+            options_html += "</div>";
             options_html += '<hr style="margin:10px 0;">';
         }
 
@@ -594,9 +594,9 @@ var designer = {
 
             if (val == undefined) val="";
 
-            options_html += '<div class="control-group"><div class="controls">';
-            options_html += '<div class="input-prepend" style="margin-bottom: 0px;">';
-            options_html += '<span class="add-on" style="width:100px; text-align: right; font-size:12px;">'+options_name[z]+"</span>";
+            options_html += '<div class="option-row mb-2">';
+            options_html += '<div class="input-group">';
+            options_html += '<span class="input-group-text justify-content-end" style="width:100px; box-sizing:content-box; text-align: right; font-size:12px;">'+options_name[z]+"</span>";
 
             // all feeds
 
@@ -606,18 +606,18 @@ var designer = {
 
             else if (options_type && options_type[z] == "html"){
                 val = selected_widget.html || "";
-                options_html += "<textarea class='options' id='"+box_options[z]+"' >"+designer_escape(val)+"</textarea>";
+                options_html += "<textarea class='options form-control input-220' id='"+box_options[z]+"' >"+designer_escape(val)+"</textarea>";
             }
 
             // Body of a text widget
             else if (options_type && options_type[z] == "text"){
                 val = selected_widget.text || "";
-                options_html += "<textarea class='options' id='"+box_options[z]+"' >"+designer_escape(val)+"</textarea>";
+                options_html += "<textarea class='options form-control input-220' id='"+box_options[z]+"' >"+designer_escape(val)+"</textarea>";
             }
 
             else if (options_type && options_type[z] == "number"){
                 var range = optionsdata && optionsdata[z] ? optionsdata[z] : {};
-                options_html += "<input class='options' id='"+box_options[z]+"' type='number'";
+                options_html += "<input class='options form-control input-220' id='"+box_options[z]+"' type='number'";
                 if (range.min !== undefined) options_html += " min='"+range.min+"'";
                 if (range.max !== undefined) options_html += " max='"+range.max+"'";
                 options_html += " value='"+designer_escape(val)+"'/ >";
@@ -625,7 +625,7 @@ var designer = {
 
             // Combobox for selecting options
             else if (options_type && options_type[z] == "dropbox" && optionsdata && optionsdata[z]){  // Check we have optionsdata before deciding to draw a combobox
-                options_html += "<select id='"+box_options[z]+"' class='options' >";
+                options_html += "<select id='"+box_options[z]+"' class='options form-select input-220' >";
                 for (var i in optionsdata[z])
                 {
                     var selected = "";
@@ -637,7 +637,7 @@ var designer = {
             }
             // Combobox for selecting options with "other" option
             else if (options_type && options_type[z] == "dropbox_other" && optionsdata && optionsdata[z]){  // Check we have optionsdata before deciding to draw a combobox
-                options_html += '<select id="' + box_options[z] + '_dropdown" class="options select-with-other">';
+                options_html += '<select id="' + box_options[z] + '_dropdown" class="options select-with-other form-select input-220">';
                 options_html += "<option value=''></option>";
                 var values = [];
                 for (var i in optionsdata[z])
@@ -655,12 +655,12 @@ var designer = {
                     other_selected = "selected";
                 }
 
-                var other_hidden = other_selected !== "selected" ? "hidden" : "";
+                var other_hidden = other_selected !== "selected" ? "hide" : "";
                 options_html += "<option " + other_selected + " value='__other'>"+_Tr("Other")+"</option>";
                 options_html += "</select>";
                 options_html += "</div>";
-                options_html += '<div class="input-prepend ' + other_hidden + ' other"><span class="add-on" style="width:100px; text-align: right; font-size:12px;background: none;border: none;margin-right: 1px;">' + _Tr("Other") + "</span>";
-                options_html += '<input id="' + box_options[z] + '" type="text" value="' + designer_escape(val) + '" data-last-value="' + designer_escape(val) + '" class="options input-is-other" style="border-radius:0 0 4px 4px;border-top:none">';
+                options_html += '<div class="input-group ' + other_hidden + ' other"><span class="input-group-text justify-content-end" style="width:100px; box-sizing:content-box; text-align: right; font-size:12px;background: none;border: none;margin-right: 1px;">' + _Tr("Other") + "</span>";
+                options_html += '<input id="' + box_options[z] + '" type="text" value="' + designer_escape(val) + '" data-last-value="' + designer_escape(val) + '" class="options input-is-other form-control input-220" style="border-radius:0 0 4px 4px;border-top:none">';
             }
 
             else if (options_type && options_type[z] == "colour_picker"){
@@ -672,8 +672,8 @@ var designer = {
                 if (optionsdata && optionsdata[z]!=undefined && val=="") {
                     val = optionsdata[z];
                 }
-                options_html += "<input  type='color' class='options' id='"+box_options[z]+"'  value='#"+designer_escape(val)+"'/ >";
-                options_html += " <label class='checkbox inline' style='margin-left:8px'><input type='checkbox' class='colour-none' data-for='"+box_options[z]+"'"+(none ? " checked" : "")+"> "+_Tr("None")+"</label>";
+                options_html += "<input type='color' class='options form-control form-control-color input-220' id='"+box_options[z]+"'  value='#"+designer_escape(val)+"'/ >";
+                options_html += " <label class='d-inline-block me-2 align-self-center' style='margin-left:8px'><input type='checkbox' class='colour-none' data-for='"+box_options[z]+"'"+(none ? " checked" : "")+"> "+_Tr("None")+"</label>";
             }
 
             else if (options_type && options_type[z] == "boolean"){
@@ -684,7 +684,7 @@ var designer = {
                 if ((val == undefined || val == "") && optionsdata && optionsdata[z] != undefined) {
                     val = optionsdata[z];
                 }
-                options_html += "<select class='options' id='"+box_options[z]+"'>";
+                options_html += "<select class='options form-select input-220' id='"+box_options[z]+"'>";
                 options_html += "<option value='0'" + (val == 0 ? " selected" : "") + ">"+_Tr("Off")+"</option>";
                 options_html += "<option value='1'" + (val == 1 ? " selected" : "") + ">"+_Tr("On")+"</option>";
                 options_html += "</select>";
@@ -692,27 +692,27 @@ var designer = {
 
 
             else{
-                options_html += "<input class='options' id='"+box_options[z]+"' type='text' value='"+designer_escape(val)+"'/ >";
+                options_html += "<input class='options form-control input-220' id='"+box_options[z]+"' type='text' value='"+designer_escape(val)+"'/ >";
             }
 
             options_html += "</div>";
-            options_html += '<span class="help-inline"><small class="muted">'+optionshint[z]+"</small></span>";
-            options_html +="</div></div>";
+            options_html += '<span class="option-hint form-text d-inline-block align-middle ms-1 mt-0">'+optionshint[z]+"</span>";
+            options_html +="</div>";
 
         }
 
         // Generic sizing options for all widgets (an hack so we dont add new options to all widgets)
         var selPixel = (designer.boxlist[selected_box]["styleUnitWidth"] == 0 ? "selected" : "");
         var selPercent = (designer.boxlist[selected_box]["styleUnitWidth"] == 1 ? "selected" : "");
-        options_html += '<div class="control-group"><div class="controls"><div style="margin-bottom: 0px;" class="input-prepend"><span style="width:100px; text-align: right; font-size:12px;" class="add-on">'+_Tr("Width")+"</span>";
-        options_html += '<select class="options" id="styleUnitWidth"><option value="0" '+selPixel+">"+_Tr("Pixels")+'</option><option value="1" '+selPercent+">"+_Tr("Percentage")+"</option></select>";
-        options_html += '</div><span class="help-inline"><small class="muted">'+_Tr("Choose width unit")+"</small></span></div></div>";
+        options_html += '<div class="option-row mb-2"><div class="input-group"><span style="width:100px; box-sizing:content-box; text-align: right; font-size:12px;" class="input-group-text justify-content-end">'+_Tr("Width")+"</span>";
+        options_html += '<select class="options form-select input-220" id="styleUnitWidth"><option value="0" '+selPixel+">"+_Tr("Pixels")+'</option><option value="1" '+selPercent+">"+_Tr("Percentage")+"</option></select>";
+        options_html += '</div><span class="option-hint form-text d-inline-block align-middle ms-1 mt-0">'+_Tr("Choose width unit")+"</span></div>";
 
         var selPixel = (designer.boxlist[selected_box]["styleUnitHeight"] == 0 ? "selected" : "");
         var selPercent = (designer.boxlist[selected_box]["styleUnitHeight"] == 1 ? "selected" : "");
-        options_html += '<div class="control-group"><div class="controls"><div style="margin-bottom: 0px;" class="input-prepend"><span style="width:100px; text-align: right; font-size:12px;" class="add-on">'+_Tr("Height")+"</span>";
-        options_html += '<select class="options" id="styleUnitHeight"><option value="0" '+selPixel+">"+_Tr("Pixels")+'</option><option value="1" '+selPercent+">"+_Tr("Percentage")+"</option></select>";
-        options_html += '</div><span class="help-inline"><small class="muted">'+_Tr("Choose height unit")+"</small></span></div></div>";
+        options_html += '<div class="option-row mb-2"><div class="input-group"><span style="width:100px; box-sizing:content-box; text-align: right; font-size:12px;" class="input-group-text justify-content-end">'+_Tr("Height")+"</span>";
+        options_html += '<select class="options form-select input-220" id="styleUnitHeight"><option value="0" '+selPixel+">"+_Tr("Pixels")+'</option><option value="1" '+selPercent+">"+_Tr("Percentage")+"</option></select>";
+        options_html += '</div><span class="option-hint form-text d-inline-block align-middle ms-1 mt-0">'+_Tr("Choose height unit")+"</span></div>";
 
         // A widget with a config may put settings of its own under the
         // options too, rows that belong with them rather than with its form.
@@ -758,20 +758,36 @@ var designer = {
                 feedgroups[group].push(feedlist[f]);
             }
         }
-        var out = "<select id='"+id+"' class='options'>";
+        // A stored value may be a feed id or a tag:name pair whatever the
+        // feed mode, so either form selects the feed. The stored value is
+        // kept as the option value until another feed is picked.
+        var current = (currentval === undefined || currentval === null) ? "" : String(currentval);
+        var found = false;
+        var options = "";
         for (var f in feedgroups){
-            out += "<optgroup label='"+designer_escape(f)+"'>";
+            options += "<optgroup label='"+designer_escape(f)+"'>";
             for (var p in feedgroups[f]) {
-                var feedref = feedgroups[f][p]["id"];
-                if (designer.feedmode=="tagname") feedref = feedgroups[f][p]["tag"]+":"+feedgroups[f][p]["name"];
+                var feed = feedgroups[f][p];
+                var feedref = feed["id"];
+                if (designer.feedmode=="tagname") feedref = feed["tag"]+":"+feed["name"];
                 var selected = "";
-                if (currentval == feedref)
-                selected = "selected";
-                out += "<option value='"+designer_escape(feedref)+"' "+selected+">"+designer_escape(feedgroups[f][p].name)+"</option>";
+                if (!found && current !== "" && (current == feed["id"] || current == feed["tag"]+":"+feed["name"])) {
+                    selected = "selected";
+                    feedref = current;
+                    found = true;
+                }
+                options += "<option value='"+designer_escape(feedref)+"' "+selected+">"+designer_escape(feed.name)+"</option>";
             }
-            out += "</optgroup>";
+            options += "</optgroup>";
+        }
+        var out = "<select id='"+id+"' class='options form-select input-220'>";
+        // A value that names no feed, or no value, is kept on save rather than
+        // replaced by the first feed in the list.
+        if (!found) {
+            var label = current === "" ? "" : current + " (" + _Tr("not found") + ")";
+            out += "<option value='"+designer_escape(current)+"' selected>"+designer_escape(label)+"</option>";
         }
-        out += "</select>";
+        out += options + "</select>";
         return out;
     },
 
@@ -799,16 +815,16 @@ var designer = {
             var icon = "<img src='../Modules/dashboard/Views/icons/"+z+".png'>";
             if (select[z].length == 1) {
                 // A menu with one widget is a plain button that adds it
-                widget_html += "<div class='widgetbuttons' style='display: inline-block; '><button data-widget='"+select[z][0]+"' class='btn widgetmenu widget-button' style='width:62px; padding:4px;' title='"+title+"'>"+icon+"</button></div>";
+                widget_html += "<div class='widgetbuttons' style='display: inline-block; '><button data-widget='"+select[z][0]+"' class='btn btn-default widgetmenu widget-button' style='width:62px; padding:4px;' title='"+title+"'>"+icon+"</button></div>";
                 continue;
             }
             var items = "";
-            for (var i in select[z]) items += "<li><a data-widget='"+select[z][i]+"' class='widget-button'>"+select[z][i]+"</a></li>";
-            widget_html += "<div class='widgetbuttons' style='display: inline-block; '><button class='btn dropdown-toggle widgetmenu' data-toggle='dropdown' style='width:62px; padding:4px;' title='"+title+"'>"+icon+"<span class='caret'></span></button>";
+            for (var i in select[z]) items += "<li><a data-widget='"+select[z][i]+"' class='dropdown-item widget-button'>"+select[z][i]+"</a></li>";
+            widget_html += "<div class='widgetbuttons' style='display: inline-block; '><button class='btn btn-default dropdown-toggle widgetmenu' data-bs-toggle='dropdown' style='width:62px; padding:4px;' title='"+title+"'>"+icon+"</button>";
             widget_html += "<ul class='dropdown-menu scrollable-menu' style='min-width: auto; padding: 0px; text-align:left; top:initial' name='d'>"+items+"</ul></div>";
         }
         // Blank button so the toolbox rows are even
-        widget_html += "<div class='widgetbuttons' style='display: inline-block; '><button class='btn widgetmenu' disabled style='width:62px; padding:4px; visibility:hidden;'><img src='../Modules/dashboard/Views/icons/Text.png'></button></div>";
+        widget_html += "<div class='widgetbuttons' style='display: inline-block; '><button class='btn btn-default widgetmenu' disabled style='width:62px; padding:4px; visibility:hidden;'><img src='../Modules/dashboard/Views/icons/Text.png'></button></div>";
         $("#widget-buttons").html(widget_html);
 
         $(".widget-button").click(function(event) {
@@ -894,8 +910,8 @@ var designer = {
     // reports a problem.
     "check_option": function(field){
         var rule = designer.option_rules[field.attr("id")];
-        var group = field.closest(".control-group");
-        var help = group.find(".help-inline").first();
+        var group = field.closest(".option-row");
+        var help = group.find(".option-hint").first();
 
         if (help.data("hint") === undefined) help.data("hint", help.html());
 
@@ -909,11 +925,11 @@ var designer = {
             problem = designer.option_problem(rule, field.val());
         }
         if (problem === ""){
-            group.removeClass("error");
-            help.html(help.data("hint"));
+            group.find(".options").removeClass("is-invalid");
+            help.removeClass("text-danger").html(help.data("hint"));
         } else {
-            group.addClass("error");
-            help.html("<small>" + problem + "</small>");
+            field.addClass("is-invalid");
+            help.addClass("text-danger").html(problem);
         }
 
         designer.update_options_save();
@@ -922,7 +938,7 @@ var designer = {
     // Save is disabled while any field has an error. Cancel still closes the
     // panel.
     "update_options_save": function(){
-        var bad = $("#widget_options_body").find(".control-group.error").length;
+        var bad = $("#widget_options_body").find(".option-row").has(".is-invalid").length;
         $("#options-save").prop("disabled", bad > 0);
         $("#options-problem").text(bad === 0 ? ""
             : bad + " " + (bad === 1 ? _Tr("error found, fix to save")
@@ -1571,7 +1587,7 @@ var designer = {
                 $("#widget_options_body").find(".options").each(function(){
                         designer.check_option($(this));
                     });
-                var first_bad = $("#widget_options_body").find(".control-group.error").first();
+                var first_bad = $("#widget_options_body").find(".option-row").has(".is-invalid").first();
                 if (first_bad.length) {
                     first_bad.find(".options").first().focus();
                     return;
@@ -1727,12 +1743,12 @@ var designer = {
                 var last_val = input.data("last-value");
                 // if user selected "Other" option, show text box
                 if (select.val() === "__other") {
-                    other.removeClass("hidden");
+                    other.removeClass("hide");
                     if (last_val) input.val(last_val);
                     input.focus();
                 } else {
                     input.val(select.val());
-                    other.addClass("hidden");
+                    other.addClass("hide");
                 }
             });
     }
diff --git a/Views/js/render.js b/Views/js/render.js
index 8a35d15..dd69e8f 100644
--- a/Views/js/render.js
+++ b/Views/js/render.js
@@ -43,7 +43,11 @@ var render_feeds = {
         var key = feed === undefined || feed === null ? "" : String(feed);
         if (key === "") return "";
         if (render_assoc[key] !== undefined) return String(render_assoc[key]);
-        return key;
+        // A tag:name pair that the poll has not resolved is not an id. Widgets
+        // mount before the first poll answers.
+        var trimmed = key.trim();
+        if (!/^\d+$/.test(trimmed)) return "";
+        return trimmed;
     },
 
     // Feed's row from the poll, or null.
diff --git a/Views/js/widget.css b/Views/js/widget.css
index 4b152d2..dd9db07 100644
--- a/Views/js/widget.css
+++ b/Views/js/widget.css
@@ -101,6 +101,7 @@
 }
 
 .image-empty {
+  box-sizing: content-box;
   width: 100%;
   height: 100%;
   display: flex;
@@ -116,12 +117,12 @@
   color: #b94a48;
 }
 
-/* Options modal for a widget that holds a config. Bootstrap fixes a modal at
+/* Options modal for a widget that holds a config. The theme sets a modal at
    560px, which is enough for a table of options and not for a form beside it.
    The wide modal takes 900px and most of the height of the window, and folds
    back to the width of the screen on a narrow one. */
-#widget_options.modal-wide { width: 900px; margin-left: -450px; }
+#widget_options.modal-wide { --bs-modal-width: 900px; }
 #widget_options.modal-wide .modal-body { max-height: 70vh; }
 @media (max-width: 940px) {
-    #widget_options.modal-wide { width: auto; left: 10px; right: 10px; margin-left: 0; }
+    #widget_options.modal-wide .modal-dialog { max-width: none; margin: 20px 10px; }
 }
diff --git a/module.json b/module.json
index c6874c2..cd22795 100644
--- a/module.json
+++ b/module.json
@@ -1,6 +1,6 @@
 {
     "name"         : "Dashboard",
-    "version"      : "4.1.4",
+    "version"      : "4.2.0",
     "location"     : "/var/www/emoncms/Modules",
     "branches_available": ["stable","master"]
 }