diff --git a/.gitignore b/.gitignore
index ca61bf9..61af8f8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ hugo.linux
 node_modules
 .envrc
 cdk.out
+
+.ideas
diff --git a/src/data/mockPackages.json b/src/data/mockPackages.json
new file mode 100644
index 0000000..a9b2b75
--- /dev/null
+++ b/src/data/mockPackages.json
@@ -0,0 +1,34 @@
+[
+    {
+        "name": "sqlite",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
+        "version": "V 2.4",
+        "installs": "12",
+        "maintainer": "axoel",
+        "slug": "sqlite"
+    },
+    {
+        "name": "unicode.org",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
+        "version": "V 2.4",
+        "installs": "432",
+        "maintainer": "pascal",
+        "slug": "unicode"
+    },
+    {
+        "name": "tukaani.org/xz",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
+        "version": "V 2.4",
+        "installs": "23",
+        "maintainer": "pascal",
+        "slug": "xz"
+    },
+    {
+        "name": "bytereef.org/mpdecimal",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
+        "version": "V 2.4",
+        "installs": "125673",
+        "maintainer": "pascal",
+        "slug": "mpdecimal"
+    }
+]
\ No newline at end of file
diff --git a/src/layouts/index.html b/src/layouts/index.html
index 8051fb0..cd49cdc 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -162,7 +162,7 @@
     align-items: center;
   }
 
