diff --git a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/hfql.html b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/hfql.html
index de068542d85..23e8f09b21f 100644
--- a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/hfql.html
+++ b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/hfql.html
@@ -18,7 +18,7 @@
             margin-bottom: 0;
             width: auto;
          }
-         .accordion {
+         .card {
             margin-bottom: 10px;
          }
       </style>
@@ -47,9 +47,9 @@
                <!-- ** SQL Editor                                 ** -->
                <!-- ************************************************ -->
 
-               <div class="accordion">
-                  <h3 class="accordion-header">Query</h3>
-                  <div class="accordion-body" style="padding: 0;">
+               <div class="card">
+                  <h3 class="card-header">Query</h3>
+                  <div class="card-body" style="padding: 0;">
                      <button type="button" id="execute-btn" class="btn btn-primary" style="margin: 5px;">
                         <i class="fas fa-play"></i> Execute
                      </button>
@@ -97,12 +97,12 @@
                <!-- ** Query Results                              ** -->
                <!-- ************************************************ -->
 
-               <div th:if="${resultRows} != null" class="accordion">
-                  <h3 class="accordion-header">Results</h3>
-                  <div class="accordion-header">
+               <div th:if="${resultRows} != null" class="card">
+                  <h3 class="card-header">Results</h3>
+                  <div class="card-header">
                      Query executed in [[${executionTime}]].
                   </div>
-                  <div class="accordion-body" id="resultsTableCard">
+                  <div class="card-body" id="resultsTableCard">
                      <div class="table-responsive">
                         <table class="table table-striped table-bordered table-sm resultsTable" id="resultsTable">
                            <thead>
diff --git a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/home.html b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/home.html
index f3074346e4d..1fff4c6caee 100644
--- a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/home.html
+++ b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/home.html
@@ -57,9 +57,9 @@
 						<!-- ** Server Actions (no resource selected)      ** -->
 						<!-- ************************************************ -->
 
-						<div class="accordion" th:if="${resourceName.empty}">
-							<h3 class="accordion-header">Server Actions</h3>
-							<div class="accordion-body">
+						<div class="card" th:if="${resourceName.empty}">
+							<h3 class="card-header">Server Actions</h3>
+							<div class="card-body">
 								<div class="container-fluid">
 							
 								<!-- Conformance -->
@@ -109,14 +109,13 @@
 								        <div class='col-sm-5'>
 								            <div class="form-group">
 								                <div class='input-group date' id='server-history-datetime' data-bs-toggledate-format="YYYY-MM-DDTHH:mm:ss">
-                                           <div class="input-group-prepend">
+                                           <div>
                                                <span class="input-group-text">
       								                    Since
                                                </span>
 								                    </div>
 								                    <input type='text' class="form-control" id="server-history-since"/>
-														 <!-- TODO - remove -->
-                                           <div class="input-group-append input-group-addon"> <!-- input-group-addon is from Bootstrap3 but the time picker needs it there -->
+                                           <div class=" input-group-addon"> <!-- input-group-addon is from Bootstrap3 but the time picker needs it there -->
                                                <span class="input-group-text">
 								                           <i class="far fa-calendar-alt"></i>
                                                </span>
@@ -127,7 +126,7 @@
 										<div class='col-sm-3'>
 								            <div class="form-group">
 								                <div class='input-group'>
-                                           <div class="input-group-prepend">
+                                           <div>
                                                <span class="input-group-text">
 								                           Limit #
                                                </span>
diff --git a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/resource.html b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/resource.html
index 9f402c566a5..292cd8b7bbd 100644
--- a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/resource.html
+++ b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/resource.html
@@ -26,8 +26,8 @@
 					<!-- ** Default Home                                         ** -->
 					<!-- ********************************************************** -->
 
-						<div class="accordion">
-                     <div class="accordion-header">
+						<div class="card">
+                     <div class="card-header">
 							This is a RESTful server tester, which can be used to send
 							requests to, and receive responses from the server at the
 							following URL:
@@ -39,9 +39,9 @@
 						<!-- ** Resource Actions                           ** -->
 						<!-- ************************************************ -->
 						
-						<div class="accordion" style="margin-top: 20px;" th:if="${resourceName.empty} == false">
-							<h3 class="accordion-header panel-title" th:text="'Resource: ' + ${resourceName}">Resource: <b>Patient</b></h3>
-							<div class="accordion-body">
+						<div class="card" style="margin-top: 20px;" th:if="${resourceName.empty} == false">
+							<h3 class="card-header panel-title" th:text="'Resource: ' + ${resourceName}">Resource: <b>Patient</b></h3>
+							<div class="card-body">
 								This page contains various operations for interacting with
 								the <th:block th:text="${resourceName}"></th:block> resource.
 							</div>
@@ -80,12 +80,12 @@
 						</script>
 						
 						<!-- Tab panes -->
-						<div class="accordion" style="top: -2px;"><div class="accordion-body tab-content">
+						<div class="card" style="top: -2px;"><div class="card-body tab-content">
 
 							<!-- *************************************************** -->
 							<!-- Search Tab -->
 							<!-- *************************************************** -->
-							<div class="tab-pane active" id="tab-search" aria-labelledby="search-tab">
+							<div class="tab-pane" id="tab-search" aria-labelledby="search-tab">
 	
 								<!-- Search contents -->
 								<div class="container-fluid">
diff --git a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/result.html b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/result.html
index c86a2225b3d..7b9ee68afd8 100644
--- a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/result.html
+++ b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/result.html
@@ -24,22 +24,22 @@
 					<!-- *************************************************** -->
 					<!-- ** Response                                      ** -->
 					<!-- *************************************************** -->
-					<div class="accordion" id="resultWell">
-                  <div class="accordion-header">
+					<div class="card" id="resultWell">
+                  <div class="card-header">
                      Executed request against FHIR RESTful server in
                      <th:block th:text="${latencyMs} + 'ms'"/>
                   </div>
 					</div>
 
-					<div th:if="${clientCodeJson} != null" class="accordion" style="margin-top: 20px;">
-						<div class="accordion-header">
+					<div th:if="${clientCodeJson} != null" class="card" style="margin-top: 20px;">
+						<div class="card-header">
 							Client Code - 
 							<small style="color: #888;">
 								Use the following code snippet to execute this action in your
 								own client.
 							</small>
 						</div>
-						<div class="accordion-body clientCodeBox" id="clientCodeBody">
+						<div class="card-body clientCodeBox" id="clientCodeBody">
 						</div>
 						<script type="text/javascript" src="js/ClientCodeGeneratorHapi.js"></script>
 						<script type="text/javascript" th:utext="'var jsonClientCode = ' + ${clientCodeJson} + ';'">
diff --git a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-hfql-banner-card.html b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-hfql-banner-card.html
index bef56794ecd..8a598e7343a 100644
--- a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-hfql-banner-card.html
+++ b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-hfql-banner-card.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<div class="accordion" style="margin-top: 10px;" th:fragment="banner">
-   <h3 class="accordion-header">HFQL / SQL Execution</h3>
-   <div class="accordion-body">
+<div class="card" style="margin-top: 10px;" th:fragment="banner">
+   <h3 class="card-header">HFQL / SQL Execution</h3>
+   <div class="card-body">
       This page can be used to execute queries using the HAPI FHIR Query Language (HFQL),
       which is a SQL-like syntax for querying FHIR repositories. Learn more about
       HFQL architecture at <a href="https://smilecdr.com/docs/hfql/">https://smilecdr.com/docs/hfql/</a>, and
diff --git a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-result-controltable-hapi.html b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-result-controltable-hapi.html
index 10b7da4d556..bb7d55f7c24 100644
--- a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-result-controltable-hapi.html
+++ b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-result-controltable-hapi.html
@@ -6,12 +6,12 @@ controls for viewing/editing/etc results
 ca.uhn.hapi Bundle
 */-->
 <th:block th:fragment="controltable">
-   <div class="panel-group" id="accordion" style="margin-bottom: 0px;">
+   <div class="panel-group" id="card" style="margin-bottom: 0px;">
       <div class="panel panel-default" style="border: none; border-bottom: 1px solid #ddd; border-radius: 0px;">
          <div class="panel-heading">
             <div class="panel-title">
                <th:block th:if="${#lists.isEmpty(bundle.entries)}">Bundle contains no entries</th:block>
-               <a th:unless="${#lists.isEmpty(bundle.entries)}" data-bs-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+               <a th:unless="${#lists.isEmpty(bundle.entries)}" data-bs-toggle="collapse" data-parent="#card" href="#collapseOne">
                   <i id="collapseOneIcon" class="far fa-minus-square"></i>
                   <span th:if="${bundle.totalResults.empty}" th:text="'Bundle contains ' + ${#lists.size(bundle.entries)} + ' entries'"/>
                   <span th:unless="${bundle.totalResults.empty}" th:text="'Bundle contains ' + ${#lists.size(bundle.entries)} + ' / ' + ${bundle.totalResults.value} + ' entries'"/>
diff --git a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-result-controltable-ri.html b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-result-controltable-ri.html
index f9097077d8e..662e8a1cbe4 100644
--- a/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-result-controltable-ri.html
+++ b/hapi-fhir-testpage-overlay/src/main/webapp/WEB-INF/templates/tmpl-result-controltable-ri.html
@@ -6,7 +6,7 @@ controls for viewing/editing/etc results
 RI Bundle
 */-->
 <th:block th:fragment="controltable">
-   <div class="panel-group" id="accordion" style="margin-bottom: 0px;">
+   <div class="panel-group" id="card" style="margin-bottom: 0px;">
       <div class="panel panel-default" style="border: none; border-bottom: 1px solid #ddd; border-radius: 0px;">
          <div class="panel-heading">
             <div class="panel-title">