diff --git a/app/pom.xml b/app/pom.xml
index 2d1ec1e6a..08c7d142f 100644
--- a/app/pom.xml
+++ b/app/pom.xml
@@ -58,6 +58,8 @@ limitations under the License.
         <spring.security.version>7.1.1</spring.security.version>
         <struts.version>7.3.0</struts.version>
         <struts-bootstrap.version>6.2.0</struts-bootstrap.version>
+        <bootstrap.version>5.3.8</bootstrap.version>
+        <bootstrap-icons.version>1.13.1</bootstrap-icons.version>
         <velocity.version>2.4.1</velocity.version>
         <ws-commons-util.version>1.0.2</ws-commons-util.version>
         <xmlrpc-version>3.1.3</xmlrpc-version>
@@ -246,7 +248,6 @@ limitations under the License.
             <version>${struts.version}</version>
         </dependency>
 
-        <!-- note: update head.jsp on webjar version change -->
         <!-- Supplies the "bootstrap" form theme templates the JSPs render with.
              Maintained at github.com/struts-community-plugins/struts2-bootstrap. -->
         <dependency>
@@ -255,12 +256,19 @@ limitations under the License.
             <version>${struts-bootstrap.version}</version>
         </dependency>
 
+        <!-- note: update head.jsp on webjar version change -->
         <!-- WebJar assets live under META-INF/resources, which Servlet 3.0+
              containers serve from the docroot, so no webjars servlet is needed -->
         <dependency>
             <groupId>org.webjars</groupId>
             <artifactId>bootstrap</artifactId>
-            <version>3.4.1</version>
+            <version>${bootstrap.version}</version>
+        </dependency>
+
+        <dependency>
+            <groupId>org.webjars.npm</groupId>
+            <artifactId>bootstrap-icons</artifactId>
+            <version>${bootstrap-icons.version}</version>
         </dependency>
 
         <dependency>
diff --git a/app/src/main/resources/ApplicationResources.properties b/app/src/main/resources/ApplicationResources.properties
index ffaad4efd..598bd4c61 100644
--- a/app/src/main/resources/ApplicationResources.properties
+++ b/app/src/main/resources/ApplicationResources.properties
@@ -1357,6 +1357,10 @@ userSettings.email=Email
 userSettings.locale=Locale
 userSettings.timeZone=Timezone
 userSettings.openIdUrl=Federated Identity
+userSettings.oidcIssuer=OIDC Issuer
+userSettings.oidcSubject=OIDC Subject
+userSettings.tip.oidcIssuer=The identity provider that authenticated you. Assigned at login and cannot be changed here.
+userSettings.tip.oidcSubject=Your unique identifier at that identity provider. Assigned at login and cannot be changed here.
 userSettings.tip.username=Usernames can''t be changed.
 
 # ----------------------------------------------------------------- Your profile (profile.jsp)
diff --git a/app/src/main/resources/template/bootstrap/tooltip.ftl b/app/src/main/resources/template/bootstrap/tooltip.ftl
new file mode 100644
index 000000000..90f72298c
--- /dev/null
+++ b/app/src/main/resources/template/bootstrap/tooltip.ftl
@@ -0,0 +1,24 @@
+<#--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  The ASF licenses this file to You
+ * under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.  For additional information regarding
+ * copyright in this work, please see the NOTICE file in the top level
+ * directory of this distribution.
+ *
+ * Overrides the struts2-bootstrap-plugin template, which still emits the
+ * pre-Bootstrap-5 "data-toggle" attribute. Bootstrap 5 reads "data-bs-toggle"
+ * and tooltips are opt-in, so roller.js initialises these.
+-->
+<#if attributes.tooltip?? && attributes.tooltip?has_content>
+ <i class="bi bi-info-circle s2b_tooltip" data-bs-toggle="tooltip" title="${attributes.tooltip}"></i>
+</#if><#t/>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/CacheInfo.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/CacheInfo.jsp
index 5e7e2ea5c..a3fbda361 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/CacheInfo.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/CacheInfo.jsp
@@ -40,7 +40,7 @@
                     <s:form action="cacheInfo!clear">
 						<s:hidden name="salt" />
                         <s:hidden name="cache" value="%{#cache.key}" />
-                        <s:submit value="%{getText('cacheInfo.clear')}" cssClass="btn btn-default" />
+                        <s:submit theme="simple" value="%{getText('cacheInfo.clear')}" cssClass="btn btn-outline-secondary" />
                     </s:form>
                 </td>
             </tr>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/GlobalConfig.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/GlobalConfig.jsp
index cbecee859..74afd22c5 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/GlobalConfig.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/GlobalConfig.jsp
@@ -69,8 +69,8 @@
 
             <%-- "integer" use input type number --%>
             <s:elseif test="#pd.type == 'integer'">
-                <div class="form-group ">
-                    <label class="col-sm-3 control-label"
+                <div class="row mb-3">
+                    <label class="col-sm-3 col-form-label"
                            for='globalConfig_<s:property value="#pd.nameWithUnderbars" />'>
                         <s:text name="%{#pd.key}"/>
                     </label>
@@ -86,8 +86,8 @@
 
             <%-- "float" use input type number --%>
             <s:elseif test="#pd.type == 'float'">
-                <div class="form-group ">
-                    <label class="col-sm-3 control-label"
+                <div class="row mb-3">
+                    <label class="col-sm-3 col-form-label"
                            for='globalConfig_<s:property value="#pd.nameWithUnderbars" />'>
                         <s:text name="%{#pd.key}"/>
                     </label>
@@ -112,7 +112,7 @@
 
     </s:iterator>
 
-    <input id="saveButton" class="btn btn-default" type="submit" value="<s:text name="generic.save"/>"/>
+    <input id="saveButton" class="btn btn-outline-secondary" type="submit" value="<s:text name="generic.save"/>"/>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PingTargets.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PingTargets.jsp
index f0c328ce1..6309ce9d8 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PingTargets.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PingTargets.jsp
@@ -74,13 +74,13 @@
                         '<s:property value="#pingTarget.name" />',
                         '<s:property value="#pingTarget.pingUrl" />'
                         )">
-                    <span class="glyphicon glyphicon-edit" aria-hidden="true"> </span>
+                    <span class="bi bi-pencil-square" aria-hidden="true"> </span>
                 </a>
             </td>
 
             <td class="rollertable" align="center">
                 <a href="#" onclick="showDeleteModal('<s:property value="#pingTarget.id"/>')">
-                    <span class="glyphicon glyphicon-trash" aria-hidden="true"> </span>
+                    <span class="bi bi-trash" aria-hidden="true"> </span>
                 </a>
             </td>
 
@@ -94,7 +94,7 @@
         <s:param name="weblog" value="actionWeblog.handle"/>
     </s:url>
     <a href="#" onclick="showAddEditModal()">
-        <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"> </span>
+        <span class="bi bi-plus-circle" aria-hidden="true"> </span>
         <s:text name="pingTarget.addTarget"/>
     </a>
 </div>
@@ -123,9 +123,9 @@
                 </div>
 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn btn-danger"
+                    <s:submit theme="simple" cssClass="btn btn-danger"
                               value="%{getText('generic.yes')}" action="commonPingTargets!delete"/>
-                    <button type="button" class="btn" data-dismiss="modal">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                         <s:text name="generic.cancel"/>
                     </button>
                 </div>
@@ -190,7 +190,7 @@
                     <s:text name="generic.save"/>
                 </button>
 
-                <button type="button" class="btn" data-dismiss="modal">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                     <s:text name="generic.cancel"/>
                 </button>
 
@@ -216,7 +216,7 @@
 
     function showDeleteModal( removeId ) {
         $('#removeId').val(removeId);
-        $('#delete-ping-target-modal').modal({show: true});
+        $('#delete-ping-target-modal').modal('show');
     }
 
     function showAddEditModal(pingTargetId, name, url) {
@@ -230,7 +230,7 @@
             $('#pingTargetEditForm_bean_name:first').val("");
             $('#pingTargetEditForm_bean_pingUrl:first').val("");
         }
-        $('#addedit-pingtarget-modal').modal({show: true});
+        $('#addedit-pingtarget-modal').modal('show');
     }
 
     function validate() {
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetConfig.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetConfig.jsp
index 936a42629..3221fb2e6 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetConfig.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetConfig.jsp
@@ -68,6 +68,6 @@
 
     </s:iterator>
 
-     <input class="btn btn-default" type="submit" value="<s:text name="generic.save"/>"/>
+     <input class="btn btn-outline-secondary" type="submit" value="<s:text name="generic.save"/>"/>
 
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSidebar.jsp
index 970ad33b4..f164ca41b 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSidebar.jsp
@@ -29,6 +29,6 @@
 </s:url>
 
 <s:a href="%{createNewUrl}">
-    <span class="glyphicon glyphicon-plus" aria-hidden="true"> </span>
+    <span class="bi bi-plus-lg" aria-hidden="true"> </span>
     Create new Custom Planet Group
 </s:a>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubs.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubs.jsp
index be7ee804a..3444e849a 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubs.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubs.jsp
@@ -49,11 +49,11 @@
 <%-- only show edit form for custom group --%>
 <s:if test="groupHandle != 'all'">
 
-    <div class="panel panel-default">
-        <div class="panel-heading">
+    <div class="card">
+        <div class="card-header">
             <p><s:text name="planetGroupSubs.properties"/></p>
         </div>
-        <div class="panel-body">
+        <div class="card-body">
             <s:if test="createNew">
                 <s:text name="planetGroupSubs.creatingNewGroup" />
             </s:if>
@@ -61,7 +61,7 @@
                 <s:text name="planetGroupSubs.editingExistingGroup" />
             </s:else>
 
-            <s:form action="planetGroupSubs!saveGroup" theme="bootstrap" cssClass="form-horizontal" style="margin-top:1em">
+            <s:form action="planetGroupSubs!saveGroup" theme="bootstrap" style="margin-top:1em" cssClass="form-horizontal">
                 <s:hidden name="salt"/>
                 <s:hidden name="group.id"/>
 
@@ -76,12 +76,12 @@
                              tooltip="%{getText('planetGroups.tip.handle')}"/>
 
 
-                <div class="form-group ">
-                    <label class="col-sm-3 control-label"></label>
+                <div class="row mb-3">
+                    <label class="col-sm-3 col-form-label"></label>
                     <div class="col-sm-9 controls">
-                        <s:submit value="%{getText('generic.save')}" cssClass="btn btn-default"/>
+                        <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-outline-secondary"/>
                         <s:if test="createNew">
-                            <input type="button" class="btn"
+                            <input type="button" class="btn btn-outline-secondary"
                                    value='<s:text name="generic.cancel" />'
                                    onclick="window.location='<s:url action="planetGroups"/>'"/>
                         </s:if>
@@ -127,7 +127,7 @@
                     <td><s:set var="feedURL" value="#sub.feedURL"/> ${fn:substring(feedURL, 0, 100)} </td>
                     <td>
                         <a href="javascript: void(0);" onclick="confirmDelete('<s:property value="feedURL"/>')">
-                            <span class="glyphicon glyphicon-remove" aria-hidden="true"> </span>
+                            <span class="bi bi-x-lg" aria-hidden="true"> </span>
                             <s:text name="generic.delete"/>
                         </a>
                     </td>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubsSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubsSidebar.jsp
index a46e1bb90..458d8bbb9 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubsSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroupSubsSidebar.jsp
@@ -29,7 +29,7 @@
     <s:text name="planetGroupSubs.addFeed"/>
 
     <s:form action="planetGroupSubs!saveSubscription"
-            theme="bootstrap" cssClass="form-horizontal" style="margin-top:1em">
+            theme="bootstrap" style="margin-top:1em" cssClass="form-horizontal">
         <s:hidden name="salt"/>
         <s:hidden name="group.handle"/>
 
@@ -38,7 +38,7 @@
 
         <p id="feedback-area" style="clear:right; width:100%"></p>
 
-        <s:submit value="%{getText('generic.save')}" cssClass="btn btn-default" />
+        <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-outline-secondary" />
 
     </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroups.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroups.jsp
index 6223ee319..320677229 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroups.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/PlanetGroups.jsp
@@ -44,14 +44,14 @@
                         <s:param name="group.id" value="#group.id"/>
                     </s:url>
                     <s:a href="%{groupUrl}">
-                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+                        <span class="bi bi-pencil-square" aria-hidden="true"></span>
                         <s:text name='generic.edit'/>
                     </s:a>
                 </td>
 
                 <td>
                     <a href="javascript: void(0);" onclick="confirmDelete('<s:property value="#group.handle"/>')">
-                        <span class="glyphicon glyphicon-remove" aria-hidden="true"> </span>
+                        <span class="bi bi-x-lg" aria-hidden="true"> </span>
                         <s:text name="generic.delete"/>
                     </a>
                 </td>
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/UserAdmin.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/UserAdmin.jsp
index 59fd60955..bf719f8dc 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/UserAdmin.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/UserAdmin.jsp
@@ -38,7 +38,7 @@
 
     <s:select class="form-control" id="userList" size="10" onchange="onUserSelected()" list="bean.list" />
 
-    <button type="submit" class="btn btn-default" id="user-submit">
+    <button type="submit" class="btn btn-outline-secondary" id="user-submit">
         <s:text name="generic.edit" />
     </button>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/admin/UserEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/admin/UserEdit.jsp
index 59a86fe62..6c461abd9 100644
--- a/app/src/main/webapp/WEB-INF/jsps/admin/UserEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/admin/UserEdit.jsp
@@ -154,15 +154,15 @@
 
     <div class="control">
         <s:if test="actionName == 'createUser'">
-            <s:submit cssClass="btn btn-default" id="save_button"
+            <s:submit cssClass="btn btn-primary" id="save_button"
                       value="%{getText('generic.save')}" action="createUser!save"/>
-            <s:submit cssClass="btn"
+            <s:submit cssClass="btn btn-outline-secondary"
                       value="%{getText('generic.cancel')}" action="createUser!cancel" />
         </s:if>
         <s:else>
-            <s:submit cssClass="btn btn-default" id="save_button"
+            <s:submit cssClass="btn btn-primary" id="save_button"
                       value="%{getText('generic.save')}" action="modifyUser!save"/>
-            <s:submit cssClass="btn"
+            <s:submit cssClass="btn btn-outline-secondary"
                       value="%{getText('generic.cancel')}" action="modifyUser!cancel" />
         </s:else>
     </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/BootstrapToken.jsp b/app/src/main/webapp/WEB-INF/jsps/core/BootstrapToken.jsp
index 40fb9734f..7172be820 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/BootstrapToken.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/BootstrapToken.jsp
@@ -18,21 +18,21 @@
 <%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
 
 <div class="row">
-    <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
+    <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3">
         <h2><s:text name="installer.bootstrap.heading" /></h2>
         <p><s:text name="installer.bootstrap.instructions" /></p>
 
         <s:form action="bootstrap-token!redeem" method="post" theme="simple">
             <s:hidden name="salt" />
-            <div class="form-group">
-                <label for="setup-token"><s:text name="installer.bootstrap.tokenLabel" /></label>
+            <div class="mb-3">
+                <label class="form-label" for="setup-token"><s:text name="installer.bootstrap.tokenLabel" /></label>
                 <s:textfield id="setup-token" name="token" theme="simple"
                         cssClass="form-control" autocomplete="off" autofocus="autofocus"
                         required="required"
                         oninput="document.getElementById('setup-token-submit').disabled = !this.value.trim()" />
-                <p class="help-block"><s:text name="installer.bootstrap.tokenHelp" /></p>
+                <p class="form-text"><s:text name="installer.bootstrap.tokenHelp" /></p>
             </div>
-            <div class="form-group">
+            <div class="mb-3">
                 <s:submit id="setup-token-submit" value="%{getText('installer.bootstrap.submit')}"
                         theme="simple" disabled="true"
                         cssClass="btn btn-primary" />
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/CreateDatabase.jsp b/app/src/main/webapp/WEB-INF/jsps/core/CreateDatabase.jsp
index 66db1ca14..99f17af0f 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/CreateDatabase.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/CreateDatabase.jsp
@@ -55,7 +55,7 @@
 
     <s:form action="install!create">
 		<s:hidden name="salt" />
-        <s:submit value="%{getText('installer.yesCreateTables')}" cssClass="btn btn-default" />
+        <s:submit theme="simple" value="%{getText('installer.yesCreateTables')}" cssClass="btn btn-outline-secondary" />
     </s:form>
     
 </s:else>
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp b/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp
index b574975fc..d14d3bc8a 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/CreateWeblog.jsp
@@ -34,7 +34,7 @@
                  name="bean.handle" size="30" maxlength="30"
                  onkeyup="handlePreview(this)" data-msg-required="%{getText('CreateWeblog.error.handleNull')}" required="required"/>
 
-    <div class="form-group">
+    <div class="row mb-3">
         <label class="col-sm-3"></label>
         <div class="col-sm-9 controls">
             <s:text name="createWebsite.weblogUrl" />:&nbsp;
@@ -59,24 +59,28 @@
               tooltip="%{getText('createWebsite.tip.timezone')}"
               name="bean.timeZone" size="1" list="timeZonesList"/>
 
-    <div class="form-group" ng-app="themeSelectModule" ng-controller="themeController">
-        <label class="col-sm-3 control-label" for="createWeblog_bean_timeZone">
+    <div class="row mb-3" ng-app="themeSelectModule" ng-controller="themeController">
+        <label class="col-sm-3 col-form-label" for="createWeblog_bean_timeZone">
             <s:text name="createWebsite.theme" />
         </label>
         <div class="col-sm-9 controls">
-            <s:select name="bean.theme" size="1" list="themes" listKey="id" listValue="name"
+            <s:select theme="simple" cssClass="form-select" name="bean.theme" size="1"
+                      list="themes" listKey="id" listValue="name"
                       onchange="previewImage(this[selectedIndex].value)"/>
             <p id="themedescription"></p>
-            <p><img id="themeThumbnail" src="" class="img-responsive img-thumbnail" style="max-width: 30em" /></p>
+            <p><img id="themeThumbnail" src="" class="img-fluid img-thumbnail" style="max-width: 30em" /></p>
 
         </div>
     </div>
 
-    <s:submit cssClass="btn btn-default"
-              value="%{getText('createWebsite.button.save')}"/>
-
-    <input class="btn" type="button" value="<s:text name="generic.cancel"/>"
-           onclick="window.location='<s:url action="menu"/>'"/>
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit cssClass="btn btn-primary"
+              value="%{getText('createWebsite.button.save')}" theme="simple"/>
+            <input class="btn btn-outline-secondary" type="button" value="<s:text name="generic.cancel"/>"
+                   onclick="window.location='<s:url action="menu"/>'"/>
+        </div>
+    </div>
 
 </s:form>
 
@@ -92,12 +96,7 @@
 
         saveButton = $("#createWeblog_0");
 
-        <s:if test="bean.theme == null">
-        previewImage('<s:property value="themes[0].id"/>');
-        </s:if>
-        <s:else>
-        previewImage('<s:property value="bean.theme"/>');
-        </s:else>
+        previewImage($('select[name="bean.theme"]').val());
 
     });
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Login.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Login.jsp
index 232ae2cd0..5a7b7bfd5 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/Login.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/Login.jsp
@@ -35,29 +35,29 @@
 
     <s:if test="authMethod == 'OIDC' || authMethod == 'DB_OIDC'">
         <s:if test="oidcProviders.size() > 0">
