diff --git a/content/reading-tracker.html b/content/reading-tracker.html
index 7f27368..2a77bb5 100644
--- a/content/reading-tracker.html
+++ b/content/reading-tracker.html
@@ -6,461 +6,503 @@
 <style>
   @import url("https://fonts.googleapis.com/css?family=Rubik&display=swap");
 
-:root {
-  --color-black: #112c34;
-  --color-blue-dark: #65849a;
-  --color-mustard-light: #ede6d9;
-  --color-mustard-extra-light: #fcf9ed;
-  --color-mustard-midtone: #9c7830;
-}
+  :root {
+    --color-black: #112c34;
+    --color-blue-dark: #65849a;
+    --color-mustard-light: #ede6d9;
+    --color-mustard-extra-light: #fcf9ed;
+    --color-mustard-midtone: #9c7830;
+  }
 
-#prayer-section {
-  width: 100%;
-  display: block;
-}
+  #prayer-section {
+    width: 100%;
+    display: block;
+  }
 
-.black {
-  color:black;
-}
+  .black {
+    color: black;
+  }
 
-form {
-  direction: ltr;
-  right: 0;
-  width: 100%;
-  max-width: 340px;
+  form {
+    direction: ltr;
+    right: 0;
+    width: 100%;
+    max-width: 340px;
 
-  padding: 56px 48px;
+    padding: 56px 48px;
 
-  border-radius: 40px;
+    border-radius: 40px;
 
-  box-shadow: 0px 8px 40px rgba(128, 128, 128, 0.15);
+    box-shadow: 0px 8px 40px rgba(128, 128, 128, 0.15);
 
-  display: block;
-  /* flex-direction: column; */
-  align-items: center;
+    display: block;
+    /* flex-direction: column; */
+    align-items: center;
 
-  background-color: #fffef9;
-}
+    background-color: #fffef9;
+  }
 
-form > div {
-  margin-bottom: 32px;
-}
+  form > div {
+    margin-bottom: 32px;
+  }
 
-form > div:last-child {
-  margin-bottom: 0;
-}
+  form > div:last-child {
+    margin-bottom: 0;
+  }
 
-.number-input-container {
-  width: 244px;
+  .number-input-container {
+    width: 244px;
 
-  display: grid;
-  grid-template-columns: 48px auto 48px;
-}
+    display: grid;
+    grid-template-columns: 48px auto 48px;
+  }
 
-label {
-  display: inline-block;
+  label {
+    display: inline-block;
 
-  margin-bottom: 4px;
+    margin-bottom: 4px;
 
-  font-size: 12px;
-  line-height: 24px;
+    font-size: 12px;
+    line-height: 24px;
 
-  letter-spacing: 2px;
-  text-transform: uppercase;
+    letter-spacing: 2px;
+    text-transform: uppercase;
 
-  color: var(--color-blue-dark);
-}
+    color: var(--color-blue-dark);
+  }
 
-.number-input {
-  width: 100%;
+  .number-input {
+    width: 100%;
 
-  display: flex;
-  flex-direction: row;
+    display: flex;
+    flex-direction: row;
 
-  background-color: var(--color-mustard-extra-light);
+    background-color: var(--color-mustard-extra-light);
 
-  overflow: hidden;
-}
+    overflow: hidden;
+  }
 
-input[type="number"] {
-  -webkit-appearance: none;
-  -webkit-border-radius: 0px;
-  -moz-appearance: none;
-  appearance: none;
+  input[type="number"] {
+    -webkit-appearance: none;
+    -webkit-border-radius: 0px;
+    -moz-appearance: none;
+    appearance: none;
 
-  position: relative;
+    position: relative;
 
-  width: 100%;
-  min-width: 100%;
-  height: 48px;
+    width: 100%;
+    min-width: 100%;
+    height: 48px;
 
-  background-color: var(--color-mustard-extra-light);
+    background-color: var(--color-mustard-extra-light);
 
-  border: 1px solid var(--color-mustard-light);
-  border-left: 1px solid rgba(0, 0, 0, 0);
-  border-right: 1px solid rgba(0, 0, 0, 0);
-  border-radius: none;
+    border: 1px solid var(--color-mustard-light);
+    border-left: 1px solid rgba(0, 0, 0, 0);
+    border-right: 1px solid rgba(0, 0, 0, 0);
+    border-radius: none;
 
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
 
-  transition: all 0.2s ease-out;
-}
+    transition: all 0.2s ease-out;
+  }
 
