diff --git a/frontend/components/ClubPage/EventCarousel.tsx b/frontend/components/ClubPage/EventCarousel.tsx
deleted file mode 100644
index 9bb643f58..000000000
--- a/frontend/components/ClubPage/EventCarousel.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import 'react-multi-carousel/lib/styles.css'
-
-import React, { useState } from 'react'
-import Carousel from 'react-multi-carousel'
-import styled from 'styled-components'
-
-import { ClubEvent } from '../../types'
-import { Icon, StrongText } from '../common'
-import Modal from '../common/Modal'
-import EventCard from '../EventPage/EventCard'
-import EventModal from '../EventPage/EventModal'
-
-const LeftArrow = styled.div`
-  left: -10px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 100;
-  opacity: 0.6;
-  transition-duration: 300ms;
-  cursor: pointer;
-  &:hover {
-    opacity: 1;
-  }
-`
-const RightArrow = styled.div`
-  right: -10px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 100;
-  opacity: 0.6;
-  transition-duration: 300ms;
-  cursor: pointer;
-  &:hover {
-    opacity: 1;
-  }
-`
-
-const CarouselWrapper = styled.div`
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-`
-const EventWrapper = styled.div`
-  @media only screen and (max-width: 580px) {
-    margin: 25px;
-  }
-  @media only screen and (min-width: 580px) and (max-width: 900px) {
-    margin: 8px;
-  }
-  @media only screen and (min-width: 900px) and (max-width: 1400px) {
-    margin: 12px;
-  }
-  @media only screen and (min-width: 1400px) {
-    margin: 5px;
-  }
-`
-
-type EventsProps = {
-  data: ClubEvent[]
-}
-
-const EventCarousel = ({ data }: EventsProps) => {
-  const [show, setShow] = useState(false)
-  const [modalData, setModalData] = useState<ClubEvent>()
-
-  const showModal = (entry: ClubEvent) => {
-    setModalData(entry)
-    setShow(true)
-  }
-  const hideModal = () => setShow(false)
-  const responsive = {
-    superLargeDesktop: {
-      breakpoint: { max: 4000, min: 1400 },
-      items: 3,
-    },
-    tablet: {
-      breakpoint: { max: 1400, min: 580 },
-      items: 2,
-    },
-    mobile: {
-      breakpoint: { max: 580, min: 0 },
-      items: 1,
-    },
-  }
-  return (
-    <div>
-      <div className="">
-        <StrongText className="mb-0">Events</StrongText>
-        <small>Click on an event to get more details.</small>
-      </div>
-      <div
-        style={{
-          height: '260px',
-          width: '100%',
-          boxSizing: 'border-box',
-          position: 'relative',
-        }}
-      >
-        <CarouselWrapper>
-          <div style={{ position: 'unset' }}>
-            <Carousel
-              responsive={responsive}
-              showDots={false}
-              draggable={true}
-              customLeftArrow={
-                <LeftArrow>
-                  <Icon name="chevron-left" size={'2.2rem'} />
-                </LeftArrow>
-              }
-              customRightArrow={
-                <RightArrow>
-                  <Icon name="chevron-right" size={'2.2rem'} />
-                </RightArrow>
-              }
-            >
-              {data.map((entry, index) => (
-                <div key={index}>
-                  <EventWrapper>
-                    <EventCard
-                      event={entry}
-                      key={index}
-                      onClick={() => showModal(entry)}
-                      onLinkClicked={() => hideModal()}
-                    />
-                  </EventWrapper>
-                </div>
-              ))}
-            </Carousel>
-          </div>
-        </CarouselWrapper>
-      </div>
-      {show && (
-        <Modal show={show} closeModal={hideModal} marginBottom={false}>
-          {modalData && (
-            <EventModal event={modalData} showDetailsButton={false} />
-          )}
-        </Modal>
-      )}
-    </div>
-  )
-}
-
-export default EventCarousel
diff --git a/frontend/components/ClubPage/Events.tsx b/frontend/components/ClubPage/Events.tsx
index daff4c790..1c5422c18 100644
--- a/frontend/components/ClubPage/Events.tsx
+++ b/frontend/components/ClubPage/Events.tsx
@@ -6,6 +6,8 @@ import { DARK_BLUE, HOVER_GRAY, PURPLE, WHITE } from '../../constants/colors'
 import { M2, M3 } from '../../constants/measurements'
 import { ClubEvent, ClubEventType } from '../../types'
 import { Card, Icon, StrongText } from '../common'
