diff --git a/.gitignore b/.gitignore
index 1a6d6968..fc5de794 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ _site/
 .sass-cache/
 .jekyll-metadata/
 .jekyll-cache/
+.DS_Store
diff --git a/_config.yml b/_config.yml
index 03b932e1..559461d4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -13,7 +13,7 @@ description: > # this means to ignore newlines until "baseurl:"
 
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://rehanbutt.com" # the base hostname & protocol for your site
-version: 7.16.0
+version: 7.17.0
 version-naming: [Apricot, Blackcurrent, Coconut, Dragonfruit, Elderberry, Fig, Guava]
 
 # Build settings
diff --git a/_includes/resource-element.html b/_includes/resource-element.html
index dd6c2379..a750bd28 100644
--- a/_includes/resource-element.html
+++ b/_includes/resource-element.html
@@ -1,4 +1,4 @@
-<a href="{{include.item.link}}" target="_blank" rel="noreferrer" class="cell medium-6 large-4 resource-link">
+<a href="{{include.item.link}}" target="_blank" rel="noreferrer" class="cell {{include.css-class}} resource-link">
   <div class="resource">
     <p class="meta {{include.item.content-type | slugify}}">
       {%- case include.item.content-type -%}
diff --git a/index.html b/index.html
index 676151d4..2bf55251 100644
--- a/index.html
+++ b/index.html
@@ -77,14 +77,9 @@ <h2>Resources</h2>
       <p class="section-description">A bunch references you may find useful. Here are a few of my most recent finds.</p>
     </div>
     {% assign resources_sorted = site.resources | sort: 'date' | reverse %}
+    <!-- TODO if no tags then skip -->
     {%- for resource in resources_sorted limit:3 -%}
-      <a href="{{resource.link}}" target="_blank" rel="noreferrer" class="cell resource-link">
-        <!-- TODO add the content type here -->
-        <div class="resource">
-          <p class="title">{{resource.title}}<i class="fas fa-link"></i></p>
-          <p class="description">{{resource.description}}</p>
-        </div>
-      </a>
+      {%- include resource-element.html item=resource -%}
     {%- endfor -%}
     <a class="more-button cell align-self-bottom" href="/resources">More resources</a>
     <div class="black-cat">
diff --git a/resources.html b/resources.html
index 6ceb3612..86ca4d62 100644
--- a/resources.html
+++ b/resources.html
@@ -28,8 +28,9 @@ <h2 class="visually-hidden">Categories</h2>
 <section class="recently-added grid-x grid-padding-x grid-padding-y cell medium-12">
   <h2 class="cell small-12">Recently Added</h2>
   {% assign resources_sorted = site.resources | sort: 'date' | reverse %}
+    <!-- TODO if no tags then skip.. hard to test since local and deployed is not acting the same -->
     {%- for resource in resources_sorted limit:3 -%}
-      {%- include resource-element.html item=resource -%}
+        {% include resource-element.html item=resource css-class="medium-6 large-4" %}
     {%- endfor -%}
 </section>
 
@@ -63,7 +64,7 @@ <h2 class="cell small-12 medium-shrink"><span class="hashtag">#</span>{{tag}}</h
     </div>
   {% for resource in site.resources %}
     {% if resource.tags contains tag %}
-      {%- include resource-element.html item=resource -%}
+      {% include resource-element.html item=resource css-class="medium-6 large-4" %}
     {% endif %}
   {% endfor %}
   </section>