-input[type="number"]:focus {
-  background-color: white;
+  input[type="number"]:focus {
+    background-color: white;
 
-  border: 1px solid var(--color-mustard-midtone);
+    border: 1px solid var(--color-mustard-midtone);
 
-  outline: none;
-}
+    outline: none;
+  }
 
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
 
-input[type="number"] {
-  -moz-appearance: textfield;
-}
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 
-.text-green {
-  color: green;
-}
+  .text-green {
+    color: green;
+  }
 
-.mt {
-  margin-top: 10px;
-}
+  .mt {
+    margin-top: 10px;
+  }
 
-.show {
-  display: block;
-}
+  .mb {
+    margin-bottom: 20px;
+  }
 
-.hide {
-  display: none;
-}
+  .show {
+    display: block;
+  }
 
-#prayer-section button {
-  position: relative;
+  .hide {
+    display: none;
+  }
 
-  height: 100%;
+  #prayer-section button {
+    position: relative;
 
-  margin-top: 32px;
-  padding: 12px 16px;
+    height: 100%;
 
-  background-color: var(--color-mustard-extra-light);
+    margin-top: 32px;
+    padding: 12px 16px;
 
-  border: 1px solid var(--color-mustard-light);
-  border-radius: none;
+    background-color: var(--color-mustard-extra-light);
 
-  transition: all 0.1s ease-out;
+    border: 1px solid var(--color-mustard-light);
+    border-radius: none;
 
-  cursor: pointer;
+    transition: all 0.1s ease-out;
 
-  -webkit-appearance: none;
+    cursor: pointer;
 
-  -webkit-transform: scale(1);
-  transform: scale(1);
-}
+    -webkit-appearance: none;
 
-#prayer-section button {
-  margin: 0;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
 
-  color: var(--color-black);
-}
+  #prayer-section button {
+    margin: 0;
 
-#prayer-section button:active,
-button:focus {
-  outline: none;
-}
+    color: var(--color-black);
+  }
 
-#prayer-section button::after {
-  content: "";
+  #prayer-section button:active,
+  button:focus {
+    outline: none;
+  }
 
-  position: absolute;
+  #prayer-section button::after {
+    content: "";
 
-  opacity: 1;
+    position: absolute;
 
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+    opacity: 1;
 
-  transition: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
 
-  background-position: center;
-  background-repeat: no-repeat;
-}
+    transition: inherit;
+
+    background-position: center;
+    background-repeat: no-repeat;
+  }
 
-#prayer-section button:disabled {
-  pointer-events: none;
-}
+  #prayer-section button:disabled {
+    pointer-events: none;
+  }
 
-#prayer-section button:disabled::after {
-  opacity: 0.25;
-}
+  #prayer-section button:disabled::after {
+    opacity: 0.25;
+  }
 
-#prayer-section .button-decrement::after {
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 12H7' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-}
+  #prayer-section .button-decrement::after {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 12H7' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  }
 
-#prayer-section .button-increment::after {
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7V17' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 12H7' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
-}
+  #prayer-section .button-increment::after {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7V17' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 12H7' stroke='%23112C34' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  }
 
-#prayer-section .button-decrement {
-  border-right: none;
-}
+  #prayer-section .button-decrement {
+    border-right: none;
+  }
 
-#prayer-section .button-increment {
-  border-left: none;
-}
+  #prayer-section .button-increment {
+    border-left: none;
+  }
 
-@media (hover: hover) {
-  input[type="number"]:hover,
-  #prayer-section button:hover {
+  @media (hover: hover) {
+    input[type="number"]:hover,
+    #prayer-section button:hover {
       background-color: white;
-  }
+    }
 
-  #prayer-section button:active {
+    #prayer-section button:active {
       background-color: var(--color-mustard-extra-light);
       transform: translateY(1px);