-            <div class="form-group">
-                <legend><s:text name="loginPage.oidcPrompt"/></legend>
-            </div>
-
-            <div class="form-group">
-                <s:iterator value="oidcProviders" var="provider">
-                    <a href="${pageContext.request.contextPath}/oauth2/authorization/<s:property value="#provider.id"/>"
-                       class="btn btn-default" style="margin-bottom: 5px;">
-                        <s:text name="loginPage.signInWith">
-                            <s:param><s:property value="#provider.name"/></s:param>
-                        </s:text>
-                    </a>
-                </s:iterator>
+            <div class="text-center mb-4">
+                <h2 class="h5 mb-3"><s:text name="loginPage.oidcPrompt"/></h2>
+
+                <div class="d-grid gap-2 col-10 mx-auto">
+                    <s:iterator value="oidcProviders" var="provider">
+                        <a href="${pageContext.request.contextPath}/oauth2/authorization/<s:property value="#provider.id"/>"
+                           class="btn btn-primary">
+                            <s:text name="loginPage.signInWith">
+                                <s:param><s:property value="#provider.name"/></s:param>
+                            </s:text>
+                        </a>
+                    </s:iterator>
+                </div>
             </div>
         </s:if>
     </s:if>
 
     <s:if test="authMethod != 'OIDC'">
 
-        <form method="post" id="loginForm" class="form-horizontal"
+        <form method="post" id="loginForm"
               action="<c:url value="<%= securityCheckUrl %>"/>" onsubmit="saveUsername(this)">
 
-            <div class="form-group">
+            <div class="mb-3">
                 <s:if test="authMethod == 'DB_OIDC'">
                     <legend><s:text name="loginPage.dbOidcPrompt"/></legend>
                 </s:if>
@@ -67,29 +67,29 @@
                 </s:else>
             </div>
 
-            <div class="form-group">
+            <div class="mb-3">
                 <label for="j_username" > <s:text name="loginPage.userName"/> </label>
                 <input type="text" class="form-control" name="j_username" id="j_username" placeholder="Username"/>
             </div>
 
-            <div class="form-group">
+            <div class="mb-3">
                 <label for="j_password" > <s:text name="loginPage.password"/> </label>
                 <input type="password" class="form-control" name="j_password" id="j_password" placeholder="Password"/>
             </div>
 
             <c:if test="${rememberMeEnabled}">
-                <div class="form-group">
+                <div class="mb-3">
                     <input type="checkbox" name="_spring_security_remember_me" id="_spring_security_remember_me"/>
                     <label for="_spring_security_remember_me" > <s:text name="loginPage.rememberMe"/> </label>
                 </div>
             </c:if>
 
-            <div class="form-group">
+            <div class="mb-3">
                 <button class="btn btn-primary" type="submit" name="login" id="login">
                     <s:text name='loginPage.login'/>
                 </button>
 
-                <button class="btn" type="reset" name="reset" id="reset"
+                <button class="btn btn-outline-secondary" type="reset" name="reset" id="reset"
                         onclick="document.getElementById('j_username').focus()">
                     <s:text name='loginPage.reset'/>
                 </button>
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/MainMenu.jsp b/app/src/main/webapp/WEB-INF/jsps/core/MainMenu.jsp
index d81dce008..2802f1acd 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/MainMenu.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/MainMenu.jsp
@@ -61,10 +61,10 @@
     
     <s:iterator var="perms" value="existingPermissions">
 
-        <div class="well yourWeblogBox">
+        <div class="card card-body yourWeblogBox">
 
             <h3 class="mm_weblog_name">
-                <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
+                <span class="bi bi-folder2-open" aria-hidden="true"></span>
                 &nbsp;<s:property value="#perms.weblog.name" />
             </h3>
 
@@ -85,8 +85,8 @@
                 <s:url action="entryAdd" namespace="/roller-ui/authoring" var="newEntry">
                     <s:param name="weblog" value="#perms.weblog.handle"/>
                 </s:url>
-                <s:a href="%{newEntry}" cssClass="btn btn-default">
-                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+                <s:a href="%{newEntry}" cssClass="btn btn-outline-secondary">
+                    <span class="bi bi-pencil" aria-hidden="true"></span>
                     <s:text name="yourWebsites.newEntry"/>
                 </s:a>
 
@@ -96,10 +96,10 @@
                     <s:url action="entries" namespace="/roller-ui/authoring" var="editEntries">
                         <s:param name="weblog" value="#perms.weblog.handle"/>
                     </s:url>
-                    <s:a href="%{editEntries}" cssClass="btn btn-default">
-                        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
+                    <s:a href="%{editEntries}" cssClass="btn btn-outline-secondary">
+                        <span class="bi bi-list-ul" aria-hidden="true"></span>
                         <s:text name="yourWebsites.editEntries"/>
-                        <span class="badge"><s:property value="#perms.weblog.entryCount"/></span>
+                        <span class="badge text-bg-secondary ms-1"><s:property value="#perms.weblog.entryCount"/></span>
                     </s:a>
 
                 </s:if>
@@ -110,10 +110,10 @@
                     <s:url action="comments" namespace="/roller-ui/authoring" var="manageComments">
                         <s:param name="weblog" value="#perms.weblog.handle"/>
                     </s:url>
-                    <s:a href="%{manageComments}" cssClass="btn btn-default">
-                        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
+                    <s:a href="%{manageComments}" cssClass="btn btn-outline-secondary">
+                        <span class="bi bi-chat" aria-hidden="true"></span>
                         <s:text name="yourWebsites.manageComments"/>
-                        <span class="badge"><s:property value="#perms.weblog.commentCount"/></span>
+                        <span class="badge text-bg-secondary ms-1"><s:property value="#perms.weblog.commentCount"/></span>
                     </s:a>
 
                 </s:if>
@@ -134,8 +134,8 @@
                                 <s:param name="weblog" value="#perms.weblog.handle" />
                             </s:url>
                         </s:else>
-                        <a href='<s:property value="weblogTheme" />' class="btn btn-default">
-                            <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
+                        <a href='<s:property value="weblogTheme" />' class="btn btn-outline-secondary">
+                            <span class="bi bi-eye" aria-hidden="true"></span>
                             <s:text name="yourWebsites.theme" />
                         </a>
                     </s:if>
@@ -144,8 +144,8 @@
                     <s:url action="weblogConfig" namespace="/roller-ui/authoring" var="manageWeblog">
                         <s:param name="weblog" value="#perms.weblog.handle"/>
                     </s:url>
-                    <a href='<s:property value="manageWeblog" />' class="btn btn-default">
-                        <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
+                    <a href='<s:property value="manageWeblog" />' class="btn btn-outline-secondary">
+                        <span class="bi bi-gear" aria-hidden="true"></span>
                         <s:text name="yourWebsites.manage"/>
                     </a>
 
@@ -154,8 +154,8 @@
                 <%-- don't allow last admin to resign from blog --%>
                 <s:if test='!(#perms.hasAction("admin") && #perms.weblog.adminUserCount == 1)'>
 
-                    <button type="button" class="btn btn-default">
-                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
+                    <button type="button" class="btn btn-outline-secondary">
+                        <span class="bi bi-trash" aria-hidden="true"></span>
                         <s:url action="memberResign" namespace="/roller-ui/authoring" var="resignWeblog">
                             <s:param name="weblog" value="#perms.weblog.handle"/>
                         </s:url>
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/MainMenuSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/core/MainMenuSidebar.jsp
index b70cc1eeb..84fc637ba 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/MainMenuSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/MainMenuSidebar.jsp
@@ -30,14 +30,14 @@
 
                 <%-- Edit profile --%>
 
-                <h4><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+                <h4><span class="bi bi-person" aria-hidden="true"></span>
                 <a href="<s:url action="profile"/>"><s:text name="yourWebsites.editProfile" /></a></h4>
                 <p><s:text name="yourWebsites.editProfile.desc" /></p>
 
                 <%-- Create weblog --%>
                 
                 <s:if test="getBooleanProp('site.allowUserWeblogCreation') && (getBooleanProp('groupblogging.enabled') || (existingPermissions.isEmpty && pendingPermissions.isEmpty))">
-                    <h4><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                    <h4><span class="bi bi-plus-lg" aria-hidden="true"></span>
                     <a href="<s:url action="createWeblog" />"><s:text name="yourWebsites.createWeblog" /></a></h4>
                     <p><s:text name="yourWebsites.createWeblog.desc" /></p>
                 </s:if>
@@ -46,7 +46,7 @@
 
                     <%-- Roller settings --%>
 
-                    <h4><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
+                    <h4><span class="bi bi-wrench" aria-hidden="true"></span>
                     <a href="<s:url action="globalConfig" namespace="/roller-ui/admin" />"><s:text name="yourWebsites.globalAdmin" /></a></h4>          
                     <p><s:text name="yourWebsites.globalAdmin.desc" /></p>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp
index 4fad0f695..b9016c71c 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/Profile.jsp
@@ -40,7 +40,7 @@
                  name="bean.screenName" size="30" maxlength="30"/>
 
     <s:textfield label="%{getText('userSettings.fullname')}"
-                 tooltip="%{getText('')}"
+                 tooltip="%{getText('userRegister.tip.fullName')}"
                  onchange="formChanged()" onkeyup="formChanged()"
                  name="bean.fullName" size="30" maxlength="30"/>
 
@@ -66,10 +66,13 @@
 
     <s:if test="authMethod == 'OIDC' || authMethod == 'DB_OIDC'">
         <%-- assigned by the identity provider at login, so shown read-only --%>
-        <s:textfield label="%{getText('userSettings.openIdUrl')}"
-                     name="bean.openIdUrl" size="40" maxlength="255"
-                     readonly="true"
-                     style="width:75%" id="f_openid_identifier"/>
+        <s:hidden name="bean.openIdUrl"/>
+        <s:textfield label="%{getText('userSettings.oidcIssuer')}"
+                     tooltip="%{getText('userSettings.tip.oidcIssuer')}"
+                     name="bean.oidcIssuer" readonly="true" disabled="true"/>
+        <s:textfield label="%{getText('userSettings.oidcSubject')}"
+                     tooltip="%{getText('userSettings.tip.oidcSubject')}"
+                     name="bean.oidcSubject" readonly="true" disabled="true"/>
     </s:if>
 
     <s:select label="%{getText('userSettings.locale')}"
@@ -80,10 +83,13 @@
               tooltip="%{getText('userRegister.tip.timeZone')}"
               name="bean.timeZone" size="1" list="timeZonesList"/>
 
-    <s:submit cssClass="btn btn-default" value="%{getText('generic.save')}"/>
-
-    <input class="btn" type="button" value="<s:text name="generic.cancel"/>"
-           onclick="window.location='<s:url action="menu"/>'"/>
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit cssClass="btn btn-primary" value="%{getText('generic.save')}" theme="simple"/>
+            <input class="btn btn-outline-secondary" type="button" value="<s:text name="generic.cancel"/>"
+                   onclick="window.location='<s:url action="menu"/>'"/>
+        </div>
+    </div>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Register.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Register.jsp
index c8e8ac617..222ec769e 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/Register.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/Register.jsp
@@ -28,14 +28,14 @@
 
     <s:if test="authMethod == 'LDAP'">
 
-        <div class="form-group">
+        <div class="row mb-3">
 
-            <label class="col-sm-3 control-label">
+            <label class="col-sm-3 col-form-label">
                 <s:text name="userSettings.username" />
             </label>
 
             <div class="col-sm-9 controls">
-                <p class="form-control-static">
+                <p class="form-control-plaintext">
                     <s:property value="bean.userName"/>
                 </p>
             </div>
@@ -109,9 +109,13 @@
 
     <p id="readytip"><s:text name="userRegister.tip.ready" /></p>
 
-    <s:submit id="submit" key="userRegister.button.save" cssClass="btn btn-default" />
-    <input type="button" class="btn btn-cancel"
-           value="<s:text name="generic.cancel"/>" onclick="window.location='<s:url value="/"/>'" />
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit id="submit" key="userRegister.button.save" cssClass="btn btn-primary" theme="simple"/>
+            <input type="button" class="btn btn-outline-secondary btn-cancel" value="<s:text name="generic.cancel"/>"
+                   onclick="window.location='<s:url value="/"/>'"/>
+        </div>
+    </div>
 
 </s:form>
 
@@ -123,7 +127,7 @@
         var disabled = true;
         var authMethod    = "<s:property value='authMethod' />";
         var emailAddress    = document.register['bean.emailAddress'].value;
