diff --git a/app/resources/locales/en_US/menu.po b/app/resources/locales/en_US/menu.po
index 2512352b0..60bdcfedc 100644
--- a/app/resources/locales/en_US/menu.po
+++ b/app/resources/locales/en_US/menu.po
@@ -165,14 +165,26 @@ msgstr "Advanced Menu"
 msgid "menu.darkmode"
 msgstr "Dark mode"
 
+msgid "menu.darkmode.auto"
+msgstr "auto"
+
+msgid "menu.darkmode.dark"
+msgstr "dark"
+
+msgid "menu.darkmode.light"
+msgstr "light"
+
+msgid "menu.density"
+msgstr "Density"
+
 msgid "menu.density.small"
-msgstr "Density small"
+msgstr "small"
 
 msgid "menu.density.medium"
-msgstr "Density medium"
+msgstr "medium"
 
 msgid "menu.density.large"
-msgstr "Density large"
+msgstr "large"
 
 msgid "menu.introduction"
 msgstr "Please select an action from the menu."
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
index 93a112a24..b9f31c759 100644
--- a/app/src/View/Helper/FieldHelper.php
+++ b/app/src/View/Helper/FieldHelper.php
@@ -461,7 +461,7 @@ protected function formNameDiv(string $fieldName, string $labelText=null, string
          . '<span class="visually-hidden">' . __d('field','required') . '</span>' 
          : '') . '
       </div>
-      ' . ($desc ? '<span class="field-desc">' . $desc . '</span>' : "") .'
+      ' . ($desc ? '<div class="field-desc">' . $desc . '</div>' : "") .'
     </div>';
   }
   
@@ -509,7 +509,7 @@ public function statusControl(string $fieldName,
      
     return $this->startLine()
            . $this->formNameDiv($fieldName, $labelText, 'string', $labelIsTextOnly)
-           . $linkHtml
+           . $this->formInfoDiv($linkHtml)
            . $this->endLine();
   }
   
diff --git a/app/templates/ApiUsers/fields.inc b/app/templates/ApiUsers/fields.inc
index f2c9682cc..2c3887e6e 100644
--- a/app/templates/ApiUsers/fields.inc
+++ b/app/templates/ApiUsers/fields.inc
@@ -46,7 +46,7 @@ if($vv_action == 'add' || $vv_action == 'edit') {
         $vv_obj->id
       ],
      'label' => __d('operation', 'api.key.generate'),
-     'class' => 'provisionbutton nospin',
+     'class' => 'provisionbutton nospin btn btn-primary btn-sm',
      'confirm' => __d('operation', 'api.key.generate.confirm')
     ];
     
diff --git a/app/templates/Standard/index.php b/app/templates/Standard/index.php
index 6725109f6..216ef4c81 100644
--- a/app/templates/Standard/index.php
+++ b/app/templates/Standard/index.php
@@ -178,15 +178,25 @@
   <table id="<?= $tableName . '-table'; ?>" class="<?= $indexTableClasses; ?>">
     <thead>
       <tr>
-        <?php if(!empty($rowActions)): ?>
-          <td class="actions"></td>
-        <?php endif; ?>
         <?php
-          // The first heading will get the bulk select all checkbox.
+          // The first heading will get the bulk select all checkbox
+          // and will contain extra padding when row actions are present.
           $firstHeading = true;
         ?>
         <?php foreach($indexColumns as $col => $cfg): ?>
-          <th<?= !empty($cfg['cssClass']) ? ' class="' . $cfg['cssClass'] . '"' : ''; ?>>
+          <?php
+            $headingClass = '';
+            if(!empty($cfg['cssClass'])) {
+              $headingClass = $cfg['cssClass'];
+            }
+            if($firstHeading && !empty($rowActions)) {
+              if(!empty($headingClass)) {
+                $headingClass .= ' ';
+              }
+              $headingClass .= 'with-field-actions';
+            }
+          ?>
+          <th<?= !empty($headingClass) ? ' class="' . $headingClass . '"' : ''; ?>>
             <?php
             if($firstHeading) {
               print '<span class="row-link-heading">';
@@ -208,134 +218,134 @@
               print '</span>';
             }
             ?>