+    }
   }
-}
 
-@media (hover: none) {
-  #prayer-section button:active {
+  @media (hover: none) {
+    #prayer-section button:active {
       background-color: white;
       transform: translateY(1px);
+    }
   }
-}
-
 </style>
 
 <div>
-  <h3><span class="tally-display-hours"></span> hours and <span class="tally-display-minutes"></span> minutes total</h3>
-  <h3><span id="tally-display-week-hours"></span> hours and <span id="tally-display-week-minutes"></span> minutes this week</h3>
+  <h3>
+    <span class="tally-display-hours"></span> hours and
+    <span class="tally-display-minutes"></span> minutes total
+  </h3>
+
+  <div class="mb">
+    <span id="total-progress-percent">32%&nbsp;</span
+    ><progress id="total-progress" value="32" max="100">32%</progress> of
+    total goal
+  </div>
+
+  <h3>
+    <span id="tally-display-week-hours"></span> hours and
+    <span id="tally-display-week-minutes"></span> minutes this week
+  </h3>
+
+  <div class="mb">
+    <span id="weekly-progress-percent">32%&nbsp;</span
+    ><progress id="weekly-progress" value="32" max="100">32%</progress> of
+    weekly goal
+  </div>
 
   <div id="prayer-section">
     <form action="javascript:void(0);">
+      <div>
         <div>
-            <div>
-                <label for="hue">Reading minutes tally</label>
-            </div>
-            <div class="number-input-container">
-                <button
-                    type="button"
-                    class="button-decrement"
-                    onclick="setNumber(event)"
-                    data-input-id="hue"
-                    data-operation="decrement"
-                ></button>
-                <div class="number-input">
-                    <input
-                        type="number"
-                        id="hue"
-                        name="hue"
-                        class="number-input-text-box"
-                        value="0"
-                        min="0"
-                        max="360"
-                        oninput="handleNumberInput()"
-                        onblur="handleNumberInputBlur(event)"
-                        data-step="5"
-                    />
-                </div>
-                <button
-                    type="button"
-                    class="button-increment"
-                    onclick="setNumber(event)"
-                    data-input-id="hue"
-                    data-operation="increment"
-                ></button>
-            </div>
-            <label for="book-dropdown">Book</label>
-            <select id="book-dropdown">
-              <option value="Genesis">Genesis</option>
-              <option value="Exodus">Exodus</option>
-              <option value="Leviticus">Leviticus</option>
-              <option value="Numbers">Numbers</option>
-              <option value="Deuteronomy">Deuteronomy</option>
-              <option value="Joshua">Joshua</option>
-              <option value="Judges">Judges</option>
-              <option value="Ruth">Ruth</option>
-              <option value="1 Samuel">1 Samuel</option>
-              <option value="2 Samuel">2 Samuel</option>
-              <option value="1 Kings">1 Kings</option>
-              <option value="2 Kings">2 Kings</option>
-              <option value="1 Chronicles">1 Chronicles</option>
-              <option value="2 Chronicles">2 Chronicles</option>
-              <option value="Ezra">Ezra</option>
-              <option value="Nehemiah">Nehemiah</option>
-              <option value="Esther">Esther</option>
-              <option value="Job">Job</option>
-              <option value="Psalms">Psalms</option>
-              <option value="Proverbs">Proverbs</option>
-              <option value="Ecclesiastes">Ecclesiastes</option>
-              <option value="Song of Solomon">Song of Solomon</option>
-              <option value="Isaiah">Isaiah</option>
-              <option value="Jeremiah">Jeremiah</option>
-              <option value="Lamentations">Lamentations</option>
-              <option value="Ezekiel">Ezekiel</option>
-              <option value="Daniel">Daniel</option>
-              <option value="Hosea">Hosea</option>
-              <option value="Joel">Joel</option>
-              <option value="Amos">Amos</option>
-              <option value="Obadiah">Obadiah</option>
-              <option value="Jonah">Jonah</option>
-              <option value="Micah">Micah</option>
-              <option value="Nahum">Nahum</option>
-              <option value="Habakkuk">Habakkuk</option>
-              <option value="Zephaniah">Zephaniah</option>
-              <option value="Haggai">Haggai</option>
-              <option value="Zechariah">Zechariah</option>
-              <option value="Malachi">Malachi</option>
-              <option value="Matthew">Matthew</option>
-              <option value="Mark">Mark</option>
-              <option value="Luke">Luke</option>
-              <option value="John">John</option>
-              <option value="Acts">Acts</option>
-              <option value="Romans">Romans</option>
-              <option value="1 Corinthians">1 Corinthians</option>
-              <option value="2 Corinthians">2 Corinthians</option>
-              <option value="Galatians">Galatians</option>
-              <option value="Ephesians">Ephesians</option>
-              <option value="Philippians">Philippians</option>
-              <option value="Colossians">Colossians</option>
-              <option value="1 Thessalonians">1 Thessalonians</option>
-              <option value="2 Thessalonians">2 Thessalonians</option>
-              <option value="1 Timothy">1 Timothy</option>
-              <option value="2 Timothy">2 Timothy</option>
-              <option value="Titus">Titus</option>
-              <option value="Philemon">Philemon</option>
-              <option value="Hebrews">Hebrews</option>
-              <option value="James">James</option>
-              <option value="1 Peter">1 Peter</option>
-              <option value="2 Peter">2 Peter</option>
-              <option value="1 John">1 John</option>
-              <option value="2 John">2 John</option>
-              <option value="3 John">3 John</option>
-              <option value="Jude">Jude</option>
-              <option value="Revelation">Revelation</option>
-            </select>
-            <button
-                    type="button"
-                    onclick="addTime(event)"
-                >Add time</button>
-            <p id="success-message" class="text-green mt hide">Reading added successfully!</p>
+          <label for="hue">Reading minutes tally</label>
+        </div>
+        <div class="number-input-container">
+          <button
+            type="button"
+            class="button-decrement"
+            onclick="setNumber(event)"
+            data-input-id="hue"
+            data-operation="decrement"
+          ></button>
+          <div class="number-input">
+            <input
+              type="number"
+              id="hue"
+              name="hue"
+              class="number-input-text-box"
+              value="0"
+              min="0"
+              max="360"
+              oninput="handleNumberInput()"
+              onblur="handleNumberInputBlur(event)"
+              data-step="5"
+            />
+          </div>
+          <button
+            type="button"
+            class="button-increment"
+            onclick="setNumber(event)"
+            data-input-id="hue"
+            data-operation="increment"
+          ></button>
         </div>
