diff --git a/packages/freesewing.org/pages/showcase/index.js b/packages/freesewing.org/pages/showcase/index.js
new file mode 100644
index 00000000000..813ee0e6e38
--- /dev/null
+++ b/packages/freesewing.org/pages/showcase/index.js
@@ -0,0 +1,117 @@
+import Page from 'site/components/wrappers/page.js'
+import useApp from 'site/hooks/useApp.js'
+import Link from 'next/link'
+import PageLink from 'shared/components/page-link.js'
+import TimeAgo from 'react-timeago'
+import { strapiHost } from 'shared/config/freesewing.mjs'
+import { strapiImage } from 'shared/utils.js'
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+const PreviewTile = ({ img, slug, title }) => (
+  <div
+    style={{ backgroundImage: `url(${img})`, backgroundSize: 'cover' }}
+    className={`
+      rounded-full inline-block border-base-100 shrink-0
+      w-42 h-42 -ml-8 border-8
+      md:w-56 md:h-56 md:-ml-12
+    `}
+  >
+    <Link href={`/showcase/${slug}`}>
+      <a className="w-36 h-36 block" title={title}/>
+    </Link>
+  </div>
+)
+
+const DesignPosts = ({ design, posts }) => {
+  const { t } = useTranslation(['patterns'])
+  return (
+    <div className='py-8'>
+      <h2 className="bg-clip-text bg-success m-0">
+        <PageLink href={`/showcase/designs/${design}`} txt={t(`${design}.t`)} />
+      </h2>
+      <div className={`
+        flex flex-row overflow-visible
+        -mr-8 pl-8
+        md:-mr-12 md:pl-12
+      `}>
+      {posts.slice(0, 10).map(post => <PreviewTile
+        img={`${strapiHost}${post?.image?.sizes?.medium?.url}`}
+        slug={post.slug}
+        title={post.title}
+        key={post.slug}
+      />)}
+      </div>
+    </div>
+  )
+}
+const ShowcaseIndexPage = (props) => {
+  const app = useApp()
+  const { t } = useTranslation()
+
+  const designs = {}
+  for (const post of props.posts) {
+    for (const design of post.designs) {
+      if (typeof designs[design] === 'undefined') designs[design] = []
+      designs[design].push(post)
+    }
+  }
+
+  return (
+    <Page app={app} title={t('showcase')} slug='showcase'>
+      <div className={`
+        px-8 2xl:pl-16 overflow-visible overscroll-x-hidden
+        max-w-sm
+        md:max-w-md
+        lg:max-w-lg
+        xl:max-w-3xl
+        2xl:max-w-7xl
+      `}>
+        {Object.keys(designs).sort().map(design => <DesignPosts
+          key={design} design={design} posts={designs[design]} />)}
+      </div>
+    </Page>
+  )
+}
+
+export default ShowcaseIndexPage
+
+/*
+ * getStaticProps() is used to fetch data at build-time.
+ *
+ * On this page, it is loading the showcase content from strapi.
+ *
+ * This, in combination with getStaticPaths() below means this
+ * page will be used to render/generate all showcase content.
+ *
+ * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
+ */
+export async function getStaticProps({ params, locale }) {
+
+  const posts = await fetch(
+    `${strapiHost}/showcaseposts?_locale=${locale}&_sort=date:DESC&_limit=-1`
+  )
+  .then(response => response.json())
+  .then(data => data)
+  .catch(err => console.log(err))
+
+  return {
+    props: {
+      posts: posts.map(post => {
+        const designs = [post.design1]
+        if (post.design2 && post.design2.length > 2) designs.push(post.design2)
+        if (post.design3 && post.design3.length > 2) designs.push(post.design3)
+        return {
+          slug: post.slug,
+          title: post.title,
+          date: post.date,
+          maker: post.maker.displayname,
+          image: strapiImage(post.image, ['medium']),
+          designs
+        }
+      }),
+      ...(await serverSideTranslations(locale)),
+    }
+  }
+}
+
diff --git a/packages/freesewing.shared/utils.js b/packages/freesewing.shared/utils.js
index 1360b7c8b91..9e4394cee54 100644
--- a/packages/freesewing.shared/utils.js
+++ b/packages/freesewing.shared/utils.js
@@ -78,7 +78,7 @@ export const capitalize = string => string.charAt(0).toUpperCase() + string.slic
 
 export const strapiImage = (img, sizes=['thumbnail', 'xlarge', 'large', 'medium', 'small', 'xsmall']) => {
   const image = {
-    caption: img.caption,
+    caption: img?.caption || '',
     w: img.width,
     h: img.height,
     url: img.url,