diff --git a/index.html b/index.html
index 7a22997..1622f45 100644
--- a/index.html
+++ b/index.html
@@ -90,13 +90,13 @@ <h3>Questionnaire Options</h3>
                         <div>
                             <label class="form-check form-switch mt-2">
                                 Use Styling
-                                <input class="form-check-input" type="checkbox" role="switch" id="styling" data-sheet-on="Style1.css" data-sheet-off="Default.css">
+                                <input class="form-check-input" type="checkbox" role="switch" id="styling" data-sheet-on="Style1.css" data-sheet-off="Default.css" checked>
                             </label>
                         </div>
                         <div>
                             <label class="form-check form-switch mt-2">
                                 Activate Logic
-                                <input class="form-check-input" type="checkbox" role="switch" id="logic"  data-sheet-on="ActiveLogic.css" data-sheet-off="Default.css">
+                                <input class="form-check-input" type="checkbox" role="switch" id="logic"  data-sheet-on="ActiveLogic.css" data-sheet-off="Default.css" checked>
                             </label>
                         </div>
                         <div>
diff --git a/questionnaire.js b/questionnaire.js
index 8701595..0e0979e 100644
--- a/questionnaire.js
+++ b/questionnaire.js
@@ -927,7 +927,7 @@ async function nextPage(norp, retrieve, store, rootElement) {
   if (store) {
     try {
       // show a loading indicator for variables in delayedParameterArray (they take extra time to process)
-      if (moduleParams.delayedParameterArray.includes(nextElement.id)) showLoadingIndicator();
+      if (moduleParams.delayedParameterArray?.includes(nextElement.id)) showLoadingIndicator();
 
       let formData = {};
       formData[`${questName}.${questionElement.id}`] = questionElement.value;
@@ -1159,6 +1159,8 @@ export function displayQuestion(nextElement) {
 
   questionQueue.ptree();
 
+  updateProgressBar(nextElement.id)
+
   // manage the question-specific listeners in a live environment (skip in the renderer)
   if (moduleParams.renderObj?.activate) refreshListeners(nextElement);
   return nextElement;
@@ -1582,3 +1584,22 @@ export function evaluateCondition(txt) {
 }
 window.evaluateCondition = evaluateCondition
 window.questionQueue = questionQueue
+
+export function updateProgressBar(id){
+  
+  const ids = Array.from(document.querySelectorAll("form.question")).map( (q)=>q.id)
+  if (ids.length==0) document.getElementById("b5_prog_bar").display="none"
+
+  console.log(`================ UPDATING PROGRESS BAR ID=${id}`)
+  if (!ids?.length){
+    return
+  }
+  let indx = ids.indexOf(id)+1;
+  let progress = Math.round(indx/ids.length*1000)/10;
+  document.getElementById("b5_prog_bar_label").innerText=`${indx}/${ids.length} ${progress}%`
+  let pb=document.getElementById("b5_prog_bar_bar")
+  pb.style.width=`${(progress<50)?progress+2:progress}%`
+  pb.ariaValueNow=`${indx}`
+  pb.ariaValueMin="1"
+  pb.ariaValueMax=`${ids.length}`
+}
diff --git a/replace2.js b/replace2.js
index b8c8afa..0bd4b3b 100644
--- a/replace2.js
+++ b/replace2.js
@@ -1,4 +1,4 @@
-import { questionQueue, nextClick, previousClicked, moduleParams, rbAndCbClick, textBoxInput, handleXOR, displayQuestion, parseSSN, parsePhoneNumber, submitQuestionnaire, textboxinput, math, radioAndCheckboxUpdate, evaluateCondition } from "./questionnaire.js";
+import { questionQueue, nextClick, previousClicked, moduleParams, rbAndCbClick, textBoxInput, handleXOR, displayQuestion, parseSSN, parsePhoneNumber, submitQuestionnaire, textboxinput, math, radioAndCheckboxUpdate, evaluateCondition, updateProgressBar } from "./questionnaire.js";
 import { restoreResults } from "./localforageDAO.js";
 import { parseGrid, grid_replace_regex } from "./buildGrid.js";
 import { clearValidationError } from "./validate.js";
@@ -798,8 +798,15 @@ transform.render = async (obj, divId, previousResults = {}) => {
   //removing random &#x1f; unit separator chars
   contents = contents.replace(//g, "");
 
+  let b5_progress_bar = `
+  <div id="b5_prog_bar" class="progress my-2">
+    <div id="b5_prog_bar_bar" class="progress-bar text-black overflow-visible" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
+      <span id="b5_prog_bar_label"> 0/0 0%</span>
+    </div>
+  </div>`
+
   // add the HTML/HEAD/BODY tags...
-  document.getElementById(divId).innerHTML = contents + responseRequestedModal() + responseRequiredModal() + responseErrorModal() + submitModal();
+  document.getElementById(divId).innerHTML = b5_progress_bar + contents + responseRequestedModal() + responseRequiredModal() + responseErrorModal() + submitModal();
 
 
   function setActive(id) {
@@ -813,6 +820,7 @@ transform.render = async (obj, divId, previousResults = {}) => {
         element.classList.remove("active");
       }
     );
+    updateProgressBar(id)
     // make the id active...
     console.log(`setting ${id} active`);
     displayQuestion(active);