+        <label for="book-dropdown">Book</label>
+        <select id="book-dropdown">
+          <option value="Genesis">Genesis</option>
+          <option value="Exodus">Exodus</option>
+          <option value="Leviticus">Leviticus</option>
+          <option value="Numbers">Numbers</option>
+          <option value="Deuteronomy">Deuteronomy</option>
+          <option value="Joshua">Joshua</option>
+          <option value="Judges">Judges</option>
+          <option value="Ruth">Ruth</option>
+          <option value="1 Samuel">1 Samuel</option>
+          <option value="2 Samuel">2 Samuel</option>
+          <option value="1 Kings">1 Kings</option>
+          <option value="2 Kings">2 Kings</option>
+          <option value="1 Chronicles">1 Chronicles</option>
+          <option value="2 Chronicles">2 Chronicles</option>
+          <option value="Ezra">Ezra</option>
+          <option value="Nehemiah">Nehemiah</option>
+          <option value="Esther">Esther</option>
+          <option value="Job">Job</option>
+          <option value="Psalms">Psalms</option>
+          <option value="Proverbs">Proverbs</option>
+          <option value="Ecclesiastes">Ecclesiastes</option>
+          <option value="Song of Solomon">Song of Solomon</option>
+          <option value="Isaiah">Isaiah</option>
+          <option value="Jeremiah">Jeremiah</option>
+          <option value="Lamentations">Lamentations</option>
+          <option value="Ezekiel">Ezekiel</option>
+          <option value="Daniel">Daniel</option>
+          <option value="Hosea">Hosea</option>
+          <option value="Joel">Joel</option>
+          <option value="Amos">Amos</option>
+          <option value="Obadiah">Obadiah</option>
+          <option value="Jonah">Jonah</option>
+          <option value="Micah">Micah</option>
+          <option value="Nahum">Nahum</option>
+          <option value="Habakkuk">Habakkuk</option>
+          <option value="Zephaniah">Zephaniah</option>
+          <option value="Haggai">Haggai</option>
+          <option value="Zechariah">Zechariah</option>
+          <option value="Malachi">Malachi</option>
+          <option value="Matthew">Matthew</option>
+          <option value="Mark">Mark</option>
+          <option value="Luke">Luke</option>
+          <option value="John">John</option>
+          <option value="Acts">Acts</option>
+          <option value="Romans">Romans</option>
+          <option value="1 Corinthians">1 Corinthians</option>
+          <option value="2 Corinthians">2 Corinthians</option>
+          <option value="Galatians">Galatians</option>
+          <option value="Ephesians">Ephesians</option>
+          <option value="Philippians">Philippians</option>
+          <option value="Colossians">Colossians</option>
+          <option value="1 Thessalonians">1 Thessalonians</option>
+          <option value="2 Thessalonians">2 Thessalonians</option>
+          <option value="1 Timothy">1 Timothy</option>
+          <option value="2 Timothy">2 Timothy</option>
+          <option value="Titus">Titus</option>
+          <option value="Philemon">Philemon</option>
+          <option value="Hebrews">Hebrews</option>
+          <option value="James">James</option>
+          <option value="1 Peter">1 Peter</option>
+          <option value="2 Peter">2 Peter</option>
+          <option value="1 John">1 John</option>
+          <option value="2 John">2 John</option>
+          <option value="3 John">3 John</option>
+          <option value="Jude">Jude</option>
+          <option value="Revelation">Revelation</option>
+        </select>
+        <button type="button" onclick="addTime(event)">Add time</button>
+        <p id="success-message" class="text-green mt hide">
+          Reading added successfully!
+        </p>
+      </div>
     </form>