-        var userName = passwordText = passwordConfirm = openIdUrl = "";
+        var userName = passwordText = passwordConfirm = "";
 
         if (!validateEmail(emailAddress)) {
             document.getElementById('submit').disabled = true;
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp b/app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp
index 01c7582e0..aa62cf956 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/Setup.jsp
@@ -27,9 +27,9 @@
 
 <%-- STEP 1: Create a user if you don't already have one --%>
 
-<div class="panel panel-default">
-    <div class="panel-heading">
-        <h3 class="panel-title">
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">
             <s:text name="index.createUser"/>
             <s:if test="userCount > 0"> -
                 <s:text name="index.createUserDone">
@@ -39,7 +39,7 @@
         </h3>
     </div>
 
-    <div class="panel-body">
+    <div class="card-body">
 
         <p><s:text name="index.createUserHelp"/></p>
         <p><s:if test="userCount == 0">
@@ -54,9 +54,9 @@
 <%-- STEP 2: Create a weblog if you don't already have one --%>
 
 <s:if test="!bootstrap">
-<div class="panel panel-default">
-    <div class="panel-heading">
-        <h3 class="panel-title">
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">
             <s:text name="index.createWeblog"/>
             <s:if test="blogCount > 0 && !bootstrap"> -
                 <s:text name="index.createWeblogDone">
@@ -66,7 +66,7 @@
         </h3>
     </div>
 
-    <div class="panel-body">
+    <div class="card-body">
 
         <s:text name="index.createWeblogHelp"/><br/><br/>
         <s:if test="userCount > 0 && blogCount == 0">
@@ -81,14 +81,14 @@
 
 <%-- STEP 3: Designate a weblog to be the frontpage weblog --%>
 
-<div class="panel panel-default">
-    <div class="panel-heading">
-        <h3 class="panel-title">
+<div class="card">
+    <div class="card-header">
+        <h3 class="card-title">
             <s:text name="index.setFrontpage"/>
         </h3>
     </div>
 
-    <div class="panel-body">
+    <div class="card-body">
 
         <p><s:text name="index.setFrontpageHelp"/></p>
 
@@ -108,7 +108,7 @@
                 <s:checkbox name="aggregated" value="aggregated"
                             label="%{getText('frontpageConfig.frontpageAggregated')}"/>
 
-                <s:submit value="%{getText('generic.save')}" cssClass="btn btn-default"/>
+                <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-outline-secondary"/>
 
             </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/core/UpgradeDatabase.jsp b/app/src/main/webapp/WEB-INF/jsps/core/UpgradeDatabase.jsp
index 945e91d80..914f1e769 100644
--- a/app/src/main/webapp/WEB-INF/jsps/core/UpgradeDatabase.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/core/UpgradeDatabase.jsp
@@ -38,9 +38,9 @@
     </p>
     <p><s:text name="installer.upgradeTables"/></p>
 
-    <s:form action="install!upgrade" class="form-horizontal">
+    <s:form action="install!upgrade">
         <s:hidden name="salt"/>
-        <s:submit value="%{getText('installer.yesUpgradeTables')}" cssClass="btn btn-primary" />
+        <s:submit theme="simple" value="%{getText('installer.yesUpgradeTables')}" cssClass="btn btn-primary" />
     </s:form>
 
 </s:elseif>
@@ -59,9 +59,9 @@
         <s:iterator value="messages"><s:property/><br/></s:iterator>
     </pre>
 
-    <s:form action="install!bootstrap" class="form-horizontal">
+    <s:form action="install!bootstrap">
         <s:hidden name="salt"/>
-        <s:submit value="%{getText('installer.finishUpgrade')}" cssClass="btn btn-primary" />
+        <s:submit theme="simple" value="%{getText('installer.finishUpgrade')}" cssClass="btn btn-primary" />
     </s:form>
 
 </s:else>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp
index 3de7bd9ee..a2182d0f2 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Bookmarks.jsp
@@ -49,8 +49,8 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
 
     <s:if test="folder.name == 'default'">
 
-        <div class="form-group ">
-            <label class="col-sm-3 control-label" for="bookmarks_folder_name">
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label" for="bookmarks_folder_name">
                 <s:text name="bookmarksForm.blogrollName"/>
             </label>
             <div class="col-sm-9 controls">
@@ -67,8 +67,8 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
         <%-- for other blogrolls, show textarea so user can rename it --%>
         <%-- don't use Struts tags here so button can be on same line as text input --%>
 
-        <div class="form-group ">
-            <label class="col-sm-3 control-label" for="bookmarks_folder_name">
+        <div class="row mb-3">
+            <label class="col-sm-3 col-form-label" for="bookmarks_folder_name">
                 <s:text name="bookmarksForm.blogrollName"/>
             </label>
             <div class="col-sm-9 controls">
@@ -82,7 +82,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                             onsubmit="return false;">
                         <s:text name="generic.rename"/>
                     </button>
-                    <button type="button" id="rename_cancel" class="btn btn-default"
+                    <button type="button" id="rename_cancel" class="btn btn-outline-secondary"
                             onclick="cancelRenameFolder(); return false;"
                             onsubmit="return false;">
                         <s:text name="generic.cancel"/>
@@ -142,7 +142,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                                 <str:truncateNicely lower="70" upper="90">
                                     <s:property value="#bookmark.url"/>
                                 </str:truncateNicely>
-                                <span class="glyphicon glyphicon-play-circle"></span>
+                                <span class="bi bi-play-circle"></span>
                             </a>
                         </s:if>
 
@@ -157,7 +157,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                            data-bookmark-feed-url="<s:property value="#bookmark.feedUrl"/>"
                            data-bookmark-description="<s:property value="#bookmark.description"/>"
                            data-bookmark-image="<s:property value="#bookmark.image"/>">
-                            <span class="glyphicon glyphicon-edit"></span>
+                            <span class="bi bi-pencil-square"></span>
                         </a>
 
                     </td>
@@ -191,7 +191,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                   action="bookmarks!move" onclick="onMoveToFolder();return false;"/>
         <%-- Move-to combo-box --%>
         <s:select name="targetFolderId" theme="simple"
-                  cssClass="form-control" cssStyle="float:left; width:30%; margin-right: 2em"
+                  cssClass="form-select" cssStyle="float:left; width:auto; margin-right: 2em"
                   list="allFolders" listKey="id" listValue="name"/>
     </s:if>
 
@@ -336,7 +336,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
     }
 
     function confirmDeleteSelected() {
-        $('#delete-links-modal').modal({show: true});
+        $('#delete-links-modal').modal('show');
     }
 
     function deleteSelected() {
@@ -346,7 +346,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
     function confirmDeleteFolder() {
         $('#boomarks_delete_folder_folderId').val($('#bookmarks_folderId:first').val());
         $('#deleteBlogrollName').text($('#deleteBlogrollName').data('folder-name'));
-        $('#delete-blogroll-modal').modal({show: true});
+        $('#delete-blogroll-modal').modal('show');
     }
 
     function onMoveToFolder() {
@@ -380,7 +380,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
 
         // disable save button until valid name is entered
 
-        $('#addedit-bookmarkfolder-modal').modal({show: true});
+        $('#addedit-bookmarkfolder-modal').modal('show');
 
         onBlogrollFormChanged();
     }
@@ -424,7 +424,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                 <button id="save_blogroll" onclick="submitEditedBlogroll()" class="btn btn-primary">
                     <s:text name="generic.save"/>
                 </button>
-                <button type="button" class="btn" data-dismiss="modal">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                     <s:text name="generic.cancel"/>
                 </button>
             </div>
@@ -532,11 +532,11 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                 </div>
 
                 <div class="modal-footer">
-                    <button type="button" class="btn" value="%{getText('generic.yes')}" onclick="deleteSelected()">
+                    <button type="button" class="btn btn-outline-secondary" value="%{getText('generic.yes')}" onclick="deleteSelected()">
                         <s:text name="generic.yes"/>
                     </button>
                     &nbsp;
-                    <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">
+                    <button type="button" class="btn btn-outline-secondary btn-primary" data-bs-dismiss="modal">
                         <s:text name="generic.no"/>
                     </button>
                 </div>
@@ -577,8 +577,8 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                 </div>
 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn" value="%{getText('generic.yes')}"/>&nbsp;
-                    <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">
+                    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.yes')}"/>&nbsp;
+                    <button type="button" class="btn btn-outline-secondary btn-primary" data-bs-dismiss="modal">
                         <s:text name="generic.no"/>
                     </button>
                 </div>
@@ -670,7 +670,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
                     <button type="button" id="save_bookmark" onclick="saveBookmark()" class="btn btn-primary">
                         <s:text name="generic.save"/>
                     </button>
-                    <button type="button" class="btn" data-dismiss="modal">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                         <s:text name="generic.cancel"/>
                     </button>
                 </div>
@@ -710,7 +710,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
 
         $('#subtitle_folder_name:first').text(originalName);
 
-        $('#addedit-bookmark-modal').modal({show: true});
+        $('#addedit-bookmark-modal').modal('show');
     }
 
 
@@ -746,7 +746,7 @@ We used to call them Bookmarks and Folders, now we call them Blogroll links and
 
         $('#subtitle_folder_name:first').text(originalName);
 
-        $('#addedit-bookmark-modal').modal({show: true});
+        $('#addedit-bookmark-modal').modal('show');
     }
 
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksImport.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksImport.jsp
index cceee2064..e053034eb 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksImport.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksImport.jsp
@@ -33,6 +33,8 @@
     <s:file name="opmlFile" />
     <br />
     <br />
-    <s:submit value="%{getText('bookmarksImport.import')}" />
-    <s:submit value="%{getText('generic.cancel')}" action="bookmarks" />
+    <div class="mb-3">
+        <s:submit theme="simple" cssClass="btn btn-primary" value="%{getText('bookmarksImport.import')}" />
+        <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.cancel')}" action="bookmarks" />
+    </div>
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksSidebar.jsp
index 9c16eedfa..29db953fd 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/BookmarksSidebar.jsp
@@ -24,7 +24,7 @@
     <%-- Add Blogroll --%>
 
     <a href="#" onclick="newBlogroll()">
-        <span class="glyphicon glyphicon-plus"></span>
+        <span class="bi bi-plus-lg"></span>
         <s:text name="bookmarksForm.addFolder"/>
     </a>
 </p>
@@ -35,7 +35,7 @@
         <s:param name="weblog" value="%{actionWeblog.handle}"/>
     </s:url>
     <s:a href="%{importBookmarks}">
-        <span class="glyphicon glyphicon-plus"></span>
+        <span class="bi bi-plus-lg"></span>
         <s:text name="bookmarksForm.importBookmarks"/>
     </s:a>
 </p>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp
index 324814c15..45848f2c6 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp
@@ -60,7 +60,7 @@
                            data-category-name="<s:property value="categoryName"/>"
                            data-category-desc="<s:property value="categoryDesc"/>"
                            data-category-image="<s:property value="categoryImage"/>">
-                            <span class="glyphicon glyphicon-edit"></span>
+                            <span class="bi bi-pencil-square"></span>
                         </a>
 
                     </td>
@@ -75,7 +75,7 @@
                                data-category-id="<s:property value="categoryId" />"
                                data-category-name="<s:property value="categoryName" />"
                                data-category-in-use="<s:property value="categoryInUse"/>">
-                                <span class="glyphicon glyphicon-trash"></span>
+                                <span class="bi bi-trash"></span>
                             </a>
 
                         </s:if>
@@ -134,7 +134,7 @@
                 <button onclick="submitEditedCategory()" class="btn btn-primary">
                     <s:text name="generic.save"/>
                 </button>
-                <button type="button" class="btn" data-dismiss="modal">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                     <s:text name="generic.cancel"/>
                 </button>
             </div>
@@ -156,7 +156,7 @@
         $('#categoryEditForm_bean_description').val(desc);
         $('#categoryEditForm_bean_image').val(image);
 
-        $('#category-edit-modal').modal({show: true});
+        $('#category-edit-modal').modal('show');
 
     }
 
@@ -267,8 +267,8 @@
                 </div>
 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn btn-danger" value="%{getText('generic.yes')}"/>&nbsp;
-                    <button type="button" class="btn btn-default" data-dismiss="modal">
+                    <s:submit theme="simple" cssClass="btn btn-danger" value="%{getText('generic.yes')}"/>&nbsp;
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                         <s:text name="generic.no" />
                     </button>
                 </div>
@@ -293,7 +293,7 @@
             $('#category-empty').css('display', 'block');
         }
         populateCategorySelect(id);
-        $('#delete-category-modal').modal({show: true});
+        $('#delete-category-modal').modal('show');
     }
 
     function populateCategorySelect(removeId) {
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp
index ca4b34aef..b8f683968 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp
@@ -27,7 +27,7 @@
     <s:set var="categoryImage" value="#post.image"/>
 
     <a href="#" onclick="showCategoryAddModal()">
-        <span class="glyphicon glyphicon-plus"></span>
+        <span class="bi bi-plus-lg"></span>
         <s:text name="categoriesForm.addCategory"/>
     </a>
 </p>
@@ -48,7 +48,7 @@
 
         validateCategory();
 
-        $('#category-edit-modal').modal({show: true});
+        $('#category-edit-modal').modal('show');
     }
 
 </script>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Comments.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Comments.jsp
index 8331c284a..ad2240cc0 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Comments.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Comments.jsp
@@ -373,7 +373,7 @@
         <%-- Save changes and cancel buttons --%>
 
         <hr size="1" noshade="noshade"/>
-        <s:submit cssClass="btn btn-primary" value="%{getText('commentManagement.update')}"/>
+        <s:submit theme="simple" cssClass="btn btn-primary" value="%{getText('commentManagement.update')}"/>
 
     </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/CommentsSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/CommentsSidebar.jsp
index 54ccfd94c..7e8cf2f74 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/CommentsSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/CommentsSidebar.jsp
@@ -56,7 +56,7 @@
     </script>
     
     <div class="control-group">
-        <label for="bean.startDateString" class="control-label">
+        <label for="bean.startDateString" class="col-form-label">
             <s:text name="commentManagement.startDate"/>
         </label>
         <div class="controls">
@@ -64,8 +64,8 @@
 
                 <s:textfield name="bean.startDateString" readonly="true"
                              theme="simple" cssClass="date-picker form-control"/>
-                <label for="bean.startDateString" class="input-group-addon btn">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                <label for="bean.startDateString" class="input-group-text btn">
+                    <span class="bi bi-calendar"></span>
                 </label>
 
             </div>
@@ -80,7 +80,7 @@
     </script>
 
     <div class="control-group">
-        <label for="bean.endDateString" class="control-label">
+        <label for="bean.endDateString" class="col-form-label">
             <s:text name="commentManagement.endDate"/>
         </label>
         <div class="controls">
@@ -88,8 +88,8 @@
 
                 <s:textfield name="bean.endDateString" readonly="true"
                              theme="simple" cssClass="date-picker form-control"/>
-                <label for="bean.endDateString" class="input-group-addon btn">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                <label for="bean.endDateString" class="input-group-text btn">
+                    <span class="bi bi-calendar"></span>
                 </label>
 
             </div>
@@ -109,7 +109,7 @@
     <%-- ========================================================= --%>
     <%-- filter button --%>
 
-    <s:submit cssClass="btn btn-default" value="%{getText('commentManagement.query')}"/>
+    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('commentManagement.query')}"/>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp
index db793bb43..3e2fc8d26 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp
@@ -100,7 +100,7 @@
             <s:param name="bean.id" value="#post.id" />
         </s:url>
         <s:a href="%{editUrl}">
-            <span class="glyphicon glyphicon-edit" data-toggle="tooltip" data-placement="top"
+            <span class="bi bi-pencil-square" data-bs-toggle="tooltip" data-bs-placement="top"
                   title="<s:text name='generic.edit'/>">
             </span>
         </s:a>
@@ -143,8 +143,8 @@
         <a href="#" class="entry-delete-link"
             data-post-id="<s:property value="postId" />"
             data-post-title="<s:property value="postTitle"/>">
-            <span class="glyphicon glyphicon-trash"
-                  data-toggle="tooltip" data-placement="top" title="<s:text name='generic.delete'/>">
+            <span class="bi bi-trash"
+                  data-bs-toggle="tooltip" data-bs-placement="top" title="<s:text name='generic.delete'/>">
             </span>
         </a>
     </td>
@@ -202,29 +202,29 @@
                 
                 <div class="modal-body">
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">
                             <s:text name="weblogEntryRemove.entryTitle"/>
                         </label>
                         <div class="col-sm-9 controls">
