diff --git a/app/components/BranchCard.tsx b/app/components/BranchCard.tsx
index 1d8c3ba..106c1eb 100644
--- a/app/components/BranchCard.tsx
+++ b/app/components/BranchCard.tsx
@@ -1,4 +1,4 @@
-import { CardGroup } from "@trussworks/react-uswds";
+import { Card } from "@trussworks/react-uswds";
 import React from "react";
 
 interface BranchCardItem {
@@ -13,10 +13,28 @@ interface BranchCardProps {
     links: BranchCardItem[];
 }
 
-const BranchCards: React.FC<BranchCardProps> = ({}) => {
+export const BranchCard: React.FC<BranchCardProps> = ({ ...BranchCardProps }) => {
     return (
         <>
-            <CardGroup></CardGroup>
+            <Card data-id="branch-card">
+                <div className="flex">
+                    <img
+                        alt="An Austin Public Library Branch"
+                        className=""
+                        loading="lazy"
+                        src="/central-library.png"
+                    />
+                    <div>
+                        <div className="text-primary-default text-sans-lg font-bold px-3 mb-1">
+                            Carver Branch
+                        </div>
+                        <p className="px-3 text-sans-md">710 W Cesar Chavez</p>
+                        <div className="px-3 my-4">
+                            <strong className="text-sans-md">2 Available</strong>
+                        </div>
+                    </div>
+                </div>
+            </Card>
         </>
     );
 };
diff --git a/app/components/BranchCards.tsx b/app/components/BranchCards.tsx
new file mode 100644
index 0000000..dbfa09e
--- /dev/null
+++ b/app/components/BranchCards.tsx
@@ -0,0 +1,13 @@
+import { CardGroup } from "@trussworks/react-uswds";
+import React from "react";
+import { BranchCard } from "./BranchCard";
+
+export const BranchCards: React.FC = () => {
+    return (
+        <>
+            <CardGroup data-id="branch-card-group">
+                <BranchCard address="" availability="" links={[]} title="" />
+            </CardGroup>
+        </>
+    );
+};
diff --git a/app/routes/find-a-room.tsx b/app/routes/find-a-room.tsx
index e884a41..c243533 100644
--- a/app/routes/find-a-room.tsx
+++ b/app/routes/find-a-room.tsx
@@ -1,6 +1,7 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json, useLoaderData } from "@remix-run/react";
 import { Card, CardGroup, CardHeader } from "@trussworks/react-uswds";
+import { BranchCard } from "~/components/BranchCard";
 import Breadcrumbs from "~/components/Breadcrumbs";
 import { Map } from "~/components/Map";
 import lngLat from "~/data/lng-lat.json";
@@ -62,6 +63,12 @@ export default function FindARoom() {
                         <Map branchLngLats={branchLngLats} token={mapboxToken} />
                     </div>
                 </Card>
+                <BranchCard
+                    address="someAddress"
+                    availability="somethning"
+                    links={[]}
+                    title="someTitle"
+                />
             </CardGroup>
         </div>
     );
diff --git a/public/central-library.png b/public/central-library.png
new file mode 100644
index 0000000..b498293
Binary files /dev/null and b/public/central-library.png differ