diff --git a/src/components/Venues/VenueCard.tsx b/src/components/Venues/VenueCard.tsx
index 752ac95139..43da734bd6 100644
--- a/src/components/Venues/VenueCard.tsx
+++ b/src/components/Venues/VenueCard.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Card, Button } from 'react-bootstrap';
 import defaultImg from 'assets/images/defaultImg.png';
 import PeopleIcon from 'assets/svgs/people.svg?react';
-import styles from 'screens/OrganizationVenues/OrganizationVenues.module.css';
+import styles from '../../style/app.module.css';
 import { useTranslation } from 'react-i18next';
 import type { InterfaceQueryVenueListItem } from 'utils/interfaces';
 
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 7515d149ca..b030d0c657 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -38,17 +38,6 @@
   font-weight: 600;
 }
 
-.cards {
-  width: 45%;
-  background: #fcfcfc;
-  margin: 10px 20px;
-  padding: 20px 30px;
-  border-radius: 5px;
-  border: 1px solid #e8e8e8;
-  box-shadow: 0 3px 5px #c9c9c9;
-  margin-right: 40px;
-  color: #737373;
-}
 .cards > h2 {
   font-size: 19px;
 }
@@ -61,6 +50,43 @@
   margin-bottom: 7px;
 }
 
+.cards:hover {
+  filter: brightness(0.8);
+}
+.cards:hover::before {
+  opacity: 0.5;
+}
+
+.cards:hover::after {
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+
+.cards:last-child:nth-last-child(odd) {
+  grid-column: auto / span 2;
+}
+
+.cards:first-child:nth-last-child(even),
+.cards:first-child:nth-last-child(even) ~ .box {
+  grid-column: auto / span 1;
+}
+
+.capacityLabel {
+  background-color: #31bb6b !important;
+  color: white;
+  height: 22.19px;
+  font-size: 12px;
+  font-weight: bolder;
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.capacityLabel svg {
+  margin-bottom: 3px;
+}
+
 .sidebar {
   z-index: 0;
   padding-top: 5px;