-                            <p class="form-control-static" style="padding-top:0px" id="postTitleLabel"></p>
+                            <p class="form-control-plaintext" style="padding-top:0px" id="postTitleLabel"></p>
                         </div>
                     </div>
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">
                             <s:text name="weblogEntryRemove.entryId"/>
                         </label>
                         <div class="col-sm-9 controls">
-                            <p class="form-control-static" style="padding-top:0px" id="postIdLabel"></p>
+                            <p class="form-control-plaintext" style="padding-top:0px" id="postIdLabel"></p>
                         </div>
                     </div>
 
                 </div>
                 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn" value="%{getText('generic.yes')}"/>
-                    <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">
+                    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.yes')}"/>
+                    <button type="button" class="btn btn-outline-secondary btn-primary" data-bs-dismiss="modal">
                         <s:text name="generic.no" />
                     </button>
                 </div>
@@ -242,7 +242,7 @@
         $('#postIdLabel').text(postId);
         $('#postTitleLabel').text(postTitle);
         $('#removeId').val(postId);
-        $('#delete-entry-modal').modal({show: true});
+        $('#delete-entry-modal').modal('show');
     }
 
     // Values come from data-* attributes and are bound via delegated listeners.
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntriesSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntriesSidebar.jsp
index 217ebe7e6..e58527d92 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntriesSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntriesSidebar.jsp
@@ -49,7 +49,7 @@
     <%-- filter by date --%>
 
     <div class="control-group">
-        <label for="bean.startDateString" class="control-label">
+        <label for="bean.startDateString" class="col-form-label">
             <s:text name="weblogEntryQuery.label.startDate"/>
         </label>
         <div class="controls">
@@ -57,8 +57,8 @@
 
                 <s:textfield name="bean.startDateString" readonly="true"
                              theme="simple" cssClass="date-picker form-control"/>
-                <label for="bean.startDateString" class="input-group-addon btn">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                <label for="bean.startDateString" class="input-group-text btn">
+                    <span class="bi bi-calendar"></span>
                 </label>
 
             </div>
@@ -66,7 +66,7 @@
     </div>
 
     <div class="control-group">
-        <label for="bean.endDateString" class="control-label">
+        <label for="bean.endDateString" class="col-form-label">
             <s:text name="weblogEntryQuery.label.endDate"/>
         </label>
         <div class="controls">
@@ -74,8 +74,8 @@
 
                 <s:textfield name="bean.endDateString" readonly="true"
                              theme="simple" cssClass="date-picker form-control"/>
-                <label for="bean.endDateString" class="input-group-addon btn">
-                    <span class="glyphicon glyphicon-calendar"></span>
+                <label for="bean.endDateString" class="input-group-text btn">
+                    <span class="bi bi-calendar"></span>
                 </label>
 
             </div>
@@ -102,7 +102,7 @@
     <%-- ========================================================= --%>
     <%-- filter button --%>
 
