diff --git a/src/components/OrganizationDashCards/CardItem.module.css b/src/components/OrganizationDashCards/CardItem.module.css
deleted file mode 100644
index bfb85cb1bb..0000000000
--- a/src/components/OrganizationDashCards/CardItem.module.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.cardItem {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--bs-gray-200);
-  border-radius: 8px;
-  margin-top: 20px;
-}
-
-.cardItem .iconWrapper {
-  position: relative;
-  height: 40px;
-  width: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.cardItem .iconWrapper .themeOverlay {
-  background: var(--bs-primary);
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  opacity: 0.12;
-  border-radius: 50%;
-}
-
-.cardItem .iconWrapper .dangerOverlay {
-  background: var(--bs-danger);
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  opacity: 0.12;
-  border-radius: 50%;
-}
-
-.cardItem .title {
-  font-size: 1rem;
-  flex: 1;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-  margin-left: 3px;
-}
-
-.cardItem .location {
-  font-size: 0.9rem;
-  color: var(--bs-primary);
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-  -webkit-box-orient: vertical;
-}
-
-.cardItem .time {
-  font-size: 0.9rem;
-  color: var(--bs-secondary);
-}
-
-.cardItem .creator {
-  font-size: 1rem;
-  color: rgb(33, 208, 21);
-}
-
-.rightCard {
-  display: flex;
-  gap: 7px;
-  min-width: 170px;
-  justify-content: center;
-  flex-direction: column;
-  margin-left: 10px;
-  overflow-x: hidden;
-  width: 210px;
-}
diff --git a/src/components/OrganizationDashCards/CardItem.test.tsx b/src/components/OrganizationDashCards/CardItem.spec.tsx
similarity index 98%
rename from src/components/OrganizationDashCards/CardItem.test.tsx
rename to src/components/OrganizationDashCards/CardItem.spec.tsx
index 31f3474607..71ff22774b 100644
--- a/src/components/OrganizationDashCards/CardItem.test.tsx
+++ b/src/components/OrganizationDashCards/CardItem.spec.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import CardItem from './CardItem';
 import type { InterfaceCardItem } from './CardItem';
 import dayjs from 'dayjs';
+import React from 'react';
 
 describe('Testing the Organization Card', () => {
   test('Should render props and text elements For event card', () => {
@@ -36,7 +36,6 @@ describe('Testing the Organization Card', () => {
         email: 'johndoe@example.com',
         firstName: 'John',
         lastName: 'Doe',
-        __typename: 'User',
         _id: '1',
       },
     };
diff --git a/src/components/OrganizationDashCards/CardItem.tsx b/src/components/OrganizationDashCards/CardItem.tsx
index a7cfaa0f57..24e8182913 100644
--- a/src/components/OrganizationDashCards/CardItem.tsx
+++ b/src/components/OrganizationDashCards/CardItem.tsx
@@ -5,7 +5,7 @@ import MarkerIcon from 'assets/svgs/cardItemLocation.svg?react';
 import DateIcon from 'assets/svgs/cardItemDate.svg?react';
 import UserIcon from 'assets/svgs/user.svg?react';
 import dayjs from 'dayjs';
-import styles from './CardItem.module.css';
+import styles from '../../style/app.module.css';
 import { PersonAddAlt1Rounded } from '@mui/icons-material';
 
 /**
@@ -17,7 +17,12 @@ export interface InterfaceCardItem {
   time?: string;
   startdate?: string;
   enddate?: string;
-  creator?: any;
+  creator?: {
+    _id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+  };
   location?: string;
 }
 
@@ -27,7 +32,7 @@ export interface InterfaceCardItem {
  * @param props - Props for the CardItem component.
  * @returns JSX element representing the card item.
  */
-const cardItem = (props: InterfaceCardItem): JSX.Element => {
+const CardItem = (props: InterfaceCardItem): JSX.Element => {
   const { creator, type, title, startdate, time, enddate, location } = props;
   return (
     <>
@@ -120,4 +125,4 @@ const cardItem = (props: InterfaceCardItem): JSX.Element => {
   );
 };
 
-export default cardItem;
+export default CardItem;
diff --git a/src/components/OrganizationDashCards/CardItemLoading.spec.tsx b/src/components/OrganizationDashCards/CardItemLoading.spec.tsx
new file mode 100644
index 0000000000..8a132657a7
--- /dev/null
+++ b/src/components/OrganizationDashCards/CardItemLoading.spec.tsx
@@ -0,0 +1,23 @@
+import CardItemLoading from './CardItemLoading';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import styles from '../../style/app.module.css';
+describe('Test the CardItemLoading component', () => {
+  test('Should render the component', () => {
+    render(<CardItemLoading />);
+    expect(screen.getByTestId('cardItemLoading')).toBeInTheDocument();
+  });
+
+  test('Should render all required child elements', () => {
+    render(<CardItemLoading />);
+
+    const cardItemLoading = screen.getByTestId('cardItemLoading');
+    expect(cardItemLoading).toBeInTheDocument();
+
+    const iconWrapper = cardItemLoading.querySelector(`.${styles.iconWrapper}`);
+    expect(iconWrapper).toBeInTheDocument();
+
+    const title = cardItemLoading.querySelector(`.${styles.title}`);
+    expect(title).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrganizationDashCards/CardItemLoading.tsx b/src/components/OrganizationDashCards/CardItemLoading.tsx
index c7c666afb6..9db7c333c8 100644
--- a/src/components/OrganizationDashCards/CardItemLoading.tsx
+++ b/src/components/OrganizationDashCards/CardItemLoading.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import styles from './CardItem.module.css';
+import styles from '../../style/app.module.css';
 
 /**
  * CardItemLoading component is a loading state for the card item. It is used when the data is being fetched.
  * @returns JSX.Element
  */
-const cardItemLoading = (): JSX.Element => {
+const CardItemLoading = (): JSX.Element => {
   return (
     <>
       <div
@@ -28,4 +28,4 @@ const cardItemLoading = (): JSX.Element => {
   );
 };
 
-export default cardItemLoading;
+export default CardItemLoading;
diff --git a/src/components/OrganizationDashCards/DashBoardCardLoading.spec.tsx b/src/components/OrganizationDashCards/DashBoardCardLoading.spec.tsx
new file mode 100644
index 0000000000..f1cb2e56fa
--- /dev/null
+++ b/src/components/OrganizationDashCards/DashBoardCardLoading.spec.tsx
@@ -0,0 +1,28 @@
+import DashBoardCardLoading from './DashboardCardLoading';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import styles from '../../style/app.module.css';
+describe('Testing the DashBoardCardLoading component', () => {
+  beforeEach(() => {
+    render(<DashBoardCardLoading />);
+  });
+  test('should render the component', () => {
+    expect(screen.getByTestId('Card')).toBeInTheDocument();
+  });
+
+  test('should render every children elements of the component', () => {
+    const Card = screen.queryByTestId('Card');
+    const CardBody = Card?.querySelector(`.${styles.cardBody}`);
+    expect(CardBody).toBeInTheDocument();
+    const iconWrapper = Card?.querySelector(`.${styles.iconWrapper}`);
+    expect(iconWrapper).toBeInTheDocument();
+    const themeOverlay = Card?.querySelector(`.${styles.themeOverlay}`);
+    expect(themeOverlay).toBeInTheDocument();
+    const textWrapper = Card?.querySelector(`.${styles.textWrapper}`);
+    expect(textWrapper).toBeInTheDocument();
+    const primaryText = Card?.querySelector(`.${styles.primaryText}`);
+    expect(primaryText).toBeInTheDocument();
+    const secondaryText = Card?.querySelector(`.${styles.secondaryText}`);
+    expect(secondaryText).toBeInTheDocument();
+  });
+});
diff --git a/src/components/OrganizationDashCards/DashboardCard.test.tsx b/src/components/OrganizationDashCards/DashboardCard.spec.tsx
similarity index 99%
rename from src/components/OrganizationDashCards/DashboardCard.test.tsx
rename to src/components/OrganizationDashCards/DashboardCard.spec.tsx
index 71e5e1fed0..50a47f69d5 100644
--- a/src/components/OrganizationDashCards/DashboardCard.test.tsx
+++ b/src/components/OrganizationDashCards/DashboardCard.spec.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import DashboardCard from './DashboardCard';
-
+import React from 'react';
 describe('Testing the Dashboard Card', () => {
   test('should render props and text elements For event card', () => {
     const props = {
diff --git a/src/components/OrganizationDashCards/DashboardCard.tsx b/src/components/OrganizationDashCards/DashboardCard.tsx
index 4a29eafc57..0f0222ba29 100644
--- a/src/components/OrganizationDashCards/DashboardCard.tsx
+++ b/src/components/OrganizationDashCards/DashboardCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, Row } from 'react-bootstrap';
 import Col from 'react-bootstrap/Col';
-import styles from './Dashboardcard.module.css';
+import styles from '../../style/app.module.css';
 
 /** Dashboard card component is used to display the card with icon, title and count.
  * @param  icon - Icon for the card
diff --git a/src/components/OrganizationDashCards/DashboardCardLoading.tsx b/src/components/OrganizationDashCards/DashboardCardLoading.tsx
index b37c1e2065..4882e906d2 100644
--- a/src/components/OrganizationDashCards/DashboardCardLoading.tsx
+++ b/src/components/OrganizationDashCards/DashboardCardLoading.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Card, Row } from 'react-bootstrap';
 import Col from 'react-bootstrap/Col';
-import styles from './Dashboardcard.module.css';
+import styles from '../../style/app.module.css';
 
 /**
  * Dashboard card loading component is a loading state for the dashboard card. It is used when the data is being fetched.
  * @returns JSX.Element
  */
-const dashBoardCardLoading = (): JSX.Element => {
+const DashBoardCardLoading = (): JSX.Element => {
   return (
-    <Card className="rounded-4" border="0">
+    <Card className="rounded-4" border="0" data-testid="Card">
       <Card.Body className={styles.cardBody}>
         <Row className="align-items-center">
           <Col sm={4}>
@@ -37,4 +37,4 @@ const dashBoardCardLoading = (): JSX.Element => {
   );
 };
 
-export default dashBoardCardLoading;
+export default DashBoardCardLoading;
diff --git a/src/components/OrganizationDashCards/Dashboardcard.module.css b/src/components/OrganizationDashCards/Dashboardcard.module.css
deleted file mode 100644
index 365657fb4f..0000000000
--- a/src/components/OrganizationDashCards/Dashboardcard.module.css
+++ /dev/null
@@ -1,60 +0,0 @@
-.cardBody {
-  padding: 1.25rem 1.5rem;
-}
-
-.cardBody .iconWrapper {
-  position: relative;
-  height: 48px;
-  width: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.cardBody .iconWrapper .themeOverlay {
-  background: var(--bs-primary);
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  opacity: 0.12;
-  border-radius: 50%;
-}
-
-.cardBody .textWrapper .primaryText {
-  font-size: 24px;
-  font-weight: bold;
-  display: block;
-}
-
-.cardBody .textWrapper .secondaryText {
-  font-size: 14px;
-  display: block;
-  color: var(--bs-secondary);
-}
-
-@media (max-width: 600px) {
-  .cardBody {
-    min-height: 120px;
-  }
-
-  .cardBody .iconWrapper {
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
-  }
-
-  .cardBody .textWrapper {
-    margin-top: calc(0.5rem + 36px);
-    text-align: right;
-  }
-
-  .cardBody .textWrapper .primaryText {
-    font-size: 1.5rem;
-  }
-
-  .cardBody .textWrapper .secondaryText {
-    font-size: 1rem;
-  }
-}
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 5105146238..89074d2825 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -2334,6 +2334,66 @@ input::file-selector-button {
     width: 100%;
   }
 }
+@media (max-width: 600px) {
+  .cardBody {
+    min-height: 120px;
+  }
+
+  .cardBody .iconWrapper {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+  }
+
+  .cardBody .textWrapper {
+    margin-top: calc(0.5rem + 36px);
+    text-align: right;
+  }
+
+  .cardBody .textWrapper .primaryText {
+    font-size: 1.5rem;
+  }
+
+  .cardBody .textWrapper .secondaryText {
+    font-size: 1rem;
+  }
+}
+
+.cardBody {
+  padding: 1.25rem 1.5rem;
+}
+
+.cardBody .iconWrapper {
+  position: relative;
+  height: 48px;
+  width: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cardBody .iconWrapper .themeOverlay {
+  background: var(--bs-primary);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.12;
+  border-radius: 50%;
+}
+
+.cardBody .textWrapper .primaryText {
+  font-size: 24px;
+  font-weight: bold;
+  display: block;
+}
+
+.cardBody .textWrapper .secondaryText {
+  font-size: 14px;
+  display: block;
+  color: var(--bs-secondary);
+}
 
 /* Loading OrgList CSS */
 
@@ -2987,14 +3047,20 @@ button[data-testid='createPostBtn'] {
     top: 45%;
   }
 }
-
+.cardItem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--bs-gray-200);
+  border-radius: 8px;
+  margin-top: 20px;
+}
 @-webkit-keyframes zoomIn {
   0% {
     opacity: 0;
     -webkit-transform: scale(0.5);
     transform: scale(0.5);
   }
-
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
@@ -3008,7 +3074,6 @@ button[data-testid='createPostBtn'] {
     -webkit-transform: scale(0.5);
     transform: scale(0.5);
   }
-
   100% {
     opacity: 1;
     -webkit-transform: scale(1);
@@ -3016,29 +3081,106 @@ button[data-testid='createPostBtn'] {
   }
 }
 
-/* AddOnEntry.tsx */
+.cardItem .iconWrapper {
+  position: relative;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-.entrytoggle {
-  margin: 24px 24px 0 auto;
-  width: fit-content;
+.cardItem .iconWrapper .themeOverlay {
+  background: var(--bs-primary);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.12;
+  border-radius: 50%;
 }
 
-.entryaction {
-  margin-left: auto;
-  display: flex !important;
-  align-items: center;
-  background-color: transparent;
-  color: #31bb6b;
+.cardItem .title {
+  font-size: 1rem;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; /* Fallback for browsers that don't support line-clamp */
+  margin-left: 3px;
 }
-.cardAddOnEntry {
-  border: 4px solid green;
+/* Modern browsers - enable line clamping */
+@supports (-webkit-line-clamp: 1) {
+  .cardItem .title,
+  .cardItem .location,
+  .cardItem .time {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    white-space: initial;
+  }
 }
-.entryaction i {
-  margin-right: 8px;
+.cardItem .location {
+  font-size: 0.9rem;
+  color: var(--bs-primary);
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.cardItem .time {
+  font-size: 0.9rem;
+  color: var(--bs-secondary);
 }
 
-.entryaction .spinner-grow {
-  height: 1rem;
-  width: 1rem;
-  margin-right: 8px;
+.cardItem .creator {
+  font-size: 1rem;
+  color: var(--bs-success, #21d015);
+}
+.rightCard {
+  display: flex;
+  gap: 7px;
+  min-width: 170px;
+  justify-content: center;
+  flex-direction: column;
+  margin-left: 10px;
+  overflow-x: hidden;
+  width: 210px;
+
+  @keyframes zoomIn {
+    0% {
+      opacity: 0;
+      -webkit-transform: scale(0.5);
+      transform: scale(0.5);
+    }
+
+    100% {
+      opacity: 1;
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+
+  /* AddOnEntry.tsx */
+
+  .entrytoggle {
+    margin: 24px 24px 0 auto;
+    width: fit-content;
+  }
+
+  .entryaction {
+    margin-left: auto;
+    display: flex !important;
+    align-items: center;
+    background-color: transparent;
+    color: #31bb6b;
+  }
+
+  .entryaction .spinner-grow {
+    height: 1rem;
+    width: 1rem;
+    margin-right: 8px;
+  }
 }