diff --git a/web/src/components/Card.js b/web/src/components/Card.js
index dd40b11..749090b 100644
--- a/web/src/components/Card.js
+++ b/web/src/components/Card.js
@@ -4,68 +4,6 @@ import styled from 'styled-components'
 import { Fallback } from './Availability'
 import { mobile } from '../util/css'
 
-export function Card({ title, nameList, alternativeList = [], children }) {
-  const [show, setShow] = useState(false)
-
-  function onClick() {
-    setShow(true)
-  }
-
-  return (
-    <CardWrapper>
-      <CardTitle>{title}</CardTitle>
-      <>
-        {nameList.map((name) => (
-          <ErrorBoundary>
-            <Suspense fallback={<Fallback />}>{children(name)}</Suspense>
-          </ErrorBoundary>
-        ))}
-        {show
-          ? alternativeList.map((name) => (
-              <ErrorBoundary>
-                <Suspense fallback={<Fallback />}>{children(name)}</Suspense>
-              </ErrorBoundary>
-            ))
-          : null}
-      </>
-      {alternativeList.length > 0 && !show ? (
-        <ShowAlternativesButton onClick={onClick}>
-          show alternatives
-        </ShowAlternativesButton>
-      ) : null}
-    </CardWrapper>
-  )
-}
-
-export const CardTitle = styled.div`
-  font-size: 0.8rem;
-  font-weight: bold;
-  margin-bottom: 15px;
-`
-
-const CardWrapper = styled.div`
-  margin-bottom: 20px;
-  padding: 40px;
-  border-radius: 2px;
-
-  ${mobile} {
-    padding: 20px;
-    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
-    border-radius: 0;
-  }
-`
-
-const ShowAlternativesButton = styled.div`
-  display: inline-block;
-  margin-top: 10px;
-  padding: 5px 0;
-  border: none;
-  border-bottom: 1px dashed black;
-  cursor: pointer;
-  font-family: monospace;
-  font-size: 1rem;
-`
-
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props)
@@ -82,3 +20,66 @@ class ErrorBoundary extends React.Component {
     return this.props.children
   }
 }
+
+const BoundedSuspense = ({ children }) => (
+  <ErrorBoundary>
+    <Suspense fallback={<Fallback />}>{children}</Suspense>
+  </ErrorBoundary>
+)
+
+export function Card({ title, nameList, alternativeList = [], children }) {
+  const [revealAlternatives, setRevealAlternatives] = useState(false)
+
+  function onClick() {
+    setRevealAlternatives(true)
+  }
+
+  return (
+    <CardWrapper>
+      <CardTitle>{title}</CardTitle>
+      <>
+        {nameList.map((name) => (
+          <BoundedSuspense>{children(name)}</BoundedSuspense>
+        ))}
+        {revealAlternatives &&
+          alternativeList.map((name) => (
+            <BoundedSuspense>{children(name)}</BoundedSuspense>
+          ))}
+      </>
+      {alternativeList.length > 0 && !revealAlternatives ? (
+        <ShowAlternativesButton onClick={onClick}>
+          show alternatives
+        </ShowAlternativesButton>
+      ) : null}
+    </CardWrapper>
+  )
+}
+
+const CardWrapper = styled.div`
+  margin-bottom: 20px;
+  padding: 40px;
+  border-radius: 2px;
+
+  ${mobile} {
+    padding: 20px;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+  }
+`
+
+const CardTitle = styled.div`
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-bottom: 15px;
+`
+
+const ShowAlternativesButton = styled.div`
+  display: inline-block;
+  margin-top: 10px;
+  padding: 5px 0;
+  border: none;
+  border-bottom: 1px dashed black;
+  cursor: pointer;
+  font-family: monospace;
+  font-size: 1rem;
+`