-    <s:submit cssClass="btn" value="%{getText('weblogEntryQuery.button.query')}"/>
+    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('weblogEntryQuery.button.query')}"/>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
index 3a329c574..59b6cd858 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
@@ -20,7 +20,7 @@
 <%-- Prevent annoying scrolling. taken from http://stackoverflow.com/a/10548809/3591946 --%>
 <script type="text/javascript">
     $().ready(function () {
-        $("a[href='#'][data-toggle='collapse']").click(function (e) {
+        $("a[href='#'][data-bs-toggle='collapse']").click(function (e) {
             e.preventDefault();
         });
     });
@@ -65,14 +65,14 @@
 
     <%-- permalink --%>
     <s:if test="actionName == 'entryEdit'">
-        <div class="form-group">
+        <div class="row mb-3">
 
             <label class="col-md-3" for="entry_bean_permalink">
                 <s:text name="weblogEdit.permaLink"/>
             </label>
 
             <div class="controls col-md-9">
-                <p class="form-control-static">
+                <p class="form-control-plaintext">
                     <s:if test="bean.published">
                         <a id="entry_bean_permalink" href='<s:property value="entry.permalink" />'>
                             <s:property value="entry.permalink"/>
@@ -106,42 +106,42 @@
     </s:else>
 
     <%-- status --%>
-    <div class="form-group">
+    <div class="row mb-3">
         <label class="col-md-3" for="weblogEdit.status"><s:text name="weblogEdit.status"/></label>
 
         <div class="controls col-md-9">
 
-            <p class="form-control-static">
+            <p class="form-control-plaintext">
                 <s:if test="bean.published">
-                    <span class="label label-success">
+                    <span class="label text-bg-success">
                         <s:text name="weblogEdit.published"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:if>
                 <s:elseif test="bean.draft">
-                    <span class="label label-info">
+                    <span class="label text-bg-info">
                         <s:text name="weblogEdit.draft"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:elseif test="bean.pending">
-                    <span class="label label-warning">
+                    <span class="label text-bg-warning">
                         <s:text name="weblogEdit.pending"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:elseif test="bean.scheduled">
-                    <span class="label label-info">
+                    <span class="label text-bg-info">
                         <s:text name="weblogEdit.scheduled"/>
                         (<s:text name="weblogEdit.updateTime"/>
                         <s:date name="entry.updateTime"/>)
                     </span>
                 </s:elseif>
                 <s:else>
-                    <span class="label label-danger"><s:text name="weblogEdit.unsaved"/></span>
+                    <span class="label text-bg-danger"><s:text name="weblogEdit.unsaved"/></span>
                 </s:else>
             </p>
 
@@ -150,7 +150,7 @@
     </div>
 
 
-    <div class="panel-group" id="accordion">
+    <div class="accordion" id="accordion">
 
             <%-- Weblog editor --%>
 
@@ -160,17 +160,17 @@
 
         <s:if test="!entryPlugins.isEmpty">
 
-            <div class="panel panel-default" id="panel-plugins">
-                <div class="panel-heading">
+            <div class="card" id="panel-plugins">
+                <div class="card-header">
 
-                    <h4 class="panel-title">
-                        <a class="collapsed" data-toggle="collapse" data-target="#collapsePlugins" href="#">
+                    <h4 class="card-title">
+                        <a class="collapsed text-body text-decoration-none" data-bs-toggle="collapse" data-bs-target="#collapsePlugins" href="#">
                             <s:text name="weblogEdit.pluginsToApply"/> </a>
                     </h4>
 
                 </div>
-                <div id="collapsePlugins" class="panel-collapse collapse">
-                    <div class="panel-body">
+                <div id="collapsePlugins" class="collapse">
+                    <div class="card-body">
 
                         <s:checkboxlist name="bean.plugins" list="entryPlugins" listKey="name" listValue="name"/>
 
@@ -182,37 +182,39 @@
 
             <%-- Advanced settings --%>
 
-        <div class="panel panel-default" id="panel-settings">
-            <div class="panel-heading">
+        <div class="card" id="panel-settings">
+            <div class="card-header">
 
-                <h4 class="panel-title">
-                    <a class="collapsed" data-toggle="collapse" data-parent="#collapseAdvanced"
+                <h4 class="card-title">
+                    <a class="collapsed text-body text-decoration-none" data-bs-toggle="collapse" data-bs-parent="#collapseAdvanced"
                        href="#collapseAdvanced">
                         <s:text name="weblogEdit.miscSettings"/> </a>
                 </h4>
 
             </div>
-            <div id="collapseAdvanced" class="panel-collapse collapse">
-                <div class="panel-body">
+            <div id="collapseAdvanced" class="collapse">
+                <div class="card-body">
 
-                    <div class="form-group">
+                    <div class="row mb-3">
 
-                        <label class="control-label col-md-3"><s:text name="weblogEdit.pubTime"/></label>
+                        <label class="col-form-label col-md-3"><s:text name="weblogEdit.pubTime"/></label>
 
                         <div class="controls col-md-9">
 
-                            <s:select theme="simple" name="bean.hours" list="hoursList"/> :
-                            <s:select theme="simple" name="bean.minutes" list="minutesList"/> :
-                            <s:select theme="simple" name="bean.seconds" list="secondsList"/> <br/>
-
-                            <img src="<s:url value='/roller-ui/images/spacer.png' />"
-                                 alt="spacer" style="min-height: 0.3em"/>
+                            <div class="d-flex gap-2 align-items-center mb-2">
+                                <s:select theme="simple" name="bean.hours" list="hoursList"
+                                          cssClass="form-select" cssStyle="width:5em"/> :
+                                <s:select theme="simple" name="bean.minutes" list="minutesList"
+                                          cssClass="form-select" cssStyle="width:5em"/> :
+                                <s:select theme="simple" name="bean.seconds" list="secondsList"
+                                          cssClass="form-select" cssStyle="width:5em"/>
+                            </div>
 
-                            <div class="input-group">
+                            <div class="input-group w-auto d-inline-flex">
                                 <s:textfield name="bean.dateString" readonly="true" cssStyle="width:15em"
                                              theme="simple" cssClass="date-picker form-control"/>
-                                <label for="bean.dateString" class="input-group-addon btn" style="width:3em">
-                                    <span class="glyphicon glyphicon-calendar"></span>
+                                <label for="bean.dateString" class="input-group-text btn" style="width:3em">
+                                    <span class="bi bi-calendar"></span>
                                 </label>
                             </div>
 
@@ -256,28 +258,28 @@
     <%-- The button box --%>
 
     <%-- save draft --%>
-    <s:submit cssClass="btn btn-warning"
+    <s:submit theme="simple" cssClass="btn btn-warning"
               value="%{getText('weblogEdit.save')}"
               action="%{#mainAction}!saveDraft"/>
 
     <s:if test="actionName == 'entryEdit'">
 
         <%-- preview mode --%>
-        <input class="btn btn-default" type="button" name="fullPreview"
+        <input class="btn btn-outline-secondary" type="button" name="fullPreview"
                value="<s:text name='weblogEdit.fullPreviewMode' />"
                onclick="fullPreviewMode()"/>
     </s:if>
     <s:if test="userAnAuthor">
 
         <%-- publish --%>
-        <s:submit cssClass="btn btn-success"
+        <s:submit theme="simple" cssClass="btn btn-success"
                   value="%{getText('weblogEdit.post')}"
                   action="%{#mainAction}!publish"/>
     </s:if>
     <s:else>
 
         <%-- submit for review --%>
-        <s:submit cssClass="btn btn-info"
+        <s:submit theme="simple" cssClass="btn btn-info"
                   value="%{getText('weblogEdit.submitForReview')}"
                   action="%{#mainAction}!publish"/>
     </s:else>
@@ -322,29 +324,29 @@
 
                 <div class="modal-body">
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">
                             <s:text name="weblogEntryRemove.entryTitle"/>
                         </label>
                         <div class="col-sm-9 controls">
-                            <p class="form-control-static" style="padding-top:0px" id="postTitleLabel"></p>
+                            <p class="form-control-plaintext" style="padding-top:0px" id="postTitleLabel"></p>
                         </div>
                     </div>
 
-                    <div class="form-group">
-                        <label class="col-sm-3 control-label">
+                    <div class="row mb-3">
+                        <label class="col-sm-3 col-form-label">
                             <s:text name="weblogEntryRemove.entryId"/>
                         </label>
                         <div class="col-sm-9 controls">
-                            <p class="form-control-static" style="padding-top:0px" id="postIdLabel"></p>
+                            <p class="form-control-plaintext" style="padding-top:0px" id="postIdLabel"></p>
                         </div>
                     </div>
 
                 </div>
 
                 <div class="modal-footer">
-                    <s:submit cssClass="btn" value="%{getText('generic.yes')}"/>
-                    <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">
+                    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.yes')}"/>
+                    <button type="button" class="btn btn-outline-secondary btn-primary" data-bs-dismiss="modal">
                         <s:text name="generic.no"/>
                     </button>
                 </div>
@@ -422,7 +424,7 @@
         $('#postIdLabel').text(postId);
         $('#postTitleLabel').text(postTitle);
         $('#removeId').val(postId);
-        $('#delete-entry-modal').modal({show: true});
+        $('#delete-entry-modal').modal('show');
     }
 
     // Values come from data-* attributes and are bound via delegated listeners.
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEditor.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEditor.jsp
index 2d38c37b6..68ba4c243 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntryEditor.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntryEditor.jsp
@@ -30,19 +30,19 @@
 
 <%-- summary --%>
 
-<div class="panel panel-default" id="panel-summary">
-    <div class="panel-heading">
+<div class="card" id="panel-summary">
+    <div class="card-header">
 
-        <h4 class="panel-title">
-            <a href="#" class="collapsed"
-               data-toggle="collapse" data-target="#collapseSummaryEditor">
+        <h4 class="card-title">
+            <a href="#" class="collapsed text-body text-decoration-none"
+               data-bs-toggle="collapse" data-bs-target="#collapseSummaryEditor">
                 <s:text name="weblogEdit.summary"/>
             </a>
         </h4>
 
     </div>
-    <div id="collapseSummaryEditor" class="panel-collapse collapse">
-        <div class="panel-body">
+    <div id="collapseSummaryEditor" class="collapse">
+        <div class="card-body">
 
             <s:textarea id="edit_summary" name="bean.summary"
                         tabindex="6" rows="10" cssClass="col-sm-12" theme="simple"/>
@@ -64,9 +64,7 @@
 
             <div class="modal-header">
                 <h4 class="modal-title"><s:text name='weblogEdit.insertMediaFile'/></h4>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
 
             <div class="modal-body">
@@ -80,7 +78,7 @@
             </div>
 
             <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
             </div>
 
         </div>
@@ -210,7 +208,7 @@
         <s:param name="weblog" value="%{actionWeblog.handle}" />
         </s:url>
         $("#mediaFileEditor").attr('src', '<s:property value="%{mediaFileImageChooser}" />');
-        $('#mediafile_edit_lightbox').modal({show: true});
+        $('#mediafile_edit_lightbox').modal('show');
     }
 
     function onClose() {
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/EntrySidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/EntrySidebar.jsp
index ee56faf60..09580033d 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/EntrySidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/EntrySidebar.jsp
@@ -56,7 +56,7 @@
                             <s:param name="weblog" value="%{actionWeblog.handle}" />
                             <s:param name="bean.id" value="#post.id" />
                         </s:url>
-                        <span class="glyphicon glyphicon-lock" aria-hidden="true"> </span> 
+                        <span class="bi bi-lock" aria-hidden="true"> </span> 
                         <s:a href="%{editUrl}"><str:truncateNicely lower="40">
                              <s:property value="#post.title" /></str:truncateNicely></s:a>
                     </span><br />
@@ -77,7 +77,7 @@
                             <s:param name="weblog" value="%{actionWeblog.handle}" />
                             <s:param name="bean.id" value="#post.id" />
                         </s:url>
-                        <span class="glyphicon glyphicon-edit" aria-hidden="true"> </span> 
+                        <span class="bi bi-pencil-square" aria-hidden="true"> </span> 
                         <s:a href="%{editUrl}"><str:truncateNicely lower="40">
                              <s:property value="#post.title" /></str:truncateNicely></s:a>
                     </span><br />
@@ -101,7 +101,7 @@
                                 <s:param name="weblog" value="%{actionWeblog.handle}" />
                                 <s:param name="bean.id" value="#post.id" />
                             </s:url>
-                            <span class="glyphicon glyphicon-book" aria-hidden="true"> </span> 
+                            <span class="bi bi-book" aria-hidden="true"> </span> 
                             <s:a href="%{editUrl}"><str:truncateNicely lower="40">
                                 <s:property value="#post.title" /></str:truncateNicely></s:a>
                         </span><br />
@@ -123,7 +123,7 @@
                                 <s:param name="weblog" value="%{actionWeblog.handle}" />
                                 <s:param name="bean.id" value="#post.id" />
                             </s:url>
-                            <span class="glyphicon glyphicon-time" aria-hidden="true"> </span>
+                            <span class="bi bi-clock" aria-hidden="true"> </span>
                             <s:a href="%{editUrl}"><str:truncateNicely lower="40">
                                 <s:property value="#post.title" /></str:truncateNicely></s:a>
                         </span><br />
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Maintenance.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Maintenance.jsp
index dd492a52d..ef81dd4eb 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Maintenance.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Maintenance.jsp
@@ -24,14 +24,14 @@
     <s:hidden name="weblog" value="%{actionWeblog.handle}" />
 
     <p><s:text name="maintenance.prompt.flush" /></p>
-    <s:submit value="%{getText('maintenance.button.flush')}" action="maintenance!flushCache" cssClass="btn" />
+    <s:submit theme="simple" value="%{getText('maintenance.button.flush')}" action="maintenance!flushCache" cssClass="btn btn-outline-secondary" />
 
     <s:if test="getBooleanProp('search.enabled')">
         <p><s:text name="maintenance.prompt.index" /></p>
-        <s:submit value="%{getText('maintenance.button.index')}" action="maintenance!index" cssClass="btn" />
+        <s:submit theme="simple" value="%{getText('maintenance.button.index')}" action="maintenance!index" cssClass="btn btn-outline-secondary" />
     </s:if>
 
     <p><s:text name="maintenance.prompt.reset" /></p>
-    <s:submit value="%{getText('maintenance.button.reset')}" action="maintenance!reset" cssClass="btn" />
+    <s:submit theme="simple" value="%{getText('maintenance.button.reset')}" action="maintenance!reset" cssClass="btn btn-outline-secondary" />
 
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAdd.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAdd.jsp
index 3cf419f96..8c84b5b96 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAdd.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAdd.jsp
@@ -42,24 +42,29 @@
                 label="%{getText('mediaFileAdd.includeGallery')}"
                 tooltip="%{getText('mediaFileEdit.includeGalleryHelp')}"/>
 
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <h4 class="panel-title">
+    <div class="card">
+        <div class="card-header">
+            <h4 class="card-title">
                 <s:text name="mediaFileAdd.fileLocation"/>
             </h4>
         </div>
-        <div class="panel-body">
-            <s:file id="fileControl0" name="uploadedFiles" size="30" />
-            <s:file id="fileControl1" name="uploadedFiles" size="30" />
-            <s:file id="fileControl2" name="uploadedFiles" size="30" />
-            <s:file id="fileControl3" name="uploadedFiles" size="30" />
-            <s:file id="fileControl4" name="uploadedFiles" size="30" />
+        <div class="card-body">
+            <s:file id="fileControl0" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
+            <s:file id="fileControl1" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
+            <s:file id="fileControl2" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
+            <s:file id="fileControl3" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
+            <s:file id="fileControl4" name="uploadedFiles" size="30" cssClass="form-control mb-2" />
         </div>
     </div>
 
-    <s:submit id="uploadButton" cssClass="btn btn-default"
-              value="%{getText('mediaFileAdd.upload')}" action="mediaFileAdd!save"/>
-    <s:submit cssClass="btn" value="%{getText('generic.cancel')}" action="mediaFileAdd!cancel"/>
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit id="uploadButton" cssClass="btn btn-primary" theme="simple"
+                      value="%{getText('mediaFileAdd.upload')}" action="mediaFileAdd!save"/>
+            <s:submit cssClass="btn btn-outline-secondary" theme="simple"
+                      value="%{getText('generic.cancel')}" action="mediaFileAdd!cancel"/>
+        </div>
+    </div>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp
index 92ad726bf..234a16ce8 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddExternalInclude.jsp
@@ -1,62 +1,62 @@
-<%--
-  Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  The ASF licenses this file to You
-  under the Apache License, Version 2.0 (the "License"); you may not
-  use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.  For additional information regarding
-  copyright in this work, please see the NOTICE file in the top level
-  directory of this distribution.
---%>
-<%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
-
-<p class="subtitle">
-    <s:text name="mediaFile.add.title"  />
-</p>
-
-<script>
-function submitPage(frm) {
-    var filePointer = "<a href='" + frm.url.value + "'>" + frm.title.value + "</a>";
-    parent.onClose(filePointer);
-}
-</script>
-
-<s:form id="entry" action=" " method="POST">
-	<s:hidden name="salt" />
-
-    <table class="entryEditTable" cellpadding="0" cellspacing="0" width="100%">
-
-        <tr>
-            <td class="entryEditFormLabel">
-                <label for="status">URL:</label>
-            </td>
-            <td>
-                <s:textfield name="url" size="50" maxlength="255" tabindex="1" />
-            </td>
-       </tr>
-
-       <tr>
-            <td class="entryEditFormLabel">
-                <label for="status">Title</label>
-            </td>
-            <td>
-                <s:textfield name="title" size="50" maxlength="255" />
-            </td>
-       </tr>
-
-    </table>
-
-    <br>
-    <div class="control">
-       <input type="button" value="Insert" name="submit" onclick="submitPage(this.form)" />
-       <input type="button" value="Cancel" onClick="javascript:window.parent.onClose();" />
-    </div>
-
-</s:form>
+<%--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+   contributor license agreements.  The ASF licenses this file to You
+  under the Apache License, Version 2.0 (the "License"); you may not
+  use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.  For additional information regarding
+  copyright in this work, please see the NOTICE file in the top level
+  directory of this distribution.
+--%>
+<%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
+
+<p class="subtitle">
+    <s:text name="mediaFile.add.title"  />
+</p>
+
+<script>
+function submitPage(frm) {
+    var filePointer = "<a href='" + frm.url.value + "'>" + frm.title.value + "</a>";
+    parent.onClose(filePointer);
+}
+</script>
+
+<s:form id="entry" action=" " method="POST">
+	<s:hidden name="salt" />
+
+    <table class="entryEditTable" cellpadding="0" cellspacing="0" width="100%">
+
+        <tr>
+            <td class="entryEditFormLabel">
+                <label for="status">URL:</label>
+            </td>
+            <td>
+                <s:textfield name="url" size="50" maxlength="255" tabindex="1" />
+            </td>
+       </tr>
+
+       <tr>
+            <td class="entryEditFormLabel">
+                <label for="status">Title</label>
+            </td>
+            <td>
+                <s:textfield name="title" size="50" maxlength="255" />
+            </td>
+       </tr>
+
+    </table>
+
+    <br>
+    <div class="control">
+       <input type="button" value="Insert" name="submit" onclick="submitPage(this.form)" />
+       <input type="button" value="Cancel" onClick="javascript:window.parent.onClose();" />
+    </div>
+
+</s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp
index 98cb3f951..edd3b1a8c 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileAddSuccess.jsp
@@ -36,8 +36,8 @@
 
         <s:iterator value="newImages" var="newImage">
 
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
 
                     <div class="row">
 
@@ -91,8 +91,8 @@
         <p><s:text name="mediaFileSuccess.selectEnclosure"/></p>
 
         <s:iterator value="newFiles" var="newFile">
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
 
                     <div class="row">
 
@@ -131,8 +131,8 @@
             </div>
         </s:iterator>
 
-        <div class="panel panel-default">
-            <div class="panel-body">
+        <div class="card">
+            <div class="card-body">
                 <div class="row">
 
                     <div class="col-md-1">
@@ -164,14 +164,14 @@
             <s:param name="directoryId" value="%{bean.directoryId}"/>
         </s:url>
 
-        <s:submit cssClass="btn btn-success" id="submit" value="%{getText('mediaFileSuccess.createPost')}"
+        <s:submit theme="simple" cssClass="btn btn-success" id="submit" value="%{getText('mediaFileSuccess.createPost')}"
                   action="entryAddWithMediaFile"/>
 
-        <button class="btn btn-default" onclick='window.load("<s:property value='%{mediaFileAddURL}'/>")'>
+        <button class="btn btn-outline-secondary" onclick='window.load("<s:property value='%{mediaFileAddURL}'/>")'>
             <s:text name="mediaFileSuccess.uploadMore"/>
         </button>
 
-        <button class="btn" onclick='window.load("<s:property value='%{mediaFileViewURL}'/>")'>
+        <button class="btn btn-outline-secondary" onclick='window.load("<s:property value='%{mediaFileViewURL}'/>")'>
             <s:text name="generic.cancel"/>
         </button>
     </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileEdit.jsp
index dd9d09cf7..ca378e9de 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileEdit.jsp
@@ -22,7 +22,7 @@
 </p>
 
 <s:form id="entry" action="mediaFileEdit!save" method="POST" enctype="multipart/form-data"
-        theme="bootstrap" class="form-horizontal">
+        theme="bootstrap">
 
     <s:hidden name="salt"/>
     <s:hidden name="weblog"/>
@@ -30,8 +30,8 @@
     <s:hidden name="bean.permalink"/>
 
     <s:if test="bean.isImage">
-        <div class="form-group">
-            <label class="control-label col-sm-3">Thumbnail</label>
+        <div class="row mb-3">
+            <label class="col-form-label col-sm-3">Thumbnail</label>
             <div class="controls col-sm-9">
                 <a href='<s:property value="bean.permalink" />' target="_blank">
                     <img alt="thumbnail" src='<s:property value="bean.thumbnailURL" />'
@@ -47,8 +47,8 @@
     <s:textfield name="bean.name" size="35" maxlength="100" tabindex="1"
                  label="%{getText('generic.name')}"/>
 
-    <div class="form-group">
-        <label class="control-label col-sm-3"><s:text name="mediaFileEdit.fileInfo"/></label>
+    <div class="row mb-3">
+        <label class="col-form-label col-sm-3"><s:text name="mediaFileEdit.fileInfo"/></label>
 
         <div class="controls col-sm-9">
 
@@ -67,8 +67,8 @@
         </div>
     </div>
 
-    <div class="form-group">
-        <label class="control-label col-sm-3">URL</label>
+    <div class="row mb-3">
+        <label class="col-form-label col-sm-3">URL</label>
 
         <div class="controls col-sm-9">
 
@@ -109,7 +109,7 @@
 
     <input type="submit" tabindex="7" class="btn btn-success"
            value="<s:text name="generic.save" />" name="submit"/>
-    <input type="button" tabindex="8" class="btn"
+    <input type="button" tabindex="8" class="btn btn-outline-secondary"
            value="<s:text name="generic.cancel" />" onClick="window.parent.onEditCancelled();"/>
 
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp
index c02dcb64a..cbe42cdd9 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileImageChooser.jsp
@@ -1,140 +1,140 @@
-<%--
-  Licensed to the Apache Software Foundation (ASF) under one or more
-   contributor license agreements.  The ASF licenses this file to You
-  under the Apache License, Version 2.0 (the "License"); you may not
-  use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-      http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.  For additional information regarding
-  copyright in this work, please see the NOTICE file in the top level
-  directory of this distribution.
---%>
-<%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
-
-<style>
-
-</style>
-
-<script>
-    function onSelectDirectory(id) {
-        window.location = "?directoryId=" + id + "&weblog=" + '<s:property value="actionWeblog.handle" />';
-    }
-</script>
-
-
-<%-- ********************************************************************* --%>
-
-<%-- Subtitle and folder path --%>
-
-<s:if test="childFiles || allDirectories">
-
-    <s:form id="mediaFileChooserForm" name="mediaFileChooserForm" action="mediaFileImageChooser"
-            theme="bootstrap" cssClass="form-vertical">
-        <s:hidden name="salt"/>
-        <s:hidden name="weblog"/>
-        <input type="hidden" name="mediaFileId" value=""/>
-
-        <p class="pagetip"><s:text name="mediaFileImageChooser.pageTip"/></p>
-
-        <%-- ***************************************************************** --%>
-        <%-- Maybe show media directory selector --%>
-
-        <s:if test="!allDirectories.isEmpty">
-            <s:select name="directoryId" emptyOption="true" label="%{getText('mediaFileView.viewFolder')}"
-                      list="allDirectories" listKey="id" listValue="name" onchange="onView()"/>
-        </s:if>
-
-        <%-- ***************************************************************** --%>
-        <%-- Media files grid --%>
-
-        <div id="imageGrid" class="panel panel-default">
-            <div class="panel-body">
-
-                <ul>
-
-                    <s:if test="childFiles.size() == 0">
-                        <p style="text-align: center"><s:text name="mediaFileView.noFiles"/></p>
-                    </s:if>
-
-                    <s:if test="childFiles.size() > 0">
-
-                        <s:iterator var="mediaFile" value="childFiles">
-
-                            <s:url var="mediaFileURL" includeContext="false" value="%{#mediaFile.permalink}"/>
-                            <s:url var="mediaFileThumbnailURL" value="%{#mediaFile.thumbnailURL}"/>
-
-                            <li class="align-images"
-                                onmouseover="highlight(this, true)" onmouseout="highlight(this, false)">
-
-                                <div class="mediaObject mediafile-select-target"
-                                     data-mediafile-name="<s:property value="#mediaFile.name"/>"
-                                     data-mediafile-url="<s:property value="%{mediaFileURL}"/>"
-                                     data-mediafile-is-image="<s:property value="#mediaFile.isImageFile()"/>">
-
-                                    <s:if test="#mediaFile.imageFile">
-                                        <img border="0" src="<s:property value='%{mediaFileThumbnailURL}' />"
-                                             width="<s:property value='#mediaFile.thumbnailWidth'/>"
-                                             height="<s:property value='#mediaFile.thumbnailHeight'/>"
-                                             alt="<s:property value='#mediaFile.name' />"/>
-                                    </s:if>
-
-                                    <s:else>
-                                        <span class="glyphicon glyphicon-file"></span>
-                                    </s:else>
-
-                                </div>
-
-                                <div class="mediaObjectInfo">
-                                    <str:truncateNicely upper="60">
-                                        <s:property value="#mediaFile.name"/>
-                                    </str:truncateNicely>
-                                </div>
-
-                            </li>
-
-                        </s:iterator>
-                    </s:if>
-
-                </ul>
-            </div>
-        </div>
-
-        <div style="clear:left;"></div>
-
-    </s:form>
-
-</s:if>
-
-
-<script>
-
-    function onSelectMediaFile(name, url, isImage) {
-        window.parent.onSelectMediaFile(name, url, isImage);
-    }
-
-    // Values come from data-* attributes and are bound via delegated listeners.
-    $(document).on('click', '.mediafile-select-target', function () {
-        onSelectMediaFile($(this).attr('data-mediafile-name'),
-                $(this).attr('data-mediafile-url'),
-                $(this).attr('data-mediafile-is-image'));
-    });
-
-    function highlight(el, flag) {
-        if (flag) {
-            $(el).addClass("highlight");
-        } else {
-            $(el).removeClass("highlight");
-        }
-    }
-
-    function onView() {
-        document.mediaFileChooserForm.submit();
-    }
-
-</script>
+<%--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+   contributor license agreements.  The ASF licenses this file to You
+  under the Apache License, Version 2.0 (the "License"); you may not
+  use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.  For additional information regarding
+  copyright in this work, please see the NOTICE file in the top level
+  directory of this distribution.
+--%>
+<%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
+
+<style>
+
+</style>
+
+<script>
+    function onSelectDirectory(id) {
+        window.location = "?directoryId=" + id + "&weblog=" + '<s:property value="actionWeblog.handle" />';
+    }
+</script>
+
+
+<%-- ********************************************************************* --%>
+
+<%-- Subtitle and folder path --%>
+
+<s:if test="childFiles || allDirectories">
+
+    <s:form id="mediaFileChooserForm" name="mediaFileChooserForm" action="mediaFileImageChooser"
+            theme="bootstrap" cssClass="form-vertical">
+        <s:hidden name="salt"/>
+        <s:hidden name="weblog"/>
+        <input type="hidden" name="mediaFileId" value=""/>
+
+        <p class="pagetip"><s:text name="mediaFileImageChooser.pageTip"/></p>
+
+        <%-- ***************************************************************** --%>
+        <%-- Maybe show media directory selector --%>
+
+        <s:if test="!allDirectories.isEmpty">
+            <s:select name="directoryId" emptyOption="true" label="%{getText('mediaFileView.viewFolder')}"
+                      list="allDirectories" listKey="id" listValue="name" onchange="onView()"/>
+        </s:if>
+
+        <%-- ***************************************************************** --%>
+        <%-- Media files grid --%>
+
+        <div id="imageGrid" class="card">
+            <div class="card-body">
+
+                <ul>
+
+                    <s:if test="childFiles.size() == 0">
+                        <p style="text-align: center"><s:text name="mediaFileView.noFiles"/></p>
+                    </s:if>
+
+                    <s:if test="childFiles.size() > 0">
+
+                        <s:iterator var="mediaFile" value="childFiles">
+
+                            <s:url var="mediaFileURL" includeContext="false" value="%{#mediaFile.permalink}"/>
+                            <s:url var="mediaFileThumbnailURL" value="%{#mediaFile.thumbnailURL}"/>
+
+                            <li class="align-images"
+                                onmouseover="highlight(this, true)" onmouseout="highlight(this, false)">
+
+                                <div class="mediaObject mediafile-select-target"
+                                     data-mediafile-name="<s:property value="#mediaFile.name"/>"
+                                     data-mediafile-url="<s:property value="%{mediaFileURL}"/>"
+                                     data-mediafile-is-image="<s:property value="#mediaFile.isImageFile()"/>">
+
+                                    <s:if test="#mediaFile.imageFile">
+                                        <img border="0" src="<s:property value='%{mediaFileThumbnailURL}' />"
+                                             width="<s:property value='#mediaFile.thumbnailWidth'/>"
+                                             height="<s:property value='#mediaFile.thumbnailHeight'/>"
+                                             alt="<s:property value='#mediaFile.name' />"/>
+                                    </s:if>
+
+                                    <s:else>
+                                        <span class="bi bi-file-earmark"></span>
+                                    </s:else>
+
+                                </div>
+
+                                <div class="mediaObjectInfo">
+                                    <str:truncateNicely upper="60">
+                                        <s:property value="#mediaFile.name"/>
+                                    </str:truncateNicely>
+                                </div>
+
+                            </li>
+
+                        </s:iterator>
+                    </s:if>
+
+                </ul>
+            </div>
+        </div>
+
+        <div style="clear:left;"></div>
+
+    </s:form>
+
+</s:if>
+
+
+<script>
+
+    function onSelectMediaFile(name, url, isImage) {
+        window.parent.onSelectMediaFile(name, url, isImage);
+    }
+
+    // Values come from data-* attributes and are bound via delegated listeners.
+    $(document).on('click', '.mediafile-select-target', function () {
+        onSelectMediaFile($(this).attr('data-mediafile-name'),
+                $(this).attr('data-mediafile-url'),
+                $(this).attr('data-mediafile-is-image'));
+    });
+
+    function highlight(el, flag) {
+        if (flag) {
+            $(el).addClass("highlight");
+        } else {
+            $(el).removeClass("highlight");
+        }
+    }
+
+    function onView() {
+        document.mediaFileChooserForm.submit();
+    }
+
+</script>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileSidebar.jsp
index eb43df085..4a11314b8 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileSidebar.jsp
@@ -25,7 +25,7 @@
                 <h3><s:text name="mediaFileSidebar.actions"/></h3>
 
                 <div style="clear:right">
-                    <span class="glyphicon glyphicon-picture"></span>
+                    <span class="bi bi-image"></span>
                     <s:url var="mediaFileAddURL" action="mediaFileAdd">
                         <s:param name="weblog" value="%{actionWeblog.handle}"/>
                         <s:param name="directoryName" value="%{directoryName}"/>
@@ -41,7 +41,7 @@
 
                     <div style="clear:right; margin-top: 1em">
 
-                        <span class="glyphicon glyphicon-folder-open"></span>
+                        <span class="bi bi-folder2-open"></span>
                         <s:text name="mediaFileView.addDirectory"/> <br />
 
                         <label for="newDirectoryName">
@@ -83,11 +83,11 @@
                     <s:textfield id="beanTags" name="bean.tags" size="20" maxlength="50"
                                  label="%{getText('mediaFileView.tags')}"/>
 
-                    <s:submit id="searchButton" cssClass="btn btn-primary"
+                    <s:submit id="searchButton" theme="simple" cssClass="btn btn-primary"
                               value="%{getText('mediaFileView.search')}" cssStyle="margin:5px 0;"/>
 
                     <s:if test="pager">
-                        <input id="resetButton" style="margin:5px 0;" type="button" class="btn"
+                        <input id="resetButton" style="margin:5px 0;" type="button" class="btn btn-outline-secondary"
                                name="reset" value='<s:text name="mediaFileView.reset" />'/>
                     </s:if>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp
index 46a02002b..b9880ad88 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MediaFileView.jsp
@@ -147,8 +147,8 @@
             }
         </script>
 