-  .swiper-slide img {
+  .swiper-slide figure > img {
     display: block;
     width: 100%;
     height: 100%;
diff --git a/src/layouts/partials/detail-btn.html b/src/layouts/partials/detail-btn.html
index c5081d9..a3807cd 100644
--- a/src/layouts/partials/detail-btn.html
+++ b/src/layouts/partials/detail-btn.html
@@ -34,4 +34,7 @@
 
 </style>
 
-<button href="#" class="detail-btn"><i class="icon-enter-arrow"></i>details</button>
+
+<a href="/packages/{{- .slug -}}">
+  <button class="detail-btn"><i class="icon-enter-arrow"></i>details</button>
+</a>
\ No newline at end of file
diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 7db8dc7..f76c8f3 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -13,30 +13,32 @@
     <!-- Start Package Grid -->
 
     <div class="row package-row black-bg g-0">
-      <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-      </div>
-      <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-      </div>
-      <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-      </div>
-      <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
+      <div class="package-grid">
+        {{ range $.Site.Data.mockPackages }}
+          {{- partial "package-thumbnail.html" .}}
+        {{ end }}
       </div>
     </div>
   </div>
 </section>
+
+<style>
+  .package-grid {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+
+  @media only screen and (min-width: 576px) {
+    .package-grid {
+      /* changes to 3 column thumbs */
+      grid-template-columns: auto auto auto;
+    }
+  }
+
+  @media only screen and (min-width: 992px) {
+    .package-grid {
+      /* changes to 4 column thumbs */
+      grid-template-columns: auto auto auto auto;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/layouts/partials/package-thumbnail.html b/src/layouts/partials/package-thumbnail.html
index fa5343c..0bba839 100644
--- a/src/layouts/partials/package-thumbnail.html
+++ b/src/layouts/partials/package-thumbnail.html
@@ -1,17 +1,58 @@
 <div class="card card-thumbnail" style="width: 100%">
-  <img src="/Images/package-thumb-1.jpg" class="card-img-top" alt="..." style="width:100%; height:100%;">
+  <figure class="card-img-top" >
+    <img src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
+    <article class="card-thumb-label">
+      <img src="/Images/tea-logo-no-bg.svg" width="26" alt="tea"/>
+      <h3>{{- .name -}}</h3>
+      <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
+    </article>
+  </figure>
   <div class="card-body thumbnail-body">
     <div class="card-text-container">
-      <p class="card-text"><span class="package-version-no">V2.35</span><br><span class="package-install-no">>45 installs</span></p>
+      <p class="card-text">
+        <span class="package-version-no">{{- .version -}}</span>
+        <br>
+        <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span>
+      </p>
     </div>
     {{- partial "detail-btn.html" . -}}
   </div>
   <div class="card-body thumbnail-body-mobile">
-    <button href="#" class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
+    <a href="/packages/{{- .slug -}}">
+      <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
+    </a>
   </div>
 </div>
 
 <style>
+.card-img-top {
+  position: relative;
+}
+
+.card-thumb-label {
+  position: absolute;
+  background: rgba(255,255,255,0.9);
+  left: 0;
+  bottom: 10px;
+  padding: 10px;
+  text-align: left;
+}
+
+.card-thumb-label h3 {
+  color: black;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  margin: 0px;
+  padding: 0px;
+}
+
+.card-thumb-label h4 {
+  color: black;
+  font-size: 0.9em;
+  line-height: 0.9em;
+  margin: 0px;
+  padding: 0px;
+}
 
 @media only screen and (min-width: 576px) {
 
diff --git a/src/layouts/partials/swiper.html b/src/layouts/partials/swiper.html
index dba54f9..e99153d 100644
--- a/src/layouts/partials/swiper.html
+++ b/src/layouts/partials/swiper.html
@@ -11,15 +11,11 @@
     <div class="col">
       <div class="swiper mySwiper">
         <div class="swiper-wrapper">
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+          {{ range $.Site.Data.mockPackages }}
+            <div class="swiper-slide">
+            {{- partial "package-thumbnail.html" .}}
+            </div>
+          {{ end }}
         </div>
         <!--<div class="swiper-pagination"></div>-->
       </div>
diff --git a/src/static/Images/package-thumb-nolabel.jpg b/src/static/Images/package-thumb-nolabel.jpg
new file mode 100644
index 0000000..83e228f
Binary files /dev/null and b/src/static/Images/package-thumb-nolabel.jpg differ
diff --git a/src/static/Images/tea-logo-no-bg.svg b/src/static/Images/tea-logo-no-bg.svg
new file mode 100644
index 0000000..f128d7a
--- /dev/null
+++ b/src/static/Images/tea-logo-no-bg.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1080"><defs><style>.cls-1{fill:#00ffd0; fill-opacity:0}.cls-2{fill:#1a1a1a;}</style></defs><rect class="cls-1" width="1080" height="1080"/><path class="cls-2" d="M858.6,609.73c-3.2,2.58-4.11,3.41-5.11,4.1-33.22,23.04-66.42,46.1-99.67,69.08-12.56,8.68-17.14,25.42-9.85,36.69,8.51,13.16,23.38,16.59,37.42,7.99,9.79-5.99,19.12-12.73,28.57-19.27,28.37-19.64,57.44-38.37,84.83-59.3,28.49-21.79,26.8-58.89-.5-79-36.77-27.1-74.95-52.29-112.66-78.11-10.78-7.38-26.98-5.17-34.96,4.14-9.53,11.13-7.94,29.23,4.37,38.07,25.77,18.5,52,36.35,78,54.52,9.53,6.67,18.94,13.51,29.56,21.1h0Zm-583.46,17.94c3.05,32.51,11.38,63.59,24.1,93.57,11.51,27.13,26.96,51.84,46.78,73.61,6.78,7.45,15.61,10.86,26.24,7.91,20.92-5.79,24.31-30.5,10.64-45.97-34.96-39.54-50.99-87.4-56.39-138.72-4.54-43.11-.61-86.1,9.98-128.29,3.3-13.13-4.81-27.75-17.88-31.7-12.8-3.86-29.46,4.93-32.59,18.12-8.28,34.86-14.41,70.08-15.8,113.47,0,0,3.5,22.89,4.92,38Zm445.43-61.69c-3.07-20.11-7.65-53.45-13.42-86.58-2.76-15.83-18.59-25.21-32.94-21.44-13.29,3.5-21.69,19.1-19.27,32.12,4.77,25.7,10.14,51.5,11.84,77.48,1.41,21.6-.45,43.78-3.86,65.23-3.34,21.02-9.31,41.84-16.22,62.03-8.41,24.58-23.45,45.63-39.77,65.79-10.06,12.42-8.06,27.82,3.55,37.43,10.89,9.01,26.56,7.52,36.84-4.1,25.06-28.32,43.15-60.86,55.13-96.53,12.81-38.16,17.36-77.81,18.12-131.44h0Zm-86.35-33.76c-.31-3.19-3.48-14.67-8.26-19.64-11.31-11.76-25.34-19.72-40.99-24.79-24.08-7.8-47.9-8.48-70.38,4.34-17.19,9.8-33.62,20.96-50.27,31.71-15.04,9.71-30.71,16.12-47.88,6.29-9.36-5.36-17.94-12.22-26.38-19-12.57-10.09-28.52-7.74-36.85,5.95-6.01,9.89-4.23,20.54,5.4,30.36,19.37,19.77,42.98,31.94,70.16,35.97,9.5,1.41,19.88-.14,29.39-2.35,21.64-5.04,38.27-19.8,56.78-30.98,10.96-6.62,22.49-13.69,34.7-16.47,16.83-3.84,31.45,4.48,43.8,15.99,7.29,6.79,15.96,9.45,24.94,5.59,9.49-4.08,16.79-10.96,15.84-22.97h0ZM409.23,231.38c-1.31,35.11,10.22,68.65,28.41,99.22,6.44,10.82,19.15,14.84,28.81,9.17,8.33-4.9,10.28-17.91,5.17-28.59-6.81-14.24-14.28-28.38-19.01-43.33-7.29-23.05-7.52-47,.23-70.01,4.71-13.97,12.05-27.11,18.73-40.36,5.17-10.26,2.61-19.93-7.64-28.37-6.82-5.62-12.37-5.28-22.18,4.21-3.08,2.98-5.61,6.7-7.78,10.43-15.96,27.39-25.76,56.54-24.75,87.64h0Zm149.69,101.4c-2.71-16.27-3.5-33.18-8.67-48.62-5.65-16.88-14.32-33.03-23.61-48.31-7.35-12.08-22.44-11.83-30.84-.9-5.77,7.5-4.98,15.66-.02,23.49,16.82,26.56,26.16,55.22,22.72,86.92-2.59,23.87-11.05,45.87-23.62,66.36-6.02,9.81-3.2,22.51,5.63,28.25,8.74,5.69,21.06,2.31,27.4-8.05,18.54-30.33,30.08-62.81,31.01-99.13h0Zm-65.05,423.39c-16.9,0-33.79-.07-50.68,.02-17.19,.09-28.79,10.76-28.83,26.3-.04,15.35,11.9,27.05,28.39,27.13,34.1,.18,68.21,.18,102.31,0,16.1-.09,28.71-12.42,28.74-27.17,.02-12.77-12.43-27.21-29.24-26.44-16.86,.77-33.78,.17-50.68,.17h-.01Z"/><path class="cls-2" d="M270.21,589.68c1.39-43.39,7.52-78.61,15.8-113.47,3.13-13.19,19.8-21.98,32.59-18.12,13.07,3.95,21.18,18.56,17.88,31.7-10.59,42.19-14.52,85.18-9.98,128.29,5.4,51.32,21.43,99.18,56.39,138.72,13.67,15.46,10.28,40.17-10.64,45.97-10.63,2.95-19.46-.46-26.24-7.91-19.82-21.78-35.27-46.49-46.78-73.61-12.72-29.98-21.05-61.05-24.1-93.57-1.42-15.11-3.88-30.12-4.92-37.99h0Z"/><path class="cls-2" d="M720.57,565.98c-.75,53.63-5.3,93.28-18.12,131.44-11.98,35.67-30.07,68.21-55.13,96.53-10.28,11.62-25.95,13.11-36.84,4.1-11.61-9.6-13.61-25.01-3.55-37.43,16.32-20.16,31.36-41.21,39.77-65.79,6.91-20.19,12.88-41.01,16.22-62.03,3.41-21.45,5.27-43.63,3.86-65.23-1.7-25.98-7.07-51.79-11.84-77.48-2.42-13.02,5.98-28.62,19.27-32.12,14.34-3.78,30.18,5.6,32.94,21.44,5.77,33.13,10.35,66.47,13.42,86.58h0Z"/><path class="cls-2" d="M634.22,532.21c.95,12.01-6.35,18.89-15.84,22.97-8.98,3.86-17.65,1.21-24.94-5.59-12.35-11.51-26.97-19.83-43.8-15.99-12.21,2.78-23.75,9.86-34.7,16.47-18.51,11.18-35.14,25.93-56.78,30.98-9.51,2.22-19.89,3.76-29.39,2.35-27.18-4.03-50.79-16.2-70.16-35.97-9.62-9.82-11.41-20.47-5.4-30.36,8.32-13.69,24.28-16.04,36.85-5.95,8.45,6.78,17.03,13.64,26.38,19,17.17,9.83,32.84,3.42,47.88-6.29,16.65-10.74,33.07-21.9,50.27-31.71,22.48-12.82,46.3-12.14,70.38-4.34,15.65,5.07,29.68,13.03,40.99,24.79,4.78,4.97,9,19.3,8.26,19.64h0Z"/><path class="cls-2" d="M409.23,231.38c-1.02-31.1,8.79-60.25,24.75-87.64,2.17-3.73,4.7-7.45,7.78-10.43,9.81-9.5,15.35-9.83,22.18-4.21,10.25,8.44,12.82,18.11,7.64,28.37-6.68,13.25-14.02,26.38-18.73,40.36-7.76,23.01-7.53,46.97-.23,70.01,4.73,14.96,12.21,29.1,19.01,43.33,5.11,10.69,3.16,23.7-5.17,28.59-9.66,5.68-22.37,1.66-28.81-9.17-18.19-30.57-29.72-64.11-28.41-99.22h0Z"/><path class="cls-2" d="M558.92,332.8c-.93,36.33-12.47,68.81-31.01,99.13-6.33,10.36-18.65,13.73-27.4,8.05-8.83-5.74-11.65-18.44-5.63-28.25,12.57-20.49,21.03-42.49,23.62-66.36,3.44-31.7-5.9-60.36-22.72-86.92-4.96-7.82-5.75-15.99,.02-23.49,8.4-10.92,23.49-11.18,30.84,.9,9.3,15.29,17.97,31.44,23.61,48.31,5.17,15.45,5.95,32.36,8.67,48.62h0Z"/><path class="cls-2" d="M493.87,756.2c16.9,0,33.82,.6,50.68-.17,16.81-.77,29.26,13.68,29.24,26.44-.02,14.75-12.64,27.09-28.74,27.17-34.1,.19-68.21,.19-102.31,0-16.49-.09-28.43-11.79-28.39-27.13,.04-15.55,11.64-26.21,28.83-26.3,16.89-.09,33.79-.02,50.68-.02h.01Z"/></svg>
\ No newline at end of file