diff --git a/app/events/page.style.ts b/app/events/page.style.ts
index 8d83e6d..1d800fd 100644
--- a/app/events/page.style.ts
+++ b/app/events/page.style.ts
@@ -25,73 +25,3 @@ export const Title = styled.main`
   text-align: left;
   height: 50px;
 `;
-
-export const EventContainer = styled.main`
-  margin: auto;
-  width: 100%;
-  display: flex;
-  padding: 16px;
-  justify-content: flex-start;
-  align-items: flex-start;
-`;
-
-export const DateContainer = styled.main`
-  width: 10%;
-`;
-
-export const EventCardContainer = styled.main`
-  width: 65%;
-  padding: 16px;
-  background: ${COLORS.bread1};
-  border-radius: 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const MonthText = styled.main`
-  color: #000;
-  text-align: center;
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-`;
-
-export const DateText = styled.main`
-  color: #000;
-  text-align: center;
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-`;
-
-export const TimeText = styled.main`
-  color: #000;
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-`;
-
-export const EventDescriptionText = styled.main`
-  color: #000;
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-`;
-
-export const LocationText = styled.main`
-  color: ${COLORS.gray10};
-  font-family: ${BespokeSans.style.fontFamily};
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-`;
diff --git a/app/events/page.tsx b/app/events/page.tsx
index 9bf17b4..7441f5c 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { fetchAllEvents } from '../../api/supabase/queries/events';
-import MyEventCard from '../../components/MyEventCard';
+import MyEventCard from '../../components/eventcardcomponent/MyEventCard';
 import { Event } from '../../types/schema';
 import * as styles from './page.style';
 
diff --git a/components/MyEventCard.tsx b/components/eventcardcomponent/MyEventCard.tsx
similarity index 93%
rename from components/MyEventCard.tsx
rename to components/eventcardcomponent/MyEventCard.tsx
index 9e7a89f..4554a02 100644
--- a/components/MyEventCard.tsx
+++ b/components/eventcardcomponent/MyEventCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import BPLogo from '@/assets/images/bp-logo.png';
-import * as styles from '../app/events/page.style';
-import { Event } from '../types/schema';
+import { Event } from '../../types/schema';
+import * as styles from './eventcard.style';
 
 export default function MyEventCard(eventData: Event) {
   const eventStart = new Date(eventData.start_date_time);
diff --git a/components/eventcardcomponent/eventcard.style.ts b/components/eventcardcomponent/eventcard.style.ts
new file mode 100644
index 0000000..bab7676
--- /dev/null
+++ b/components/eventcardcomponent/eventcard.style.ts
@@ -0,0 +1,89 @@
+'use client';
+
+import NextImage from 'next/image';
+import styled from 'styled-components';
+import COLORS from '../../styles/colors';
+import { BespokeSans } from '../../styles/fonts';
+
+export const Image = styled(NextImage)`
+  layout: responsive;
+  width: 20%;
+  height: 90%;
+`;
+
+export const EventContainer = styled.main`
+  margin: auto;
+  width: 100%;
+  display: flex;
+  padding: 16px;
+  justify-content: flex-start;
+  align-items: flex-start;
+`;
+
+export const DateContainer = styled.main`
+  width: 10%;
+`;
+
+export const EventCardContainer = styled.main`
+  width: 65%;
+  padding: 16px;
+  background: ${COLORS.bread1};
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const MonthText = styled.main`
+  color: #000;
+  text-align: center;
+  font-family: ${BespokeSans.style.fontFamily};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+export const DateText = styled.main`
+  color: #000;
+  text-align: center;
+  font-family: ${BespokeSans.style.fontFamily};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+export const TimeText = styled.main`
+  color: #000;
+  font-family: ${BespokeSans.style.fontFamily};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const EventDescriptionText = styled.main`
+  color: #000;
+  font-family: ${BespokeSans.style.fontFamily};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+
+export const LocationText = styled.main`
+  color: ${COLORS.gray10};
+  font-family: ${BespokeSans.style.fontFamily};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const EventModalBox = styled.main`
+  display: flex;
+  width: 80%;
+  padding: 24px;
+  gap: 24px;
+`;