-        <div id="imageGrid" class="panel panel-default">
-            <div class="panel-body">
+        <div id="imageGrid" class="card">
+            <div class="card-body">
 
                 <ul>
 
@@ -280,7 +280,7 @@
             <div class="image-controls">
 
                 <s:if test="(!pager && childFiles.size() > 0) || (pager && pager.items.size() > 0)">
-                    <input id="toggleButton" type="button" class="btn" style="display: inline"
+                    <input id="toggleButton" type="button" class="btn btn-outline-secondary" style="display: inline"
                            value='<s:text name="generic.toggle" />' onclick="onToggle()"/>
 
                     <input id="deleteButton" type="button" class="btn btn-danger" style="display: inline"
@@ -294,7 +294,7 @@
                           list="allDirectories" listKey="id" listValue="name"/>
 
                 <s:if test="currentDirectory.name != 'default' && !pager">
-                    <input id="deleteFolderButton" type="button" class="btn" style="display: inline"
+                    <input id="deleteFolderButton" type="button" class="btn btn-outline-secondary" style="display: inline"
                            value='<s:text name="mediaFileView.deleteFolder" />' onclick="onDeleteFolder()"/>
                 </s:if>
 
@@ -350,7 +350,7 @@
         </s:url>
         $('#edit-subtitle').text(mediaFileName);
         $('#mediaFileEditor').attr('src', '<s:property value="%{mediaFileEditURL}" />' + '&mediaFileId=' + mediaFileId);
-        $('#mediafile_edit_lightbox').modal({show: true});
+        $('#mediafile_edit_lightbox').modal('show');
     }
 
     // Values come from data-* attributes and are bound via delegated listeners.
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MemberResign.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MemberResign.jsp
index fca415ef0..41bdabc7d 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MemberResign.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MemberResign.jsp
@@ -26,6 +26,6 @@
 <s:form action="memberResign!resign"  cssClass="form-horizontal">
     <s:hidden name="salt"/>
     <s:hidden name="weblog"/>