-            <?php if($firstHeading): ?>
+            <?php if($firstHeading && !empty($bulkActions)): ?>
               <div class="form-check bulk-action-checkbox-container">
                 <input class="form-check-input" type="checkbox" value="" id="bulk-action-select-all">
                 <label class="form-check-label" for="bulk-action-select-all">
                   <?= $label; ?>
                 </label>
               </div>
-              <?php
-              // The first heading has been used.
-              $firstHeading = false;
-              ?>
             <?php endif; ?>
           </th>
+          <?php
+            $firstHeading = false;
+          ?>
         <?php endforeach; ?>
       </tr>
     </thead>
     <tbody>
     <?php foreach($$tableName as $entity): ?>
       <tr>
-      <?php if(!empty($rowActions)): ?>
-      <?php
-        // Action list for command menu dropdown / button listing
-        $action_args = array();
-        $action_args['vv_attr_id'] =  $entity->id;
-        
-        // Insert actions as per the .inc file
-        // TODO: create an element or move this to MenuHelper so it can be used by topLinks as well as actions
-        $actionOrderDefault = $this->Menu->getMenuOrder('Default');
-        foreach($rowActions as $a) {
-          $ok = false;
-          if(!empty($a['controller'])) {
-            $tableName = Inflector::camelize($a['controller']);
-
-            if(isset($vv_permission_set[$entity->id][$tableName][ $a['action'] ])) {
-              $ok = $vv_permission_set[$entity->id][$tableName][ $a['action'] ];
-            }
-          } else {
-            $ok = $vv_permission_set[$entity->id][ $a['action'] ];
-          }
-
-          if($ok && !empty($a['if'])) {
-            // If there's a conditional on the field, test the entity
-            $f = $a['if'];
-
-            $ok = $entity->$f();
-          }
-
-          if($ok) {
-            $actionOrder = !empty($a['order']) ? $a['order'] : $actionOrderDefault++;
-            $actionIcon = !empty($a['icon']) ? $a['icon'] : $this->Menu->getMenuIcon('Default');
-            $actionIconClass = !empty($a['iconClass']) ? $a['iconClass'] : '';
-            $actionClass = !empty($a['class']) ? $a['class'] : '';
-            $actionUrl = ['action' => $a['action'], $entity->id];
-            $actionLabel = !empty($a['label']) ? $a['label'] : __d('operation', $a['action']);
-
+      <?php 
+        if(!empty($rowActions)) {
+          // Action list for command menu dropdown / button listing
+          $action_args = array();
+          $action_args['vv_attr_id'] = $entity->id;
+  
+          // Insert actions as per the .inc file
+          // TODO: create an element or move this to MenuHelper so it can be used by topLinks as well as actions
+          $actionOrderDefault = $this->Menu->getMenuOrder('Default');
+          foreach ($rowActions as $a) {
+            $ok = false;
             if (!empty($a['controller'])) {
-              // We're linking into a related controller
-              $actionLabel = !empty($a['label']) ? $a['label'] : __d('controller', Inflector::camelize(Inflector::pluralize($a['controller'])), [99]);
-              $actionUrl = [
-                'controller' => $a['controller'],
-                'action' => $a['action'],
-                '?' => [$tableFK => $entity->id]
-              ];
-            }
-
-            // Generate the link text and urls:
-            
-            if(!empty($a['confirm'])) {
-              // Gather the default confirmation body text. By convention this is named
-              // [action].confirm in the operation.po file but can be overridden in the actions array.
-              $confirmKey = $a['action'].'.confirm';
-              $confirmTxt = __d('operation', $confirmKey, [$entity->id]);
-
-              // Gather the dialog text - we need to expand these (here) so we can provide the default confirmTxt when appropriate
-              $dialogBodyText = !empty($a['confirm']['dg_body_txt']) ? $a['confirm']['dg_body_txt'] : $confirmTxt;
-              $dialogTitle = !empty($a['confirm']['dg_title']) ? $a['confirm']['dg_title'] : $actionLabel;
-              $confirmButtonText = !empty($a['confirm']['dg_confirm_btn']) ? $a['confirm']['dg_confirm_btn'] : __d('operation','confirm');
-              $cancelButtonText = !empty($a['confirm']['dg_cancel_btn']) ? $a['confirm']['dg_cancel_btn'] : __d('operation','cancel');
-              $replacements = !empty($a['confirm']['dg_body_txt_replacements']) ? $a['confirm']['dg_body_txt_replacements'] : '';
-              
-              $action_args['vv_actions'][] = array(
-                'order' => $actionOrder,
-                'icon' =>  $actionIcon,
-                'iconClass' => $actionIconClass,
-                'url' => $actionUrl,
-                'label' => $actionLabel,
-                'class' => !empty($actionClass) ? $actionClass . ' nospin' : 'nospin',
-                'confirm' => [
-                  'dg_title' => $dialogTitle,
-                  'dg_body_txt' => $dialogBodyText,
-                  'dg_confirm_btn' => $confirmButtonText,
-                  'dg_cancel_btn' => $cancelButtonText,
-                  'dg_body_txt_replacements' => $replacements
-                ]
-              );
+              $tableName = Inflector::camelize($a['controller']);
+  
+              if (isset($vv_permission_set[$entity->id][$tableName][$a['action']])) {
+                $ok = $vv_permission_set[$entity->id][$tableName][$a['action']];
+              }
             } else {
-              // Set the action link configuration
-              $action_args['vv_actions'][] = array(
-                'order' => $actionOrder,
-                'icon' => $actionIcon,
-                'iconClass' => $actionIconClass,
-                'url' => $actionUrl,
-                'label' => $actionLabel,
-                'class' => $actionClass
-              );
+              $ok = $vv_permission_set[$entity->id][$a['action']];
+            }
+  
+            if ($ok && !empty($a['if'])) {
+              // If there's a conditional on the field, test the entity
+              $f = $a['if'];
+  
+              $ok = $entity->$f();
+            }
+  
+            if ($ok) {
+              $actionOrder = !empty($a['order']) ? $a['order'] : $actionOrderDefault++;
+              $actionIcon = !empty($a['icon']) ? $a['icon'] : $this->Menu->getMenuIcon('Default');
+              $actionIconClass = !empty($a['iconClass']) ? $a['iconClass'] : '';
+              $actionClass = !empty($a['class']) ? $a['class'] : '';
+              $actionUrl = ['action' => $a['action'], $entity->id];
+              $actionLabel = !empty($a['label']) ? $a['label'] : __d('operation', $a['action']);
+  
+              if (!empty($a['controller'])) {
+                // We're linking into a related controller
+                $actionLabel = !empty($a['label']) ? $a['label'] : __d('controller', Inflector::camelize(Inflector::pluralize($a['controller'])), [99]);
+                $actionUrl = [
+                  'controller' => $a['controller'],
+                  'action' => $a['action'],
+                  '?' => [$tableFK => $entity->id]
+                ];
+              }
+  
+              // Generate the link text and urls:
+  
+              if (!empty($a['confirm'])) {
+                // Gather the default confirmation body text. By convention this is named
+                // [action].confirm in the operation.po file but can be overridden in the actions array.
+                $confirmKey = $a['action'] . '.confirm';
+                $confirmTxt = __d('operation', $confirmKey, [$entity->id]);
+  
+                // Gather the dialog text - we need to expand these (here) so we can provide the default confirmTxt when appropriate
+                $dialogBodyText = !empty($a['confirm']['dg_body_txt']) ? $a['confirm']['dg_body_txt'] : $confirmTxt;
+                $dialogTitle = !empty($a['confirm']['dg_title']) ? $a['confirm']['dg_title'] : $actionLabel;
+                $confirmButtonText = !empty($a['confirm']['dg_confirm_btn']) ? $a['confirm']['dg_confirm_btn'] : __d('operation', 'confirm');
+                $cancelButtonText = !empty($a['confirm']['dg_cancel_btn']) ? $a['confirm']['dg_cancel_btn'] : __d('operation', 'cancel');
+                $replacements = !empty($a['confirm']['dg_body_txt_replacements']) ? $a['confirm']['dg_body_txt_replacements'] : '';
+  
+                $action_args['vv_actions'][] = array(
+                  'order' => $actionOrder,
+                  'icon' => $actionIcon,
+                  'iconClass' => $actionIconClass,
+                  'url' => $actionUrl,
+                  'label' => $actionLabel,
+                  'class' => !empty($actionClass) ? $actionClass . ' nospin' : 'nospin',
+                  'confirm' => [
+                    'dg_title' => $dialogTitle,
+                    'dg_body_txt' => $dialogBodyText,
+                    'dg_confirm_btn' => $confirmButtonText,
+                    'dg_cancel_btn' => $cancelButtonText,
+                    'dg_body_txt_replacements' => $replacements
+                  ]
+                );
+              } else {
+                // Set the action link configuration
+                $action_args['vv_actions'][] = array(
+                  'order' => $actionOrder,
+                  'icon' => $actionIcon,
+                  'iconClass' => $actionIconClass,
+                  'url' => $actionUrl,
+                  'label' => $actionLabel,
+                  'class' => $actionClass
+                );
+              }
             }
           }
         }
-
-        ?>  
-      
-        <td class="actions">
-          <div class="field-actions">
-            <?php if(!empty($action_args['vv_actions'])): ?>
-              <?= $this->element('menuAction', $action_args); ?>
-            <?php endif; ?>
-          </div>
-        </td>
-      <?php endif; ?>
         
-      <?php
         // We will set $isFirstLink to false after the first link is set. This is used to
         // establish the row-link class (and thus click action) for the row. There can be only one.
         // This is also used to determine which label will be assigned to the bulk action checkbox.
         $isFirstLink = true; 
       ?>  
       <?php foreach($indexColumns as $col => $cfg): ?>
-        <td<?= !empty($cfg['cssClass']) ? ' class="' . $cfg['cssClass'] . '"' : ''; ?>>
+        <?php
+          $cellClass = '';
+          if(!empty($cfg['cssClass'])) {
+            $cellClass = $cfg['cssClass'];
+          }
+          if($isFirstLink && !empty($rowActions)) {
+            if(!empty($cellClass)) {
+              $cellClass .= ' ';
+            }
+            $cellClass .= 'with-field-actions';
+          }
+        ?>
+        <td<?= !empty($cellClass) ? ' class="' . $cellClass . '"' : ''; ?>>
           <?php
             $suffix = "";
             
@@ -352,6 +362,13 @@
               }
             }
             
