diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e43b0f9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/site/cover_1.png b/site/cover_1.png
new file mode 100644
index 0000000..c917d24
Binary files /dev/null and b/site/cover_1.png differ
diff --git a/site/cover_2.png b/site/cover_2.png
new file mode 100644
index 0000000..c9bde91
Binary files /dev/null and b/site/cover_2.png differ
diff --git a/site/cover_3.png b/site/cover_3.png
new file mode 100644
index 0000000..dbc930c
Binary files /dev/null and b/site/cover_3.png differ
diff --git a/site/cover_4.png b/site/cover_4.png
new file mode 100644
index 0000000..5bf4163
Binary files /dev/null and b/site/cover_4.png differ
diff --git a/site/cover_5.png b/site/cover_5.png
new file mode 100644
index 0000000..9c5f883
Binary files /dev/null and b/site/cover_5.png differ
diff --git a/site/cover_6.png b/site/cover_6.png
new file mode 100644
index 0000000..90bafd9
Binary files /dev/null and b/site/cover_6.png differ
diff --git a/site/index.html b/site/index.html
index e5e63af..1164ae7 100644
--- a/site/index.html
+++ b/site/index.html
@@ -43,6 +43,26 @@
           font-size: 3.5rem;
         }
       }
+
+      .cd_cover {
+        width: 100%;
+        height: 225px;
+        background-position: center;
+        background-size: cover;
+      }
+
+      .cd_cover_title {
+        font-size: x-large;
+        text-align: center;
+        position: relative;
+        bottom: -40%;
+        color: navy;
+        background-color: ghostwhite;
+      }
+
+      .cd_cover_title a {
+        color: navy;
+      }
     </style>
 
     
@@ -102,8 +122,9 @@
       <div class="row">
         <div class="col-md-4">
           <div class="card mb-4 shadow-sm">
-            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">EagleEyev3</text></svg>
-
+            <div class="cd_cover" style="background-image: url('cover_1.png');">
+              <div class="cd_cover_title"><a href="https://pypi.org/project/EagleEyev3/">EagleEyev3</a></div>
+            </div>
             <div class="card-body">
               <p class="card-text">Python client library to make using the API more pythonic.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -118,8 +139,9 @@
         </div>
         <div class="col-md-4">
           <div class="card mb-4 shadow-sm">
-            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Status History</text></svg>
-
+            <div class="cd_cover" style="background-image: url('cover_2.png');">
+              <div class="cd_cover_title"><a href="https://status.mcotton.space">Status History</a></div>
+            </div>
             <div class="card-body">
               <p class="card-text">See camera status changes and history with a chart.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -137,8 +159,9 @@
         </div>
         <div class="col-md-4">
           <div class="card mb-4 shadow-sm">
-            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Video Downloader</text></svg>
-
+            <div class="cd_cover" style="background-image: url('cover_3.png');">
+              <div class="cd_cover_title"><a href="https://downloader.mcotton.space">Video Downloader</a></div>
+            </div>
             <div class="card-body">
               <p class="card-text">Get list of video clips for a camera, view or download them too.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -159,8 +182,9 @@
       <div class="row">
         <div class="col-md-4">
           <div class="card mb-4 shadow-sm">
-            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Classifier</text></svg>
-
+            <div class="cd_cover" style="background-image: url('cover_4.png');">
+              <div class="cd_cover_title"><a href="https://classifier.mcotton.space">Classifier</a></div>
+            </div>
             <div class="card-body">
               <p class="card-text">Create camera specific AI models.</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -175,8 +199,9 @@
         </div>
         <div class="col-md-4">
           <div class="card mb-4 shadow-sm">
-            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Receipts</text></svg>
-
+            <div class="cd_cover" style="background-image: url('cover_5.png');">
+              <div class="cd_cover_title"><a href="https://receipt.mcotton.space">Receipts</a></div>
+            </div>
             <div class="card-body">
               <p class="card-text">Point-of-Sale integration</p>
               <div class="d-flex justify-content-between align-items-center">
@@ -191,8 +216,9 @@
         </div>
         <div class="col-md-4">
           <div class="card mb-4 shadow-sm">
-            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Blog</text></svg>
-
+            <div class="cd_cover" style="background-image: url('cover_6.png');">
+              <div class="cd_cover_title">Blog</div>
+            </div>
             <div class="card-body">
               <p class="card-text">Coming Soon?</p>
               <div class="d-flex justify-content-between align-items-center">