-    <s:submit value="%{getText('generic.yes')}" cssClass="form-horizontal"/>&nbsp;
-    <s:submit value="%{getText('generic.no')}" action="menu" cssClass="form-horizontal"/>
+    <s:submit theme="simple" cssClass="btn btn-danger" value="%{getText('generic.yes')}"/>&nbsp;
+    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('generic.no')}" action="menu"/>
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Members.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Members.jsp
index fff106413..5b70754cf 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Members.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Members.jsp
@@ -80,7 +80,7 @@ function save() {
             </s:else>
             
                 <td class="rollertable">
-                    <span class="glyphicon glyphicon-user"></span>
+                    <span class="bi bi-person"></span>
 	                <s:property value="#perm.user.userName" />
                 </td>               
                 <td class="rollertable">
@@ -108,7 +108,7 @@ function save() {
     <br />
      
     <div class="control">
-       <s:submit value="%{getText('generic.save')}" cssClass="btn" />
+       <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-outline-secondary" />
     </div>
     
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MembersInvite.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MembersInvite.jsp
index 4301f125e..c4ccabc76 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MembersInvite.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MembersInvite.jsp
@@ -51,9 +51,10 @@
        <s:text name="inviteMember.limited" />
     </div>
 
-    <br />
-    <s:submit id="inviteButton" value="%{getText('inviteMember.button.save')}"  cssClass="btn btn-default"/>
-    <s:submit value="%{getText('generic.cancel')}" action="invite!cancel" cssClass="btn"/>
+    <div class="mb-3">
+        <s:submit theme="simple" id="inviteButton" value="%{getText('inviteMember.button.save')}" cssClass="btn btn-primary"/>
+        <s:submit theme="simple" value="%{getText('generic.cancel')}" action="invite!cancel" cssClass="btn btn-outline-secondary"/>
+    </div>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/MembersSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/MembersSidebar.jsp
index 7313eea9c..10de850c7 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/MembersSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/MembersSidebar.jsp
@@ -20,7 +20,7 @@
 <h3><s:text name="mainPage.actions" /></h3>
 <hr size="1" noshade="noshade" />
 
-<span class="glyphicon glyphicon-plus"></span>
+<span class="bi bi-plus-lg"></span>
 <s:url action="invite" var="inviteUrl">
    <s:param name="weblog" value="%{actionWeblog.handle}" />
 </s:url>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/StylesheetEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/StylesheetEdit.jsp
index c3b90cfe4..dfdd9f695 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/StylesheetEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/StylesheetEdit.jsp
@@ -32,14 +32,14 @@
         <ul id="template-code-tabs" class="nav nav-tabs" role="tablist" style="margin-bottom: 1em">
 
             <li role="presentation" class="active">
-                <a href="#tabStandard" aria-controls="home" role="tab" data-toggle="tab">
+                <a href="#tabStandard" aria-controls="home" role="tab" data-bs-toggle="tab">
                     <em><s:text name="stylesheetEdit.standard"/></em>
                 </a>
             </li>
 
             <s:if test="contentsMobile != null">
                 <li role="presentation">
-                    <a href="#tabMobile" aria-controls="home" role="tab" data-toggle="tab">
+                    <a href="#tabMobile" aria-controls="home" role="tab" data-bs-toggle="tab">
                         <em><s:text name="stylesheetEdit.mobile"/></em>
                     </a>
                 </li>
@@ -63,19 +63,19 @@
         </div>
 
         <%-- Save, Close and Resize text area buttons--%>
-        <s:submit value="%{getText('generic.save')}" cssClass="btn btn-success" />
+        <s:submit theme="simple" value="%{getText('generic.save')}" cssClass="btn btn-success" />
 
         <s:if test="!customTheme">
-            <s:submit value="%{getText('stylesheetEdit.revert')}" cssClass="btn"
+            <s:submit theme="simple" value="%{getText('stylesheetEdit.revert')}" cssClass="btn btn-outline-secondary"
                 onclick="revertStylesheet();return false;"
-                      tooltip="%{getText('stylesheetEdit.revertTip')}" />
+                title="%{getText('stylesheetEdit.revertTip')}" />
         </s:if>
 
         <%-- Only delete if we have no custom templates ie website.customStylesheetPath=null --%>
         <s:if test="sharedThemeStylesheet">
-            <s:submit value="%{getText('stylesheetEdit.delete')}"  cssClass="btn btn-danger"
+            <s:submit theme="simple" value="%{getText('stylesheetEdit.delete')}" cssClass="btn btn-danger"
                 onclick="deleteStylesheet();return false;"
-                      tooltip="%{getText('stylesheetEdit.deleteTip')}" />
+                title="%{getText('stylesheetEdit.deleteTip')}" />
         </s:if>
 
     </s:form>
@@ -90,8 +90,8 @@
         <s:form action="stylesheetEdit!copyStylesheet" theme="bootstrap" cssClass="form-vertical">
             <s:hidden name="salt" />
             <s:hidden name="weblog" />
-            <s:submit value="%{getText('stylesheetEdit.copyStylesheet')}" cssClass="btn btn-success"
-                tooltip="%{getText('stylesheetEdit.createStylesheetTip')}" />
+            <s:submit theme="simple" value="%{getText('stylesheetEdit.copyStylesheet')}" cssClass="btn btn-success"
+                title="%{getText('stylesheetEdit.createStylesheetTip')}" />
         </s:form>
 
     </s:if>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/TemplateEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/TemplateEdit.jsp
index 81b10e642..ba3549629 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/TemplateEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/TemplateEdit.jsp
@@ -92,14 +92,14 @@
     <ul id="template-code-tabs" class="nav nav-tabs" role="tablist" style="margin-bottom: 1em">
 
         <li role="presentation" class="active">
-            <a href="#tabStandard" aria-controls="home" role="tab" data-toggle="tab">
+            <a href="#tabStandard" aria-controls="home" role="tab" data-bs-toggle="tab">
                 <em><s:text name="stylesheetEdit.standard"/></em>
             </a>
         </li>
 
         <s:if test="bean.contentsMobile != null">
             <li role="presentation">
-                <a href="#tabMobile" aria-controls="home" role="tab" data-toggle="tab">
+                <a href="#tabMobile" aria-controls="home" role="tab" data-bs-toggle="tab">
                     <em><s:text name="stylesheetEdit.mobile"/></em>
                 </a>
             </li>
@@ -125,31 +125,35 @@
     <%-- ================================================================== --%>
     <%-- Save, Close and Resize text area buttons--%>
 
-    <s:submit value="%{getText('generic.save')}" cssClass="btn btn-default"/>
-    <input type="button" value='<s:text name="generic.done"/>' class="button btn"
-           onclick="window.location='<s:url action="templates"><s:param name="weblog" value="%{weblog}"/></s:url>'"/>
+    <div class="row mb-3">
+        <div class="col-sm-9 offset-sm-3">
+            <s:submit value="%{getText('generic.save')}" cssClass="btn btn-primary" theme="simple"/>
+            <input type="button" value='<s:text name="generic.done"/>' class="btn btn-outline-secondary"
+                   onclick="window.location='<s:url action="templates"><s:param name="weblog" value="%{weblog}"/></s:url>'"/>
+        </div>
+    </div>
 
     <%-- ================================================================== --%>
     <%-- Advanced settings inside a control toggle --%>
 
     <s:if test="template.custom">
 
-        <div class="panel-group" id="accordion" style="margin-top:2em">
+        <div class="accordion" id="accordion" style="margin-top:2em">
 
-        <div class="panel panel-default" id="panel-plugins">
+        <div class="card" id="panel-plugins">
 
-            <div class="panel-heading">
+            <div class="card-header">
 
-                <h4 class="panel-title">
-                    <a class="collapsed" data-toggle="collapse" data-target="#collapseAdvanced" href="#">
+                <h4 class="card-title">
+                    <a class="collapsed text-body text-decoration-none" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" href="#">
                         <s:text name="pageForm.advancedSettings"/>
                     </a>
                 </h4>
 
             </div>
 
-            <div id="collapseAdvanced" class="panel-collapse collapse">
-                <div class="panel-body">
+            <div id="collapseAdvanced" class="collapse">
+                <div class="card-body">
 
                     <s:select name="bean.templateLanguage" list="templateLanguages" size="1"
                               label="%{getText('pageForm.templateLanguage')}"/>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp
index d5e36ac0d..bfb50b7c4 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/Templates.jsp
@@ -76,12 +76,12 @@
                             <a href="#" class="template-delete-link"
                                data-template-id="<s:property value="#p.id"/>"
                                data-template-name="<s:property value="#p.name"/>">
-                                <span class="glyphicon glyphicon-trash"></span>
+                                <span class="bi bi-trash"></span>
                             </a>
 
                         </s:if>
                         <s:else>
-                            <span class="glyphicon glyphicon-lock"></span>
+                            <span class="bi bi-lock"></span>
                         </s:else>
                     </td>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/TemplatesSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/TemplatesSidebar.jsp
index a5bdc6080..ba81ada5c 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/TemplatesSidebar.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/TemplatesSidebar.jsp
@@ -20,7 +20,7 @@
 <h3><s:text name="pagesForm.addNewPage"/></h3>
 <hr size="1" noshade="noshade"/>
 
-<s:form action="templates!add" theme="bootstrap" cssClass="form-horizontal" id="templateAdd">
+<s:form action="templates!add" theme="bootstrap" id="templateAdd" cssClass="form-horizontal">
     <s:hidden name="salt"/>
     <s:hidden name="weblog"/>
 
@@ -32,7 +32,7 @@
         <s:select name="newTmplAction" list="availableActions"/>
     </s:if>
 
-    <s:submit class="btn" value="%{getText('pagesForm.add')}"/>
+    <s:submit theme="simple" cssClass="btn btn-outline-secondary" value="%{getText('pagesForm.add')}"/>
 
 </s:form>
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp
index f71d9de08..5314d8166 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/ThemeEdit.jsp
@@ -31,9 +31,9 @@
 
     <div class="row row-display-flex">
 
-        <div class="col-xs-6">
-            <div class="panel panel-default">
-                <div class="panel-body" id="sharedChooser">
+        <div class="col-6">
+            <div class="card">
+                <div class="card-body" id="sharedChooser">
                     <h3>
                         <input id="sharedRadio" type="radio" name="themeType" value="shared"
                             <s:if test="!customTheme">checked</s:if> onclick="proposeThemeTypeChange($(this))"/>&nbsp;
@@ -44,9 +44,9 @@
             </div>
         </div>
 
-        <div class="col-xs-6">
-            <div class="panel panel-default">
-                <div class="panel-body" id="customChooser">
+        <div class="col-6">
+            <div class="card">
+                <div class="card-body" id="customChooser">
                     <h3>
                         <input id="customRadio" type="radio" name="themeType" value="custom"
                             <s:if test="customTheme">checked</s:if> onclick="proposeThemeTypeChange($(this))"/>&nbsp;
@@ -89,7 +89,7 @@
                 onchange="proposeSharedThemeChange(this[selectedIndex].value)"/>
         </p>
         <p><s:text name="themeEditor.thisTheme"/> <p id="themeDescription"></p>
-        <p><img id="themeThumbnail" src="" class="img-responsive img-thumbnail" style="max-width: 30em" /></p>
+        <p><img id="themeThumbnail" src="" class="img-fluid img-thumbnail" style="max-width: 30em" /></p>
 
     </div>
 
@@ -103,13 +103,16 @@
 
         <%-- Preview and Update buttons --%>
         <p> <s:text name="themeEditor.previewDescription"/> </p>
-        <input type="button" name="themePreview" class="btn"
+        <input type="button" name="themePreview" class="btn btn-outline-secondary"
             value="<s:text name='themeEditor.preview' />"
             onclick="fullPreview($('#themeSelector').get(0))"/>
 
-        <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/>
-
-        <input type="button" class="btn" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+        <div class="row mb-3">
+            <div class="col-sm-9 offset-sm-3">
+                <s:submit cssClass="btn btn-primary" value="%{getText('themeEditor.save')}" theme="simple"/>
+                <input type="button" class="btn btn-outline-secondary" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+            </div>
+        </div>
 
     </div>
 
@@ -133,9 +136,12 @@
         </s:else>
 
         <%-- Update button --%>
-        <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/>
-
-        <input type="button" class="btn" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+        <div class="row mb-3">
+            <div class="col-sm-9 offset-sm-3">
+                <s:submit cssClass="btn btn-primary" value="%{getText('themeEditor.save')}" theme="simple"/>
+                <input type="button" class="btn btn-outline-secondary" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+            </div>
+        </div>
 
     </div>
 
@@ -155,13 +161,16 @@
 
         <%-- Preview and Update buttons --%>
         <p> <s:text name="themeEditor.previewDescription"/> </p>
-        <input type="button" name="themePreview" class="btn"
+        <input type="button" name="themePreview" class="btn btn-outline-secondary"
             value="<s:text name='themeEditor.preview' />"
             onclick="fullPreview($('#themeSelector').get(0))"/>
 
-        <s:submit cssClass="btn btn-default" value="%{getText('themeEditor.save')}"/>
-
-        <input type="button" class="btn" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+        <div class="row mb-3">
+            <div class="col-sm-9 offset-sm-3">
+                <s:submit cssClass="btn btn-primary" value="%{getText('themeEditor.save')}" theme="simple"/>
+                <input type="button" class="btn btn-outline-secondary" onclick="cancelChanges()" value="<s:text name='generic.cancel'/>" />
+            </div>
+        </div>
 
     </div>
 
@@ -179,7 +188,7 @@
         <s:if test="customTheme">
         originalType = "custom"
         updateView($('#customRadio'));
-        previewImage('<s:property value="themes[0].id"/>');
+        previewImage($('#themeSelector').val());
         </s:if>
 
         <s:else>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/WeblogConfig.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/WeblogConfig.jsp
index c0437c721..db24d93f2 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/WeblogConfig.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/WeblogConfig.jsp
@@ -142,7 +142,7 @@
     </s:if>
 
     <div class="control" style="margin-bottom:5em">
-        <s:submit cssClass="btn btn-success" value="%{getText('websiteSettings.button.update')}"/>
+        <s:submit theme="simple" cssClass="btn btn-success" value="%{getText('websiteSettings.button.update')}"/>
     </div>
 
 </s:form>
@@ -157,6 +157,6 @@
     <div class="alert alert-danger" role="alert">
         <s:text name="websiteSettings.removeWebsiteWarning"/>
     </div>
-    <s:submit cssClass="btn btn-danger" value="%{getText('websiteSettings.button.remove')}"/>
+    <s:submit theme="simple" cssClass="btn btn-danger" value="%{getText('websiteSettings.button.remove')}"/>
 
 </s:form>
diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/WeblogRemoveConfirm.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/WeblogRemoveConfirm.jsp
index db4be40a6..300409cf1 100644
--- a/app/src/main/webapp/WEB-INF/jsps/editor/WeblogRemoveConfirm.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/editor/WeblogRemoveConfirm.jsp
@@ -38,7 +38,7 @@
         <s:form action="weblogRemove!remove" theme="bootstrap" cssClass="form-horizontal">
             <s:hidden name="salt" />
             <s:hidden name="weblog" value="%{actionWeblog.handle}" />
-            <s:submit cssClass="btn btn-danger" value="%{getText('generic.yesRemove')}" />
+            <s:submit theme="simple" cssClass="btn btn-danger" value="%{getText('generic.yesRemove')}" />
         </s:form>
 
     </div>
@@ -47,7 +47,7 @@
         <s:form action="weblogConfig" method="post" theme="bootstrap" cssClass="form-horizontal">
             <s:hidden name="salt" />
             <s:hidden name="weblog" value="%{actionWeblog.handle}" />
-            <s:submit cssClass="btn btn-success" value="%{getText('generic.cancel')}" />
+            <s:submit theme="simple" cssClass="btn btn-success" value="%{getText('generic.cancel')}" />
         </s:form>
 
     </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/bannerInstallation.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/bannerInstallation.jsp
index 8773ea50e..af8b537f3 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/bannerInstallation.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/bannerInstallation.jsp
@@ -17,13 +17,13 @@
 --%>
 <%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
 
-<nav class="navbar navbar-default navbar-static-top navbar-inverse">
+<nav class="navbar navbar-light navbar-static-top navbar-inverse">
     <div class="container-fluid">
         <div id="navbar" class="navbar-collapse collapse">
 
             <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed"
-                        data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                <button type="button" class="navbar-toggler collapsed"
+                        data-bs-toggle="collapse" data-bs-target="#navbar" aria-expanded="false" aria-controls="navbar">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
@@ -35,8 +35,8 @@
             <ul class="nav navbar-nav">
             </ul>
 
-            <ul class="nav navbar-nav navbar-right">
-                <li><a href="<s:url value='/'/>"><s:text name="installer.bannerTitleRight" /></a></li>
+            <ul class="nav navbar-nav ms-auto">
+                <li class="nav-item"><a class="nav-link" href="<s:url value='/'/>"><s:text name="installer.bannerTitleRight" /></a></li>
             </ul>
 
         </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/bannerStatus.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/bannerStatus.jsp
index 9c2b78e4a..d948ae3b8 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/bannerStatus.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/bannerStatus.jsp
@@ -17,22 +17,18 @@
 --%>
 <%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %>
 
-<nav class="navbar navbar-default navbar-static-top navbar-inverse">
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container-fluid">
-        <div id="navbar" class="navbar-collapse collapse">
-
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" 
-                        data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="#"><s:property value="%{getProp('site.name')}" /></a>
-            </div>
-            
-            <ul class="nav navbar-nav">
+        <a class="navbar-brand" href="#"><s:property value="%{getProp('site.name')}" /></a>
+        <button type="button" class="navbar-toggler" data-bs-toggle="collapse"
+                data-bs-target="#navbar" aria-expanded="false" aria-controls="navbar"
+                aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div id="navbar" class="collapse navbar-collapse">
+
+            <ul class="navbar-nav">
 
                 <s:if test="actionWeblog != null">
                     
@@ -40,15 +36,15 @@
                     <s:if test="#tabMenu != null">
 
                         <s:iterator var="tab" value="#tabMenu.tabs">
-                            <li class="dropdown">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                                   aria-haspopup="true" aria-expanded="false">
-                                    <s:text name="%{#tab.key}"/> <span class="caret"></span>
+                            <li class="nav-item dropdown">
+                                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button"
+                                   aria-expanded="false">
+                                    <s:text name="%{#tab.key}"/>
                                 </a>
                                 <ul class="dropdown-menu">
                                     <s:iterator var="tabItem" value="#tab.items" status="stat">
                                         <li>
-                                            <a href="<s:url action="%{#tabItem.action}">
+                                            <a class="dropdown-item" href="<s:url action="%{#tabItem.action}">
                                                 <s:param name="weblog" value="actionWeblog.handle"/></s:url>">
                                                 <s:text name="%{#tabItem.key}"/>
                                             </a>
@@ -68,15 +64,15 @@
                     <s:if test="#tabMenu != null">
 
                         <s:iterator var="tab" value="#tabMenu.tabs">
-                            <li class="dropdown">
-                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
-                                   aria-haspopup="true" aria-expanded="false">
-                                    <s:text name="%{#tab.key}"/> <span class="caret"></span>
+                            <li class="nav-item dropdown">
+                                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button"
+                                   aria-expanded="false">
+                                    <s:text name="%{#tab.key}"/>
                                 </a>
                                 <ul class="dropdown-menu">
                                     <s:iterator var="tabItem" value="#tab.items" status="stat">
                                         <li>
-                                            <a href="<s:url action='%{#tabItem.action}' />">
+                                            <a class="dropdown-item" href="<s:url action='%{#tabItem.action}' />">
                                                 <s:text name="%{#tabItem.key}"/>
                                             </a>
                                         </li>
@@ -91,30 +87,30 @@
 
             </ul>
             
-            <ul class="nav navbar-nav navbar-right">
+            <ul class="navbar-nav ms-auto">
                 
-                <li><a href="<s:url value='/'/>"><s:property value="getProp('site.shortName')"/></a></li>
+                <li class="nav-item"><a class="nav-link" href="<s:url value='/'/>"><s:property value="getProp('site.shortName')"/></a></li>
 
-                <li>
-                    <a href="<s:url action='menu' namespace='/roller-ui' />">
+                <li class="nav-item">
+                    <a class="nav-link" href="<s:url action='menu' namespace='/roller-ui' />">
                         <s:text name="mainPage.mainMenu" /></a>
                 </li>
 
                 <s:if test="authenticatedUser != null">
-                    <li>
-                        <a href="<s:url action='logout' namespace='/roller-ui' />">
+                    <li class="nav-item">
+                        <a class="nav-link" href="<s:url action='logout' namespace='/roller-ui' />">
                             <s:text name="navigationBar.logout"/></a>
                     </li>
                 </s:if>
                 <s:else>
-                    <li>
-                        <a href="<s:url action='login-redirect' namespace='/roller-ui' />">
+                    <li class="nav-item">
+                        <a class="nav-link" href="<s:url action='login-redirect' namespace='/roller-ui' />">
                             <s:text name="navigationBar.login"/></a>
                     </li>
 
                     <s:if test="getBooleanProp('users.registration.enabled') && getProp('authentication.method') != 'ldap'">
-                        <li>
-                            <a href="<s:url action='register' namespace='/roller-ui' />">
+                        <li class="nav-item">
+                            <a class="nav-link" href="<s:url action='register' namespace='/roller-ui' />">
                                 <s:text name="navigationBar.register"/></a>
                         </li>
                     </s:if>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp
index 3a81ee8d1..535d5824e 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/head.jsp
@@ -35,14 +35,14 @@ You can override it with your own file via WEB-INF/tiles-def.xml
 
 <script src="<s:url value='/webjars/jquery-validation/1.21.0/jquery.validate.min.js' />"></script>
 
-<link href="<s:url value='/webjars/bootstrap/3.4.1/css/bootstrap.min.css' />" rel="stylesheet" />
-<link href="<s:url value='/webjars/bootstrap/3.4.1/css/bootstrap-theme.min.css' />" rel="stylesheet" />
-<script src="<s:url value='/webjars/bootstrap/3.4.1/js/bootstrap.min.js' />"></script>
+<link href="<s:url value='/webjars/bootstrap/5.3.8/css/bootstrap.min.css' />" rel="stylesheet" />
+<link href="<s:url value='/webjars/bootstrap-icons/1.13.1/font/bootstrap-icons.css' />" rel="stylesheet" />
+<script src="<s:url value='/webjars/bootstrap/5.3.8/js/bootstrap.bundle.min.js' />"></script>
 
 <script src="<s:url value='/webjars/clipboard.js/2.0.11/clipboard.min.js' />"></script>
 
-<script src="<s:url value='/webjars/summernote/0.9.1/dist/summernote.min.js' />"></script>
-<link href="<s:url value='/webjars/summernote/0.9.1/dist/summernote.min.css' />" rel="stylesheet" />
+<script src="<s:url value='/webjars/summernote/0.9.1/dist/summernote-bs5.min.js' />"></script>
+<link href="<s:url value='/webjars/summernote/0.9.1/dist/summernote-bs5.min.css' />" rel="stylesheet" />
 
 <link rel="stylesheet" media="all" href='<s:url value="/roller-ui/styles/roller.css"/>' />
 
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/menu.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/menu.jsp
index 8055b6317..9231de0d2 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/menu.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/menu.jsp
@@ -21,21 +21,21 @@
 <s:if test="#tabMenu != null">
 
     <%--
-    <nav class="navbar navbar-default">
+    <nav class="navbar navbar-light">
         <div class="container-fluid">
-            <div id="navbar" class="navbar-collapse collapse">
-                <ul class="nav navbar-nav">
+            <div id="navbar" class="collapse navbar-collapse">
+                <ul class="navbar-nav">
 
                     <s:iterator id="tab" value="#tabMenu.tabs">
-                        <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
-                                aria-haspopup="true" aria-expanded="false">
-                                <s:text name="%{#tab.key}"/> <span class="caret"></span>
+                        <li class="nav-item dropdown">
+                            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button"
+                                aria-expanded="false">
+                                <s:text name="%{#tab.key}"/>
                             </a>
                             <ul class="dropdown-menu">
                                 <s:iterator id="tabItem" value="#tab.items" status="stat">
                                     <li>
-                                        <a href="<s:url action="%{#tabItem.action}"><s:param name="weblog" value="actionWeblog.handle"/></s:url>">
+                                        <a class="dropdown-item" href="<s:url action="%{#tabItem.action}"><s:param name="weblog" value="actionWeblog.handle"/></s:url>">
                                             <s:text name="%{#tabItem.key}"/>
                                         </a>
                                     </li>
@@ -43,7 +43,7 @@
                             </ul>
                         </li>
                     </s:iterator>
-                    
+
                 </ul>
             </div> <!--/.nav-collapse -->
         </div> <!--/.container-fluid -->
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/messages.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/messages.jsp
index 5f2bed2fd..6ddafe2a4 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/messages.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/messages.jsp
@@ -38,20 +38,16 @@
 
 <%-- Success Messages --%>
 <s:if test="!actionMessages.isEmpty">
-    <div id="messages" class="alert alert-success">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
+    <div id="messages" class="alert alert-success alert-dismissible fade show">
         <s:actionmessage />
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>
 </s:if>
 
 <%-- Error Messages --%>
 <s:if test="!actionErrors.isEmpty || !fieldErrors.isEmpty">
-    <div id="errors" class="alert alert-danger">
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-        </button>
+    <div id="errors" class="alert alert-danger alert-dismissible fade show">
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         <ul>
 
             <s:iterator var="actionError" value="actionErrors">
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp
index 145bbcb67..be826264e 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-mainmenupage.jsp
@@ -39,8 +39,8 @@
 
         <div class="col-md-3 roller-column-left">
 
-            <div class="panel panel-default">
-                <div class="panel-body" style="text-align: center">
+            <div class="card">
+                <div class="card-body" style="text-align: center">
 
                     <img src='<s:url value="/roller-ui/images/feather.svg" />'
                          alt="ASF feat" height="100" align="center"/>
@@ -49,8 +49,8 @@
                 </div>
             </div>
 
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
 
                     <tiles:insertAttribute name="sidebar"/>
 
@@ -61,8 +61,8 @@
 
         <div class="col-md-9 roller-column-right">
 
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
 
                     <h2 class="roller-page-title"><s:property value="pageTitle"/></h2>
                     <tiles:insertAttribute name="messages"/>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simple-tabbedpage.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simple-tabbedpage.jsp
index 1b7227e6e..f671d62c9 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simple-tabbedpage.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simple-tabbedpage.jsp
@@ -36,8 +36,8 @@
 
     <div class="row">
         <div class="col-md-12 roller-column-left">
-            <div class="panel panel-default">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
                     <tiles:insertAttribute name="messages"/>
                     <h2 class="roller-page-title"><s:property value="pageTitle"/></h2>
                     <tiles:insertAttribute name="content"/>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simplepage.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simplepage.jsp
index 9219b4980..ae910ae45 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simplepage.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-simplepage.jsp
@@ -41,8 +41,8 @@
 
             <h1 class="roller-page-title"><s:property value="pageTitle"/></h1>
             <p><tiles:insertAttribute name="messages"/>
-            <div class="panel">
-                <div class="panel-body">
+            <div class="card">
+                <div class="card-body">
                     <tiles:insertAttribute name="content"/>
                 </div>
             </div>
diff --git a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-tabbedpage.jsp b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-tabbedpage.jsp
index 8d5556f7a..8946a26f4 100644
--- a/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-tabbedpage.jsp
+++ b/app/src/main/webapp/WEB-INF/jsps/tiles/tiles-tabbedpage.jsp
@@ -41,8 +41,8 @@
 
         <div class="col-md-3 roller-column-left">
 
-            <div class="panel panel-default">
-                <div class="panel-body" style="text-align: center">
+            <div class="card">
+                <div class="card-body" style="text-align: center">
 
                     <img src='<s:url value="/roller-ui/images/feather.svg" />'
                          alt="ASF feat" height="100" align="center"/>
@@ -57,8 +57,8 @@
 
             <c:if test="${sidebar != '/WEB-INF/jsps/tiles/empty.jsp'}">
                 <s:property value="sidebar"/>
-                <div class="panel panel-default">
-                    <div class="panel-body">
+                <div class="card">
+                    <div class="card-body">
 
                         <tiles:insertAttribute name="sidebar"/>
 
@@ -69,8 +69,8 @@
         </div>
 
         <div class="col-md-9 roller-column-right">
-            <div class="panel panel-default">
-                <div class="panel-body" style="min-height: 30em">
+            <div class="card">
+                <div class="card-body" style="min-height: 30em">
 
                     <tiles:insertAttribute name="messages"/>
 
diff --git a/app/src/main/webapp/roller-ui/styles/roller.css b/app/src/main/webapp/roller-ui/styles/roller.css
index e826fd05c..b8dea7b99 100644
--- a/app/src/main/webapp/roller-ui/styles/roller.css
+++ b/app/src/main/webapp/roller-ui/styles/roller.css
@@ -49,14 +49,6 @@ p {
     margin: 10px;
 }
 
-.fade {
-    opacity: 0;
-    -webkit-transition: opacity 1.25s linear;
-    -moz-transition: opacity 1.25s linear;
-    -ms-transition: opacity 1.25s linear;
-    -o-transition: opacity 1.25s linear;
-    transition: opacity 1.25s linear;
-}
 
 /* bootstrap tweaks */
 
@@ -349,3 +341,38 @@ tr.rollertable_pending {
 
 
 
+
+/* Bootstrap 3 rendered all labels bold; Bootstrap 5 does not. Keep the
+   original emphasis on form field labels. */
+.form-label,
+.col-form-label {
+    font-weight: 700;
+}
+
+/* Bootstrap 5 leaves readonly inputs looking editable; shade them like
+   disabled ones so fields the user cannot change read as such. */
+.form-control[readonly],
+.form-select[disabled] {
+    background-color: var(--bs-secondary-bg);
+    opacity: 1;
+}
+
+/* Field hint icons sit next to the label rather than in the text flow. */
+.s2b_tooltip {
+    margin-left: .35rem;
+    color: var(--bs-secondary-color);
+    cursor: help;
+}
+
+/* Give the form panels a little breathing room inside the surrounding card. */
+form fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+/* Bootstrap 3's navbar carried a bottom margin that Bootstrap 5 dropped,
+   which left page titles butted up against the nav bar. */
+nav.navbar {
+    margin-bottom: 20px;
+}
diff --git a/app/src/main/webapp/theme/scripts/roller.js b/app/src/main/webapp/theme/scripts/roller.js
index 357fb5b8c..774ce7bf5 100644
--- a/app/src/main/webapp/theme/scripts/roller.js
+++ b/app/src/main/webapp/theme/scripts/roller.js
@@ -237,7 +237,10 @@ function actionErrors(html) {
         return error.textContent.trim();
     });
 }
-$(document).ready(function () {
+
+// weblog pages include this script with their comment form, and most themes
+// do not load jQuery, so validation only runs where jQuery Validation is loaded
+window.jQuery && jQuery.validator && jQuery(function () {
     jQuery("form.validate-form").validate();
     // Added method to check valid email address and add a custom error message
     jQuery.validator.addMethod(
@@ -259,3 +262,14 @@ $(document).ready(function () {
         regex: /^\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
     });
 });
+
+// Bootstrap 5 tooltips are opt-in; field hints come from the form theme.
+// Titles may contain markup, hence html: true.
+document.addEventListener('DOMContentLoaded', function () {
+    if (typeof bootstrap === 'undefined' || !bootstrap.Tooltip) {
+        return;
+    }
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
+        new bootstrap.Tooltip(el, {html: true, placement: 'right'});
+    });
+});
diff --git a/app/src/main/webapp/themes/basicmobile/_day-mobile.vm b/app/src/main/webapp/themes/basicmobile/_day-mobile.vm
index 95b170134..6c5362fbb 100644
--- a/app/src/main/webapp/themes/basicmobile/_day-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/_day-mobile.vm
@@ -22,10 +22,10 @@
         <a href="$entry.permalink" data-transition="slide">
       #end
         <h3>
-          #if($utils.isEmpty($entry.text))
-            $entry.transformedText
+          #if($utils.isEmpty($entry.summary))
+            $!entry.transformedText
           #else
-            $entry.transformedSummary
+            $!entry.transformedSummary
           #end
         </h3>
         #if($model.permalink)
diff --git a/app/src/main/webapp/themes/basicmobile/basic-mobile-custom.css b/app/src/main/webapp/themes/basicmobile/basic-mobile-custom.css
index 649fbbbf0..9eb9859e9 100644
--- a/app/src/main/webapp/themes/basicmobile/basic-mobile-custom.css
+++ b/app/src/main/webapp/themes/basicmobile/basic-mobile-custom.css
@@ -97,4 +97,137 @@ Basic theme styles
 }
 .content-textbox p {
     margin: 0 0 8px;
-}
\ No newline at end of file
+}
+
+/* mobile page layout ----------------------------------------------
+   The mobile templates keep their data-role markup; these rules style it
+   without a JavaScript framework. */
+
+body {
+    margin: 0;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+[data-role="header"], [data-role="footer"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: .5em;
+    padding: .5em 1em;
+    background: #333;
+    color: #fff;
+}
+
+[data-role="header"] h1, [data-role="footer"] h4 {
+    flex: 1 1 100%;
+    margin: .25em 0;
+    font-size: 1.1em;
+    text-align: center;
+}
+
+[data-role="header"] a {
+    color: #fff;
+}
+
+.ui-content {
+    padding: 1em;
+}
+
+[data-role="button"], input[type="submit"] {
+    display: inline-block;
+    padding: .5em 1em;
+    border: 1px solid #ccc;
+    border-radius: .4em;
+    background: #f6f6f6;
+    color: #333;
+    font: inherit;
+    cursor: pointer;
+}
+
+[data-role="header"] [data-role="button"] {
+    border-color: #666;
+    background: #555;
+    color: #fff;
+}
+
+[data-mini="true"] {
+    padding: .2em .6em;
+    font-size: .85em;
+}
+
+[data-role="listview"] {
+    margin: 1em 0;
+    padding: 0;
+    list-style: none;
+}
+
+[data-role="listview"][data-inset="true"] {
+    overflow: hidden;
+    border: 1px solid #ddd;
+    border-radius: .5em;
+}
+
+[data-role="listview"] > li {
+    padding: .75em 1em;
+    border-top: 1px solid #ddd;
+}
+
+[data-role="listview"] > li:first-child {
+    border-top: 0;
+}
+
+[data-role="listview"] > li[data-role="list-divider"] {
+    background: #e9e9e9;
+    font-size: .9em;
+    font-weight: bold;
+}
+
+[data-role="listview"] > li > a {
+    display: block;
+    color: inherit;
+}
+
+.ui-btn-active > a {
+    font-weight: bold;
+}
+
+[data-role="navbar"] ul {
+    display: flex;
+    gap: .5em;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+[data-role="navbar"] li {
+    flex: 1;
+}
+
+[data-role="navbar"] a {
+    display: block;
+    padding: .5em;
+    border: 1px solid #ccc;
+    border-radius: .4em;
+    background: #f6f6f6;
+    text-align: center;
+}
+
+/* popups open when their id is the URL fragment, e.g. the category chooser */
+[data-role="popup"] {
+    display: none;
+}
+
+[data-role="popup"]:target {
+    display: block;
+    margin: .5em 0;
+}
+
+[data-role="collapsible"] h2 {
+    margin: 0 0 .5em;
+    font-size: 1em;
+}
diff --git a/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm b/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
index b168e7651..dd0b1f6e8 100644
--- a/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/permalink-mobile.vm
@@ -6,22 +6,9 @@
   <title>$model.weblogEntry.title : $model.weblog.name</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link rel="stylesheet" href="$model.weblog.stylesheet">
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/default.min.css" />
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/jquery.mobile.icons.min.css" />
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
+  <link rel="stylesheet" href="$model.weblog.stylesheet?deviceType=mobile">
   #showMetaDescription()
   #showAnalyticsTrackingCode($model.weblog)
-
-  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
-
-  <script>
-    $(document).bind("mobileinit", function(){
-      $.mobile.ajaxEnabled = false;
-    });
-  </script>
-
-  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
 </head>
 <!-- permalink-mobile -->
 <body>
@@ -60,7 +47,7 @@
         <li data-theme="a">
           #showWeblogEntryCommentForm($model.weblogEntry)
         </li>
-      <ul>
+      </ul>
     
     </div>
 
diff --git a/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm b/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
index 1d1cb29f8..2599aad45 100644
--- a/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/searchresults-mobile.vm
@@ -6,22 +6,8 @@
   <title>Search Results for '$model.term' : $model.weblog.name</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <link rel="stylesheet" href="$model.weblog.stylesheet">
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/default.min.css" />
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/jquery.mobile.icons.min.css" />
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
+  <link rel="stylesheet" href="$model.weblog.stylesheet?deviceType=mobile">
 
-  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
-
-  <script>
-
-    $(document).bind("mobileinit", function(){
-      $.mobile.ajaxEnabled = false;
-    });
-
-  </script>
-
-  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
 </head>
 <!-- searchresults-mobile -->
 <body>
diff --git a/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm b/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
index 987619d9a..2cb9bc3a3 100644
--- a/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
+++ b/app/src/main/webapp/themes/basicmobile/weblog-mobile.vm
@@ -8,36 +8,15 @@
   #showMetaDescription()
   #showAnalyticsTrackingCode($model.weblog)
 
-  <link rel="stylesheet" href="$model.weblog.stylesheet">
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/default.min.css" />
-  <link rel="stylesheet" href="$url.absoluteSite/roller-ui/styles/jquery.mobile-theme/jquery.mobile.icons.min.css" />
-  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
-
-  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
-
-  <script>
-
-    $(document).bind("mobileinit", function(){
-      $.mobile.ajaxEnabled = false;
-    });
-
-  </script>
-
-  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
+  <link rel="stylesheet" href="$model.weblog.stylesheet?deviceType=mobile">
 
   <script>
-    $(document).bind("pageinit", function(){
-      $('#btnStandard').on('click', function() {
-        setCookie("roller_user_request_type","standard",30);
-        $("#btnStandard").attr('href', '?deviceType=standard').click();
+    // remember the choice, then let the link's deviceType parameter switch views
+    document.addEventListener("DOMContentLoaded", function () {
+      document.getElementById("btnStandard").addEventListener("click", function () {
+        document.cookie = "roller_user_request_type=standard; max-age=" + 30 * 24 * 60 * 60 + "; path=/";
       });
     });
-    function setCookie(c_name, value, exdays) {
-      var exdate = new Date();
-      exdate.setDate(exdate.getDate() + exdays);
-      var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString() + "; path=/");
-      document.cookie = c_name + "=" + c_value;
-    }
   </script>
 </head>
 <!-- weblog-mobile -->
@@ -47,7 +26,7 @@
     <div data-role="header" data-theme="a">
       <h1>$model.weblog.name</h1>
       <a href="$url.absoluteSite" data-icon="home" data-theme="a">Home</a>
-      <a href="#" id="btnStandard" data-role="button">View Standard</a>
+      <a href="?deviceType=standard" id="btnStandard" data-role="button">View Standard</a>
     </div>
 
     <div role="main" class="ui-content">
diff --git a/app/src/main/webapp/themes/basicmobile/weblog.vm b/app/src/main/webapp/themes/basicmobile/weblog.vm
index 8cb6de293..288359d12 100644
--- a/app/src/main/webapp/themes/basicmobile/weblog.vm
+++ b/app/src/main/webapp/themes/basicmobile/weblog.vm
@@ -7,22 +7,15 @@
     <title>$model.weblog.name</title>
     #showAutodiscoveryLinks($model.weblog)
     #showAnalyticsTrackingCode($model.weblog)
-    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
     <link rel="stylesheet" media="all" href="$model.weblog.stylesheet">
     #showMetaDescription()
     <script>
-      $(document).ready(function () {
-        $('#btnMobile').on('click', function() {
-           setCookie("roller_user_request_type","mobile",30);
-           $("#btnMobile").attr('href', '?deviceType=mobile').click();
+      // remember the choice, then let the link's deviceType parameter switch views
+      document.addEventListener("DOMContentLoaded", function () {
+        document.getElementById("btnMobile").addEventListener("click", function () {
+          document.cookie = "roller_user_request_type=mobile; max-age=" + 30 * 24 * 60 * 60 + "; path=/";
         });
       });
-      function setCookie(c_name, value, exdays) {
-        var exdate = new Date();
-        exdate.setDate(exdate.getDate() + exdays);
-        var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString() + "; path=/");
-        document.cookie = c_name + "=" + c_value;
-      }
     </script>
 </head>
 <!-- weblog -->
@@ -51,7 +44,7 @@
 <div class="rightbar_wrapper">
   <div class="rightbar">
     <div class="mobile">
-        <a id="btnMobile" href="#" alt="View Mobile Weblog">View Mobile Weblog</a>
+        <a id="btnMobile" href="?deviceType=mobile">View Mobile Weblog</a>
     </div>
     #includeTemplate($model.weblog "sidebar")
   </div>
diff --git a/app/src/test/java/org/apache/roller/weblogger/ui/EntryEditorAssetsTest.java b/app/src/test/java/org/apache/roller/weblogger/ui/EntryEditorAssetsTest.java
index 8ee6b3992..02d9fed20 100644
--- a/app/src/test/java/org/apache/roller/weblogger/ui/EntryEditorAssetsTest.java
+++ b/app/src/test/java/org/apache/roller/weblogger/ui/EntryEditorAssetsTest.java
@@ -45,7 +45,7 @@ public class EntryEditorAssetsTest {
     @Test
     public void summernoteClosesItsIconElements() throws IOException {
         String head = read(WEBAPP.resolve("WEB-INF/jsps/tiles/head.jsp"));
-        Matcher script = Pattern.compile("/webjars/(summernote/[^/]+/dist/summernote\\.min\\.js)")
+        Matcher script = Pattern.compile("/webjars/(summernote/[^/]+/dist/summernote(?:-bs5)?\\.min\\.js)")
                 .matcher(head);
         assertTrue(script.find(), "head.jsp loads Summernote");