+            // Output the row actions if present
+            if($isFirstLink && !empty($rowActions)) {
+              print '<div class="field-actions">';
+              print  $this->element('menuAction', $action_args);
+              print '</div>';
+            }
+            
             switch($cfg['type']) {
               case 'boolean':
                 if(!empty($entity->$col) && $entity->$col) {
@@ -455,8 +472,8 @@
                 
                 $linked = false;
 
-                // Output the bulk-action checkbox and label
-                if($isFirstLink) {
+                // Output the bulk-action checkbox and label if present
+                if($isFirstLink && !empty($bulkActions)) {
                   print '<div class="form-check bulk-action-checkbox-container">';
                   print '<input class="form-check-input" type="checkbox" value="" id="bulk-action-id-' . $entity->id . '" data-entity-id="' . $entity->id . '">';
                   print '<label class="form-check-label" for="bulk-action-id-' . $entity->id . '">';
diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php
index b35bbd582..38efe508e 100644
--- a/app/templates/element/javascript.php
+++ b/app/templates/element/javascript.php
@@ -247,18 +247,37 @@
     });
     
     // SETTINGS (from User Menu)
-    // Dark Mode toggle
-    $("#dark-mode-toggle").click(function(e) {
-      e.preventDefault();
-      $('html').toggleClass('dark-mode');
+    // Dark Mode toggles (auto is default)
+    $("#setting-darkmode-dark").click(function(e) {
+      $('html').removeClass('light-mode').addClass('dark-mode');
+    });
+    $("#setting-darkmode-light").click(function(e) {
+      $('html').removeClass('dark-mode').addClass('light-mode');
+    });
+    $("#setting-darkmode-auto").click(function(e) {
+      $('html').removeClass('dark-mode').removeClass('light-mode');
     });
     
     // Test for dark mode OS preference, and add the 'dark-mode' body class by default if it is present.
-    // XXX TODO: Replace this with setting an application variable (when available) so we do not flash the light color briefly on each page load
+    // XXX TODO: Once an application variable is set and the class is rendered at page build, 
+    //  there will be no flash of the light color on each page load if the setting is defined.
+    //  We will need to investigate this for the OS setting, and send an ajax call to set the preference
+    //  if the user has not set it so that no page flash occurs.
     const darkModeOsEnabled = window.matchMedia("(prefers-color-scheme: dark)");
-    if(darkModeOsEnabled.matches) {
+    if(darkModeOsEnabled.matches && !($('html').hasClass('light-mode')) &&  !($('html').hasClass('dark-mode'))) {
       $('html').addClass('dark-mode');
     }
+
+    // Density toggles (medium is default)
+    $("#setting-density-small").click(function(e) {
+      $('html').removeClass('density-large').addClass('density-small');
+    });
+    $("#setting-density-medium").click(function(e) {
+      $('html').removeClass('density-small').removeClass('density-large');
+    });
+    $("#setting-density-large").click(function(e) {
+      $('html').removeClass('density-small').addClass('density-large');
+    });
     
   });
 
diff --git a/app/templates/element/menuTop.php b/app/templates/element/menuTop.php
index 0040ae7a2..3f0e47863 100644
--- a/app/templates/element/menuTop.php
+++ b/app/templates/element/menuTop.php
@@ -67,11 +67,59 @@ class="dropdown-toggle top-menu-button"
             Settings
           </a>
           <ul class="dropdown-menu">
-            <li><a class="dropdown-item nospin" href="#" id="dark-mode-toggle"><span class="material-icons" aria-hidden="true">dark_mode</span><?= __d('menu','menu.darkmode'); ?></a></li>
+            <li class="menu-grouping">
+              <h4>
+                <span class="material-icons" aria-hidden="true">dark_mode</span>
+                <?= __d('menu','menu.darkmode'); ?>
+              </h4>
+              <form class="menu-grouping-group">
+                <div class="form-check">
+                  <input type="radio" name="setting-density" class="form-check-input" id="setting-darkmode-dark">
+                  <label class="form-check-label" for="setting-darkmode-dark">
+                    <?= __d('menu','menu.darkmode.dark'); ?>
+                  </label>
+                </div>
+                <div class="form-check">
+                  <input type="radio" name="setting-density" class="form-check-input" id="setting-darkmode-light">
+                  <label class="form-check-label" for="setting-darkmode-light">
+                    <?= __d('menu','menu.darkmode.light'); ?>
+                  </label>
+                </div>
+                <div class="form-check">
+                  <input type="radio" name="setting-density" class="form-check-input" id="setting-darkmode-auto" checked>
+                  <label class="form-check-label" for="setting-darkmode-auto">
+                    <?= __d('menu','menu.darkmode.auto'); ?>
+                  </label>
+                </div>
+              </form>
+            </li>
             <li><hr class="dropdown-divider"></li>
-            <li><a class="dropdown-item nospin" href="#"><span class="material-icons" aria-hidden="true">density_small</span><?= __d('menu','menu.density.small'); ?></a></li>
-            <li><a class="dropdown-item nospin" href="#"><span class="material-icons" aria-hidden="true">density_medium</span><?= __d('menu','menu.density.medium'); ?></a></li>
-            <li><a class="dropdown-item nospin" href="#"><span class="material-icons" aria-hidden="true">density_large</span><?= __d('menu','menu.density.large'); ?></a></li>
+            <li class="menu-grouping">
+              <h4>
+                <span class="material-icons" aria-hidden="true">density_small</span>
+                <?= __d('menu','menu.density'); ?>
+              </h4>
+              <form class="menu-grouping-group">
+                <div class="form-check">
+                  <input type="radio" name="setting-density" class="form-check-input" id="setting-density-small">
+                  <label class="form-check-label" for="setting-density-small">
+                    <?= __d('menu','menu.density.small'); ?>
+                  </label>
+                </div>
+                <div class="form-check">
+                  <input type="radio" name="setting-density" class="form-check-input" id="setting-density-medium" checked>
+                  <label class="form-check-label" for="setting-density-medium">
+                    <?= __d('menu','menu.density.medium'); ?>
+                  </label>
+                </div>
+                <div class="form-check">
+                  <input type="radio" name="setting-density" class="form-check-input" id="setting-density-large">
+                  <label class="form-check-label" for="setting-density-large">
+                    <?= __d('menu','menu.density.large'); ?>
+                  </label>
+                </div>
+              </form>
+            </li>
           </ul>
         </div>
         <?php if(count($vv_available_cos) > 1): // More than one CO is available, so present the switch button ?>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index f43c6aeb4..331af0b29 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -243,10 +243,40 @@ body.cos.select #top-bar {
 #top-menu .dropdown-item:hover {
   background-color: var(--cmg-color-bg-003);
 }
-#top-menu .dropdown-item .material-icons {
+#top-menu .dropdown-item .material-icons,
+#top-menu .dropdown-item .material-icons-outlined {
   margin-right: 0.25em;
   vertical-align: middle;
 }
+#top-menu .menu-grouping h4 .material-icons,
+#top-menu .menu-grouping h4 .material-icons-outlined {
+  font-size: 1.1rem;
+  margin-right: 0.5rem;
+}
+.menu-grouping {
+  padding: 1em;
+  font-size: 0.9em;
+}
+.menu-grouping h4 {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  padding: 0;
+  margin-bottom: 0.2em;
+}
+.menu-grouping-group {
+  display: flex;
+  gap: 0.75em;
+  padding-left: 2em;
+}
+.menu-grouping-group .form-check {
+  display: flex;
+  gap: 0.25em;
+  align-items: center;
+}
+.menu-grouping-group .form-check .form-check-input {
+  float: none;
+}
 #user-panel {
   color: var(--cmg-color-body-txt);
   background-color: var(--cmg-color-bg-002);