-</div>
+  </div>
+
+  <h2>Weekly Reading</h2>
+  <canvas id="weekChart"></canvas>
 
-<h2>Weekly Reading</h2>
-    <canvas id="weekChart"></canvas>
-    
   <h2>Hours of the day</h2>
-    <canvas id="hoursChart"></canvas>
-  
+  <canvas id="hoursChart"></canvas>
+
   <h2>Days of the week</h2>
-    <canvas id="daysChart"></canvas>
-  
+  <canvas id="daysChart"></canvas>
+
   <h2>Minutes spent in each book</h2>
-    <canvas id="bookChart"></canvas>
+  <canvas id="bookChart"></canvas>
 </div>
-  <link rel="stylesheet" href="/toast.css">
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <script src="/reading.js"></script>
-  <script>
-    window.onload = init;
-  </script>
-  
-  
-  <script>
-    getTimespans().then((timespans) => {
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="/reading.js"></script>
+<script>
+  window.onload = init;
+</script>
+
+<script>
+  getTimespans()
+    .then((timespans) => {
       const [hoursMap, daysMap, weeklyMap, booksMap] = timespans;
       const endIndex = daysMap.size - 1;
 
-      const hoursChart = document.getElementById('hoursChart');
-      const daysChart = document.getElementById('daysChart');
-      const weekChart = document.getElementById('weekChart');
-      const bookChart = document.getElementById('bookChart');
-      const weeklyHoursTally = document.getElementById('tally-display-week-hours');
-      const weeklyMinutesTally = document.getElementById('tally-display-week-minutes');
-
-      const weeklyTotal = [...weeklyMap.values()].reduce((prev, current) => prev + current, 0);
+      const hoursChart = document.getElementById("hoursChart");
+      const daysChart = document.getElementById("daysChart");
+      const weekChart = document.getElementById("weekChart");
+      const bookChart = document.getElementById("bookChart");
+      const weeklyHoursTally = document.getElementById(
+        "tally-display-week-hours"
+      );
+      const weeklyMinutesTally = document.getElementById(
+        "tally-display-week-minutes"
+      );
+
+      const weeklyTotal = [...weeklyMap.values()].reduce(
+        (prev, current) => prev + current,
+        0
+      );
 
       weeklyHoursTally.innerText = Math.floor(weeklyTotal / 60);
 
       weeklyMinutesTally.innerText = weeklyTotal % 60;
-  
+
+      const weeklyProgress = weeklyTotal / WEEKLY_GOAL * 100;
+      const weeklyProgressDisplay = document.getElementById('weekly-progress');
+      const weeklyProgressPercent = document.getElementById('weekly-progress-percent');
+      weeklyProgressDisplay.setAttribute('value', weeklyProgress);
+      weeklyProgressPercent.innerHTML = `${weeklyProgress.toFixed()}% `;
+
       new Chart(weekChart, {
-        type: 'line',
+        type: "line",
         data: {
           labels: [...weeklyMap.keys()],
-          datasets: [{
-            label: 'Minutes in the Word',
-            data: [...weeklyMap.values()],
-            borderWidth: 1
-          }]
+          datasets: [
+            {
+              label: "Minutes in the Word",
+              data: [...weeklyMap.values()],
+              borderWidth: 1,
+            },
+          ],
         },
         options: {
           scales: {
             y: {
-              beginAtZero: true
-            }
-          }
-        }
+              beginAtZero: true,
+            },
+          },
+        },
       });
-      
+
       new Chart(hoursChart, {
-        type: 'bar',
+        type: "bar",
         data: {
           labels: [...hoursMap.keys()],
-          datasets: [{
-            label: 'Minutes in the Word',
-            data: [...hoursMap.values()],
-            borderWidth: 1
-          }]
+          datasets: [
+            {
+              label: "Minutes in the Word",
+              data: [...hoursMap.values()],
+              borderWidth: 1,
+            },
+          ],
         },
         options: {
           scales: {
             y: {
-              beginAtZero: true
-            }
-          }
-        }
+              beginAtZero: true,
+            },
+          },
+        },
       });
