diff --git a/static-site/src/components/splash/index.jsx b/static-site/src/components/splash/index.jsx
index 924e9cb56..0edcdca3c 100644
--- a/static-site/src/components/splash/index.jsx
+++ b/static-site/src/components/splash/index.jsx
@@ -9,9 +9,10 @@ import Title from "./title";
 import * as Styles from "./styles";
 import { SmallSpacer, BigSpacer, HugeSpacer, FlexCenter, Line } from "../../layouts/generalComponents";
 import Footer from "../Footer";
-import { Showcase } from "../ListResources/Showcase";
+import { CardImgWrapper, CardOuter, Showcase } from "../Showcase";
 import { cards } from "./showcase.yaml";
 import { createGroupCards } from "./groupCards";
+import { CardInner, CardTitle } from '../Cards/styles';
 
 const Section = ({id, title, abstract, cards, buttonText, buttonLink}) => (
   <div id={id} className="col-md-6" style={{paddingBottom: "40px"}}>
@@ -78,7 +79,7 @@ const Splash = () => {
       </Styles.H1>
 
       <BigSpacer/>
-      <Showcase cards={cards} />
+      <Showcase cards={cards} CardComponent={UrlShowcaseTile} />
 
       <BigSpacer/>
 
@@ -216,3 +217,19 @@ const Splash = () => {
 }
 
 export default Splash;
+
+
+const UrlShowcaseTile = ({ card }) => {
+  return (
+    <CardOuter>
+      <CardInner>
+        <a href={card.url}>
+          <CardTitle $squashed>
+            {card.name}
+          </CardTitle>
+          <CardImgWrapper filename={card.img}/>
+        </a>
+      </CardInner>
+    </CardOuter>
+  )
+}