+import Modal from '../common/Modal'
+import EventModal from '../EventPage/EventModal'
 
 type EventsProps = {
   data: ClubEvent[]
@@ -29,8 +31,7 @@ const Wrapper = styled.div`
   margin-bottom: 0.5rem;
   display: flex;
   cursor: pointer;
-  border-radius: 8px;
-  padding: 2px;
+  border-radius: 3px;
 
   &:hover {
     background-color: ${HOVER_GRAY};
@@ -69,6 +70,11 @@ const Event = ({ entry }: { entry: ClubEvent }): ReactElement => {
           </SmallParagraph>
         </div>
       </Wrapper>
+      {show && (
+        <Modal show={show} closeModal={hideModal} marginBottom={false}>
+          <EventModal event={entry} showDetailsButton={false} />
+        </Modal>
+      )}
     </>
   )
 }
diff --git a/frontend/components/EventPage/EventCard.tsx b/frontend/components/EventPage/EventCard.tsx
index 13e27e74e..d9aa723bd 100644
--- a/frontend/components/EventPage/EventCard.tsx
+++ b/frontend/components/EventPage/EventCard.tsx
@@ -92,14 +92,14 @@ const EventCard = (props: {
               {clipLink(url)}
             </EventLink>
           ))}
-        {(badges?.length > 0 || pinned) && (
+        {(badges.length > 0 || pinned) && (
           <div className="tags mt-2">
             {pinned && (
               <span className="tag is-primary">
                 <Icon name="map-pin" className="mr-1" /> Pinned
               </span>
             )}
-            {badges?.map(({ id, label }) => (
+            {badges.map(({ id, label }) => (
               <span key={id} className="tag is-info">
                 {label}
               </span>
diff --git a/frontend/package.json b/frontend/package.json
index b0e4c8312..270f3f9c4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -44,7 +44,6 @@
     "react-ga": "^3.3.1",
     "react-lazy-load": "^4.0.1",
     "react-linkify": "^1.0.0-alpha",
-    "react-multi-carousel": "^2.8.5",
     "react-places-autocomplete": "^7.3.0",
     "react-select": "^5.8.0",
     "react-table": "^7.8.0",
diff --git a/frontend/pages/club/[club]/index.tsx b/frontend/pages/club/[club]/index.tsx
index c61403844..0c14b3b4b 100644
--- a/frontend/pages/club/[club]/index.tsx
+++ b/frontend/pages/club/[club]/index.tsx
@@ -3,6 +3,7 @@ import { DesktopActions, MobileActions } from 'components/ClubPage/Actions'
 import AdvisorList from 'components/ClubPage/AdvisorList'
 import ClubApprovalDialog from 'components/ClubPage/ClubApprovalDialog'
 import Description from 'components/ClubPage/Description'
+import Events from 'components/ClubPage/Events'
 import FilesList from 'components/ClubPage/FilesList'
 import Header from 'components/ClubPage/Header'
 import InfoBox from 'components/ClubPage/InfoBox'
@@ -42,7 +43,6 @@ import {
   SITE_NAME,
 } from 'utils/branding'
 
-import EventCarousel from '~/components/ClubPage/EventCarousel'
 import { CLUB_ALUMNI_ROUTE, CLUB_ORG_ROUTE } from '~/constants'
 import { CLUBS_RED, SNOW, WHITE } from '~/constants/colors'
 import { M0, M2, M3 } from '~/constants/measurements'
@@ -268,7 +268,6 @@ const ClubPage = ({
               <MemberList club={club} />
             </>
           )}
-          {events.length > 0 && <EventCarousel data={events} />}
         </div>
         <div className="column is-one-third">
           {userInfo && (
@@ -297,6 +296,7 @@ const ClubPage = ({
               <div dangerouslySetInnerHTML={{ __html: involvement }} />
             </StyledCard>
           )}
+          <Events data={events} />
           {isClubFieldShown('signature_events') &&
             signatureEvents &&
             !!signatureEvents.length && (
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c1411f1e9..ad2d5ec1a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -8949,11 +8949,6 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-multi-carousel@^2.8.5:
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz#033e35426ee2d2ddd46a5b3967a654cd901a80d1"
-  integrity sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w==
-
 react-onclickoutside@^6.10.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz#e165ea4e5157f3da94f4376a3ab3e22a565f4ffc"