@@ -909,8 +939,18 @@ ul.form-list li.alert-banner .co-alert {
   padding-bottom: 1em;
 }
 /* INDEX ACTION COMMAND MENUS */
-a.action-menu-toggle {
-  padding: 0.5rem;
+th.with-field-actions {
+  padding-left: 2.75em;
+}
+td.with-field-actions {
+  display: flex;
+  align-items: center;
+}
+.field-actions {
+  float: left;
+  padding-left: 1.5em;
+  margin-left: -1.5em;
+  margin-right: 0.75em;
 }
 .field-actions .dropdown-menu {
   padding: 0;
@@ -941,11 +981,14 @@ a.dropdown-item.deletebutton {
 table.bulk-edit-mode a.row-link,
 table.bulk-edit-mode .read-only-link-container,
 table.bulk-edit-mode .row-link-heading,
-table.bulk-edit-mode td.actions .field-actions {
+table.bulk-edit-mode .field-actions {
   display: none;
 }
+table.bulk-edit-mode th.with-field-actions {
+  padding-left: 0.75em;
+}
 table.list-mode a.row-link,
-table.list-mode td.actions .field-actions {
+table.list-mode .field-actions {
   display: block;
 }
 table.list-mode .bulk-action-checkbox-container {
@@ -955,6 +998,9 @@ table.index-table .form-check {
   margin-bottom: 0;
   min-height: unset;
 }
+.bulk-action-checkbox-container .form-check-input {
+  margin-right: 1em;
+}
 /* PAGINATION */
 #pagination {
   margin: 0;
@@ -1174,6 +1220,9 @@ ul.form-list li .field {
   margin: 0;
   padding: 0.75em;
 }
+ul.form-list li .field:hover {
+  background-color: var(--cmg-color-bg-001);
+}
 ul.form-list li.fields-submit {
   background-color: unset;
   border-left: none;
@@ -1188,6 +1237,7 @@ ul.form-list .field-info {
 ul.form-list .field-desc {
   font-size: 0.9em;
   font-style: italic;
+  padding-bottom: 1em;
 }
 ul.form-list .fields-header {
   background-color: var(--cmg-color-body-bg);
@@ -1205,12 +1255,16 @@ ul.form-list input[type="password"] {
   color: var(--cmg-color-body-txt);
   background-color: var(--cmg-color-body-bg);
 }
+ul.form-list input[type="number"] {
+  width: 6em;
+}
 ul.form-list input[type="text"]:focus,
 ul.form-list input[type="number"]:focus,
 ul.form-list input[type="password"]:focus {
   background-color: var(--cmg-color-highlight-002);
 }
 ul.form-list select {
+  width: auto; /* select boxes should fit to their content, typically */
   font-size: 0.9em;
   color: var(--cmg-color-body-txt);
   background-color: var(--cmg-color-body-bg);
@@ -1323,6 +1377,9 @@ ul.fields li.fields-datepicker .field-info {
   display: flex;
   align-items: center;
 }
+ul.form-list input.datepicker {
+  width: auto;
+}
 .field-info .input-group {
   flex-wrap: unset;
 }
@@ -1335,6 +1392,9 @@ ul.fields li.fields-datepicker .field-info {
   line-height: inherit;
   padding: .25rem .75rem;
 }
+.cm-time-picker {
+  position: relative;
+}
 .cm-time-picker-panel {
   position: absolute;
   z-index: 100;
@@ -1570,13 +1630,8 @@ thead td.actions {
 td {
   border-bottom: 1px solid var(--cmg-color-bg-005);
 }
-th:first-child,
-td:first-child {
-  padding-left: 1rem;
-}
 table.list-mode th.actions:first-child,
 table.list-mode td.actions:first-child {
-  padding-left: 0;
   text-align: center;
 }
 table.bulk-edit-mode th.actions,
@@ -1755,6 +1810,9 @@ html.dark-mode .btn-default:active {
   color: var(--cmg-color-btn-bg-001);
   border: none;
 }
+#edit_ApiUsers .provisionbutton {
+  margin-left: 1em;
+}
 /*Bootstrap badge*/
 .badge {
   font-weight: normal;
@@ -1843,6 +1901,50 @@ html.dark-mode .btn-default:active {
   transition-duration: 0.2s;
   transition-timing-function: ease-out;
 }
+/* DENSITY SETTINGS (from User Settings Menu; Medium is default) */
+/* Density "small" */
+html.density-small th, 
+html.density-small td {
+  padding: 0.5em;
+}
+html.density-small th.with-field-actions {
+  padding-left: 2.5em;
+}
+html.density-small table.bulk-edit-mode th.with-field-actions {
+  padding-left: 0.5em;
+}
+html.density-small .bulk-action-checkbox-container .form-check-input {
+  margin-right: 0;
+}
+html.density-small .co-grid .col {
+  padding: 0.75em;
+}
+html.density-small ul.form-list li .field {
+  padding: 0.5em;
+}
+html.density-small a.menu-panel-toggle {
+  font-size: 0.9em;
+}
+/* Density "large" */
+html.density-large th,
+html.density-large td {
+  padding: 1.25em;
+}
+html.density-large th.with-field-actions {
+  padding-left: 2.75em;
+}
+html.density-large table.bulk-edit-mode th.with-field-actions {
+  padding-left: 1.25em;
+}
+html.density-large .co-grid .col {
+  padding: 1.5em;
+}
+html.density-large ul.form-list li .field {
+  padding: 1.5em;
+}
+html.density-large .field-data {
+  padding: 0.75em 1em;
+}
 /* FOOTER */
 footer {
   text-align: center;
diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
index 1ba426474..c18959aeb 100644
--- a/app/webroot/css/co-responsive.css
+++ b/app/webroot/css/co-responsive.css
@@ -69,17 +69,16 @@
     top: 0;
     right: 0;
   }
+  /* FORMS */
+  ul.form-list li .field {
+    display: grid;
+    column-gap: 1em;
+    align-items: center;
+    grid-template-columns: 1fr 2fr;
+  }
   ul.form-list .field-name {
-    display: inline-block;
-    min-width: 80px;
-    vertical-align: middle;
-    width: 30%;
     padding-left: 0.5em;
   }
-  ul.form-list .field-info {
-    display: inline-block;
-    width: 70%;
-  }
   ul.form-list-admin .field-name {
     width: 50%;
     padding-right: 1em;
@@ -87,10 +86,8 @@
   ul.form-list-admin .field-info {
     width: 40%;
   }
-  ul.form-list li .field {
-    display: flex;
-    column-gap: 1em;
-    align-items: center;
+  ul.form-list .field-desc {
+    padding: 0.5em 0 0 0.5em;
   }
   ul.form-list li.field-stack textarea {
     margin: 0.5em 0 0.5em 0.5em;
@@ -119,6 +116,11 @@
   .duet-date__dialog {
     left: -20em;
   }
+  /* DENSITY SETTINGS (from User Settings Menu; Medium is default) */
+  /* Density "small" */
+  html.density-small h1 {
+    font-size: 2.4em;
+  }
 }
 
 /* MEDIUM - Primary breakpoint */
@@ -352,7 +354,6 @@
   th.actions,
   td.actions {
     width: 40px; /* this is pushed wider by the nowrap on .field-actions .dropdown-menu */
-    padding: 0;
   }
   /* EDIT / VIEW / INDEX ACTION TOP-LINKS MENU */
   /* Convert the dropdown menus to be visible on wider screens when .actions-expanded class exists. 
@@ -413,9 +414,13 @@
 /**************************************************************************************************************/
 /* Medium devices (desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
+  /* FORMS */
+  ul.form-list li .field {
+    column-gap: 2em;
+  }
   /* DATE / TIME PICKER */
   .cm-time-picker-panel {
-    right: -100%;
+    right: -250px;
     display: flex;
   }
   .cm-time-picker-vals ul {
@@ -436,6 +441,10 @@
 /**************************************************************************************************************/
 /* Extra large devices (desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
+  /* FORMS */
+  ul.form-list li .field {
+    grid-template-columns: 1fr 3fr;
+  }
   /* SEARCH RESULTS */
   #search-results ul.search-results-group {
     column-count: 4;