-      
+
       new Chart(daysChart, {
-        type: 'bar',
+        type: "bar",
         data: {
           labels: [...daysMap.keys()],
-          datasets: [{
-            label: 'Minutes in Word',
-            data: [...daysMap.values()],
-            borderWidth: 1
-          }]
+          datasets: [
+            {
+              label: "Minutes in Word",
+              data: [...daysMap.values()],
+              borderWidth: 1,
+            },
+          ],
         },
         options: {
           scales: {
             y: {
-              beginAtZero: true
-            }
-          }
-        }
+              beginAtZero: true,
+            },
+          },
+        },
       });
-      
+
       new Chart(bookChart, {
-        type: 'pie',
+        type: "pie",
         data: {
           labels: [...booksMap.keys()],
-          datasets: [{
-            label: 'Time spent in each book',
-            data: [...booksMap.values()]
-          }]
-        }
+          datasets: [
+            {
+              label: "Time spent in each book",
+              data: [...booksMap.values()],
+            },
+          ],
+        },
       });
-    }).catch(error => console.log(error));
-  </script>
\ No newline at end of file
+    })
+    .catch((error) => console.log(error));
+</script>
diff --git a/static/reading.js b/static/reading.js
index c55f603..15a91e3 100644
--- a/static/reading.js
+++ b/static/reading.js
@@ -1,4 +1,6 @@
 const apiUrl = 'https://drive.carrollmedia.dev:3008';
+const WEEKLY_GOAL = 560;
+const TOTAL_GOAL = 1680;
 let tally = 0;
     function init() {
     // enable active states for buttons in mobile safari
@@ -25,6 +27,12 @@ function updateTally(tallyType = 'reading') {
     for(element of tallyDisplayMinutes) {
         element.innerText = minutes;
     }
+
+    const totalProgress = totalMinutes / TOTAL_GOAL * 100;
+    const totalProgressDisplay = document.getElementById('total-progress');
+    const totalProgressPercent = document.getElementById('total-progress-percent');
+    totalProgressDisplay.setAttribute('value', totalProgress);
+    totalProgressPercent.innerHTML = `${totalProgress.toFixed()}% `;
 });
 }