diff --git a/components/shared/EventCard.tsx b/components/shared/EventCard.tsx
index 3953c49f..b9025935 100644
--- a/components/shared/EventCard.tsx
+++ b/components/shared/EventCard.tsx
@@ -7,6 +7,7 @@ import Link from 'next/link';
 import {
   AddressContainer,
   AddressIcon,
+  CircularImageContainer,
   ClockIcon,
   Container,
   EventImage,
@@ -86,12 +87,15 @@ const EventCard = ({
     <Container ratio={ratio}>
       <Link href={href || ''}>
         <EventImage ratio={ratio}>
-          <Image
-            src="/eventCard/event-image.png"
-            alt="Event image icon"
-            width={`${Math.round(ratio * 138)}`}
-            height={`${Math.round(ratio * 138)}`}
-          />
+          {/* make the image circular */}
+          <CircularImageContainer ratio={ratio} size={138}>
+            <Image
+              src="/eventCard/book-icon.jpeg"
+              alt="Event image icon"
+              width={`${Math.round(ratio * 138)}`}
+              height={`${Math.round(ratio * 138)}`}
+            />
+          </CircularImageContainer>
         </EventImage>
 
         <Name ratio={ratio}>{eventData.name}</Name>
diff --git a/components/shared/LongEventCard.tsx b/components/shared/LongEventCard.tsx
index e2cb528b..887fb274 100644
--- a/components/shared/LongEventCard.tsx
+++ b/components/shared/LongEventCard.tsx
@@ -30,7 +30,7 @@ const LongEventCard = ({
     <Container>
       <EventImage>
         <Image
-          src="/eventCard/event-image.png"
+          src="/eventCard/book-icon.jpeg"
           alt="Event image icon"
           width={`${Math.round((300 / 328) * 53)}`}
           height={`${Math.round((300 / 328) * 53)}`}
diff --git a/public/eventCard/book-icon.jpeg b/public/eventCard/book-icon.jpeg
new file mode 100644
index 00000000..c2a6bad6
Binary files /dev/null and b/public/eventCard/book-icon.jpeg differ
diff --git a/styles/components/eventCard.styles.tsx b/styles/components/eventCard.styles.tsx
index 6c87f4df..0b8cda9b 100644
--- a/styles/components/eventCard.styles.tsx
+++ b/styles/components/eventCard.styles.tsx
@@ -75,3 +75,16 @@ export const InfoFlexChild = styled.div<RatioProp>`
   line-height: ${props => props.ratio * 22}px;
   ${Overflow};
 `;
+
+// a container that makes the image within it circular
+export const CircularImageContainer = styled.div<{
+  ratio: number;
+  size: number;
+}>`
+  border-radius: 50%;
+  // width and height are calculated based on the ratio prop
+  width: ${props => props.ratio * props.size} px;
+  height: ${props => props.ratio * props.size} px;
+
+  ${Overflow};
+`;