diff --git a/index.html b/index.html
index f4052a9..1823ae8 100644
--- a/index.html
+++ b/index.html
@@ -26,24 +26,30 @@
     <div class="container">
       <div class="row">
         <div class="col-md-6">
-          <div class="card mb-3">
-            <img class="card-img-top" src="./images/fortune_generator_example.png">
+          <div class="card mb-3 bg-dark text-white border-0">
+            <img class="card-img-top" src="./images/fortune_generator_example.png" alt="fortune generator example">
             <!-- <video src="#" autoplay></video> -->
             <div class="card-body">
-              <h5 class="card-title">Fortune Generator</h5>
-              <p class="card-text">Get your daily fortune by clicking the check in button</p>
-              <a href="./fortune_generator/" class="btn btn-dark">Check this out</a>
+              <h4 class="card-title">Fortune Generator</h4>
+              <p class="card-text">Get your daily fortune with just a click.</p>
+              <a href="./fortune_generator/" class="btn btn-secondary">Check this out</a>
+            </div>
+            <div class="card-footer">
+              <div id="last-update-1"></div>
             </div>
           </div>
         </div>
         <div class="col-md-6">  
-          <div class="card">
-            <img class="card-img-top" src="./images/quote_generator_example_(2).png">
+          <div class="card mb-3 bg-dark text-white border-0">
+            <img class="card-img-top" src="./images/quote_generator_example_(2).png" alt="quote generator example">
             <!-- <video src="#" autoplay></video> -->
             <div class="card-body">
-              <h5 class="card-title">Quote Generator</h5>
-              <p class="card-text">Get your daily quote by clicking a button</p>
-              <a href="./quote_generator/" class="btn btn-dark">Check this out</a>
+              <h4 class="card-title">Quote Generator</h4>
+              <p class="card-text">Generate inspiring and thought-provoking quotes effortlessly.</p>
+              <a href="./quote_generator/" class="btn btn-secondary">Check this out</a>
+            </div>
+            <div class="card-footer">
+              <div id="last-update-2"></div>
             </div>
           </div>
         </div>
@@ -55,5 +61,6 @@
       <h5>made by <b>LifeAdventurer</b> <img src="./images/lifeadventurer.jpg" alt="footer image" style="width: 4%;"></h5>
     </div>
   </footer>
+  <script src="./scripts.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts.js b/scripts.js
new file mode 100644
index 0000000..449f25c
--- /dev/null
+++ b/scripts.js
@@ -0,0 +1,56 @@
+const repoOwner = 'LifeAdventurer'; 
+const repoName = 'generators'; 
+const folderPath_1 = 'fortune_generator';
+const folderPath_2  = 'quote_generator';
+const apiUrl_1 = `https://api.github.com/repos/${repoOwner}/${repoName}/commits?path=${folderPath_1}`;
+const apiUrl_2 = `https://api.github.com/repos/${repoOwner}/${repoName}/commits?path=${folderPath_2}`;
+
+let timeSinceLastUpdate_1;
+fetch(apiUrl_1)
+.then(response => response.json())
+.then(data => {
+  let lastCommit = data[0].commit.author.date; 
+  const commitTimeStamp = new Date(lastCommit).getTime() / 1000;
+  const currentTimeStamp = Math.floor(new Date().getTime() / 1000);
+  const timeDifference = currentTimeStamp - commitTimeStamp;
+  
+  timeSinceLastUpdate_1 = formatTimeDifference(timeDifference);
+  $('#last-update-1').html(`Last updated ${timeSinceLastUpdate_1} ago`)
+})
+.catch(error => console.error('Error fetching data:', error));
+
+
+let timeSinceLastUpdate_2;
+fetch(apiUrl_2)
+.then(response => response.json())
+.then(data => {
+  let lastCommit = data[0].commit.author.date; 
+  const commitTimeStamp = new Date(lastCommit).getTime() / 1000;
+  const currentTimeStamp = Math.floor(new Date().getTime() / 1000);
+  const timeDifference = currentTimeStamp - commitTimeStamp;
+  
+  timeSinceLastUpdate_2 = formatTimeDifference(timeDifference);
+  $('#last-update-2').html(`Last updated ${timeSinceLastUpdate_2} ago`)
+})
+.catch(error => console.error('Error fetching data:', error));
+
+function formatTimeDifference(seconds){
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if(days > 0){
+    return `${days} day${days > 1 ? 's' : ''}`;
+  }
+  else if(hours > 0){
+    return `${hours} hour${hours > 1 ? 's' : ''}`;    
+  }
+  else if(minutes > 0){
+    return `${minutes} minute${minutes > 1 ? 's' : ''}`;
+  }
+  else{
+    return `${seconds} second${seconds > 1 ? 's' : ''}`;
+  }
+}
+
+// $('#last-update-2').html(`Last updated ${timeSinceLastUpdate} ago`)
\ No newline at end of file
diff --git a/styles.css b/styles.css
index df92442..d2b4973 100644
--- a/styles.css
+++ b/styles.css
@@ -10,4 +10,9 @@ h1 {
 
 .container {
   margin-top: 30px;
+}
+
+.card-footer {
+  background-color: #343a40;
+  color: #adb5bd; 
 }
\ No newline at end of file