diff --git a/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html b/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html
index ede4c8b9a..774c10e0f 100644
--- a/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html
+++ b/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html
@@ -4,26 +4,10 @@
   <div class="w-100">
     <div class="w-100 overflow-x-scroll">
       <div class="row nowrap mv2 pb1">
-        {{ range $p := first 10 (where .Site.RegularPages "Section" "showcase" | shuffle) }}
-        {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
-        {{ with $img }}
-        {{ $big := .Fill "1024x512 top" }}
-        {{ $small := $big.Resize "512x" }}
-        <a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;" 
-          data-bg="{{ $img.RelPermalink }}"
-          data-sizes="auto" 
-           data-srcset="{{ $small.RelPermalink }} 1x,
-          {{ $big.RelPermalink }} 2x" data-src="small"
-        >
-          {{with $p.Title}}
-          <div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
-            <div class="absolute bottom-0 pa2 tc white">
-              {{.}} &#8594;
-            </div>
-          </div>
-          {{end}}
-        </a>
-        {{ end }}
+        {{ $showcasePages := where .Site.RegularPages "Section" "showcase" }}
+        {{ template "home_showcase_item" (index $showcasePages 0) }}
+        {{ range $p := first 10 ($showcasePages | after 1 | shuffle) }}
+          {{template "home_showcase_item" $p }}
         {{end}}
       </div>
     </div>
@@ -32,4 +16,27 @@
   <div class="flex w-100 mt4 justify-end">{{/* using Flex to make the button show up on the right side */}}
     <a href="/showcase/" class="br2 f6 bg-primary-color-dark hover-bg-primary-color link ph3 pv2 ttu white">See All</a>
   </div>
-</section>
\ No newline at end of file
+</section>
+
+
+{{ define "home_showcase_item" }}
+   {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
+        {{ with $img }}
+        {{ $big := .Fill "1024x512 top" }}
+        {{ $small := $big.Resize "512x" }}
+        <a href="{{ $.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;" 
+          data-bg="{{ $img.RelPermalink }}"
+          data-sizes="auto" 
+           data-srcset="{{ $small.RelPermalink }} 1x,
+          {{ $big.RelPermalink }} 2x" data-src="small"
+        >
+          {{with $.Title}}
+          <div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
+            <div class="absolute bottom-0 pa2 tc white">
+              {{.}} &#8594;
+            </div>
+          </div>
+          {{end}}
+        </a>
+        {{ end }}
+{{ end }}
\ No newline at end of file