diff --git a/docs/index.html b/docs/index.html
index b516160..fff333f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -78,7 +78,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project 
+            ">
                                 
                             </a>
                         </p>
@@ -100,7 +102,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/excel-text-function-how-to-convert-a-number-to-text-format/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Excel Text Function – How to Convert a Number to Text Format 
+            ">
                                 
                             </a>
                         </p>
@@ -122,7 +126,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/intro-to-advanced-actor-critic-methods-reinforcement-learning-course/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Intro to Advanced Actor-Critic Methods: Reinforcement Learning Course 
+            ">
                                 
                             </a>
                         </p>
@@ -144,7 +150,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/what-is-a-hyperlink-definition-for-html-link-beginners/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 What is a Hyperlink? Definition for HTML Link Beginners 
+            ">
                                 
                             </a>
                         </p>
@@ -166,7 +174,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/google-docs-voice-typing-how-to-use-speech-to-text-in-a-google-doc/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Google Docs Voice Typing – How to Use Speech-to-Text in a Google Doc 
+            ">
                                 
                             </a>
                         </p>
@@ -260,7 +270,7 @@
                         <p class="article__header-img">
                             <a target="_blank" href="http://ishadeed.com/article/button-label-alignment/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="http://ishadeed.com/assets/post-fb.jpg" alt="Aligning a Button Label Vertically">
                                 
                             </a>
                         </p>
@@ -278,7 +288,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/android-camera2-api-take-photos-and-videos/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Android Camera2 – How to Use the Camera2 API to Take Photos and Videos 
+            ">
                                 
                             </a>
                         </p>
@@ -300,7 +312,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/not-equal-sign-how-to-type-the-does-not-equal-symbol/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Not Equal Sign – How to Type the Does Not Equal Symbol 
+            ">
                                 
                             </a>
                         </p>
@@ -340,7 +354,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/learn-how-to-deploy-12-apps-to-aws-azure-google-cloud/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Learn How to Deploy 12 Apps to AWS, Azure, &amp;#38; Google Cloud 
+            ">
                                 
                             </a>
                         </p>
@@ -362,7 +378,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/automate-repetitive-tasks-in-excel-with-vba/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Visual Basic Excel Tutorial – How to Automate Repetitive Tasks in a Spreadsheet 
+            ">
                                 
                             </a>
                         </p>
@@ -384,7 +402,9 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.freecodecamp.org/news/python-if-else-statement-conditional-statements-explained/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.freecodecamp.org/news/content/images/2020/09/fcc_ghost_publication_cover-3.png" alt="
+                 Python If Else Statement – Conditional Statements Explained 
+            ">
                                 
                             </a>
                         </p>
@@ -586,7 +606,7 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://github.blog/2021-07-28-new-code-scanning-integrations-open-source-security-tools/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://github.blog/wp-content/uploads/2019/03/blog-card.png?fit=5001%2C2626" alt="15+ new code scanning integrations with open source security tools">
                                 
                             </a>
                         </p>
@@ -730,7 +750,7 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://github.blog/2021-07-27-github-developer-rights-fellowship-stanford-law-school/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://github.blog/wp-content/uploads/2019/03/blog-card.png?fit=5001%2C2626" alt="Standing up for developers: the GitHub Developer Rights Fellowship at Stanford Law School">
                                 
                             </a>
                         </p>
@@ -748,7 +768,7 @@
                         <p class="article__header-img">
                             <a target="_blank" href="http://ishadeed.com/article/thinking-about-the-cut-out-effect/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="http://ishadeed.com/assets/post-fb.jpg" alt="Thinking About The Cut-Out Effect: CSS or SVG?">
                                 
                             </a>
                         </p>
@@ -784,7 +804,7 @@
                         <p class="article__header-img">
                             <a target="_blank" href="https://www.monkeyuser.com/2021/fill-in-the-gaps/">
                                 
-                                <canvas class="article__random-background"></canvas>
+                                <img loading="lazy" src="https://www.monkeyuser.com/assets/images/2021/222-fill-in-the-gaps.png" alt="Fill in the gaps">
                                 
                             </a>
                         </p>