diff --git a/src/components/events/EventCard.tsx b/src/components/events/EventCard.tsx
index c5a0e4f..4e73c25 100644
--- a/src/components/events/EventCard.tsx
+++ b/src/components/events/EventCard.tsx
@@ -1,38 +1,159 @@
 'use server';
-
-import EventCard from '@src/components/events/EventCard';
-import { api } from '@src/trpc/server';
+import { format, isSameDay } from 'date-fns';
+import Image from 'next/image';
 import Link from 'next/link';
+import { MoreIcon } from '@src/icons/Icons';
+import { type RouterOutputs } from '@src/trpc/shared';
+import EventLikeButton from './EventLikeButton';
+import { getServerAuthSession } from '@src/server/auth';
+import dynamic from 'next/dynamic';
+
+const EventTimeAlert = dynamic(() => import('./EventTimeAlert'), {
+  ssr: false,
+});
+
+type EventCardProps = {
+  event: RouterOutputs['event']['findByFilters']['events'][number];
+};
 
-const CommunityEvents = async () => {
-  const events = await api.userMetadata.getEvents();
-  if (events.length === 0) {
-    return (
-      <div className="font-bold text-slate-500">
-        <div>You haven&apos;t added any community events yet 😭</div>
-        <div>
-          You can check out new events{' '}
+const HorizontalCard = async ({
+  event,
+}: {
+  event: RouterOutputs['event']['findByFilters']['events'][number];
+}) => {
+  const session = await getServerAuthSession();
+  return (
+    <div className="container flex h-auto w-full flex-row overflow-hidden rounded-lg bg-white shadow-sm transition-shadow hover:shadow-lg">
+      <div className="relative h-[160px] w-1/3 max-w-[300px]">
+        <div className="h-[160px]">
+          <Image
+            fill
+            src={'/event_default.jpg'}
+            alt="event image"
+            className="object-cover object-left"
+          />
+        </div>
+        <div className="absolute inset-0 p-2 text-white">
+          <EventTimeAlert event={event} />
+        </div>
+      </div>
+      <div className="flex w-full flex-row px-6 py-5">
+        <div className="flex flex-col space-y-2.5">
+          <h3 className="font-bold">{event.name}</h3>
+          <h4 className="whitespace-nowrap text-xs font-bold">
+            <Link
+              href={`/directory/${event.clubId ?? ''}`}
+              className="hover:text-blue-primary"
+              scroll
+            >
+              {event.club.name}
+            </Link>{' '}
+            •<wbr />
+            <span className="text-blue-primary">
+              {format(event.startTime, 'E, MMM d, p')}
+              {isSameDay(event.startTime, event.endTime) ? (
+                <> - {format(event.endTime, 'p')}</>
+              ) : (
+                <> - {format(event.endTime, 'E, MMM d, p')}</>
+              )}
+            </span>
+          </h4>
+          <p className="line-clamp-3 overflow-clip text-ellipsis text-xs font-bold">
+            {event.description}
+          </p>
+        </div>
+        <div className="ml-auto flex flex-row space-x-4">
+          {session && (
+            <EventLikeButton liked={event.liked} eventId={event.id} />
+          )}
           <Link
-            href={'/events'}
-            className="text-lg text-blue-primary transition-colors hover:text-blue-700"
+            className=" h-10 w-10 rounded-full bg-blue-primary p-1.5 shadow-lg transition-colors hover:bg-blue-700 active:bg-blue-800"
+            href={`/event/${event.id}`}
+            passHref
           >
-            here
+            <MoreIcon fill="fill-white" />
           </Link>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+};
+
+const VerticalCard = async ({
+  event,
+}: {
+  event: RouterOutputs['event']['findByFilters']['events'][number];
+}) => {
+  const session = await getServerAuthSession();
   return (
-    <div
-      className="group flex w-full flex-col space-y-7.5 pt-10"
-      data-view={'list'}
-    >
-      {events.map((event) => (
-        <div className="w-full" key={event.id}>
-          <EventCard event={event} />
+    <div className="container flex h-96 w-64 flex-col overflow-hidden rounded-lg bg-white shadow-sm transition-shadow hover:shadow-lg">
+      <div className="relative">
+        <div className="h-40 w-96">
+          <Image
+            src={'/event_default.jpg'}
+            alt="event image"
+            fill
+            objectFit="cover"
+          />
+          <div className="absolute inset-0 p-2">
+            <EventTimeAlert event={event} />
+          </div>
         </div>
-      ))}
+      </div>
+      <div className="flex h-full flex-col p-5">
+        <div className="space-y-2.5">
+          <h3 className="font-bold">{event.name}</h3>
+          <h4 className="text-xs font-bold">
+            <Link
+              href={`/directory/${event.clubId ?? ''}`}
+              className="hover:text-blue-primary"
+              scroll
+            >
+              {event.club.name}
+            </Link>
+            <div>
+              <span className="text-blue-primary">
+                {format(event.startTime, 'E, MMM d, p')}
+                {isSameDay(event.startTime, event.endTime) ? (
+                  <> - {format(event.endTime, 'p')}</>
+                ) : (
+                  <>
+                    {' '}
+                    - <br />
+                    {format(event.endTime, 'E, MMM d, p')}
+                  </>
+                )}
+              </span>
+            </div>
+          </h4>
+        </div>
+        <div className="mt-auto flex flex-row space-x-4">
+          <Link
+            className=" h-10 w-10 rounded-full bg-blue-primary p-1.5 shadow-lg transition-colors hover:bg-blue-700 active:bg-blue-800"
+            href={`/event/${event.id}`}
+            passHref
+          >
+            <MoreIcon fill="fill-white" />
+          </Link>
+          {session && (
+            <EventLikeButton liked={event.liked} eventId={event.id} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const EventCard = ({ event }: EventCardProps) => {
+  return (
+    <div>
+      <div className="hidden lg:group-data-[view=list]:contents">
+        <HorizontalCard event={event} />
+      </div>
+      <div className="contents lg:group-data-[view=list]:hidden">
+        <VerticalCard event={event} />
+      </div>
     </div>
   );
 };
-export default CommunityEvents;
+export default EventCard;