diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css
index 5b128d075d..2854738252 100644
--- a/src/components/EventListCard/EventListCard.module.css
+++ b/src/components/EventListCard/EventListCard.module.css
@@ -17,9 +17,24 @@
 .cards a:hover {
   color: black;
 }
+.cards {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s;
+}
 .dispflex {
   display: flex;
-  justify-content: space-between;
+  height: 50px;
+  transition: transform 0.3s ease;
+  cursor: pointer;
+}
+.cards:hover {
+  transform: scale(2.5);
+  z-index: 5;
+}
+.cards:hover h2 {
+  font-size: 0.4vmax;
+  margin-bottom: 0;
 }
 .iconContainer {
   display: flex;
diff --git a/src/components/EventListCard/EventListCard.test.tsx b/src/components/EventListCard/EventListCard.test.tsx
index ee48e2f871..61eaa4acb7 100644
--- a/src/components/EventListCard/EventListCard.test.tsx
+++ b/src/components/EventListCard/EventListCard.test.tsx
@@ -268,4 +268,44 @@ describe('Testing Event List Card', () => {
       fireEvent.click(deleteBtn);
     });
   });
+
+  test('Should render truncated event details', async () => {
+    const longEventName =
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A very long event name that exceeds 150 characters and needs to be truncated';
+    const longDescription =
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A very long description that exceeds 150 characters and needs to be truncated';
+    const longEventNameLength = longEventName.length;
+    const longDescriptionLength = longDescription.length;
+    const truncatedEventName = longEventName.substring(0, 150) + '...';
+    const truncatedDescriptionName = longDescription.substring(0, 150) + '...';
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <I18nextProvider i18n={i18nForTest}>
+          <EventListCard
+            key="123"
+            id="1"
+            eventName={longEventName}
+            eventLocation="location"
+            eventDescription={longDescription}
+            regDate="19/03/2022"
+            regEndDate="26/03/2022"
+            startTime="02:00"
+            endTime="06:00"
+            allDay={true}
+            recurring={false}
+            isPublic={true}
+            isRegisterable={false}
+          />
+        </I18nextProvider>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    expect(longEventNameLength).toBeGreaterThan(100);
+    expect(longDescriptionLength).toBeGreaterThan(256);
+    expect(truncatedEventName).toContain('...');
+    expect(truncatedDescriptionName).toContain('...');
+    await wait();
+  });
 });
diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx
index 7f817890de..e56e38840f 100644
--- a/src/components/EventListCard/EventListCard.tsx
+++ b/src/components/EventListCard/EventListCard.tsx
@@ -140,7 +140,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
         >
           <div className={styles.dispflex}>
             <h2>
-              {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}{' '}
+              {props.eventName ? (
+                <>
+                  {props.eventName.length > 150 ? (
+                    <>{props.eventName.substring(0, 150)}...</>
+                  ) : (
+                    <>{props.eventName}</>
+                  )}
+                </>
+              ) : (
+                <>Dogs Care</>
+              )}
             </h2>
           </div>
         </div>
@@ -162,7 +172,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               <p className={styles.preview}>
                 {t('eventTitle')}:{' '}
                 <span className={styles.view}>
-                  {props.eventName ? <>{props.eventName}</> : <>Dogs Care</>}{' '}
+                  {props.eventName ? (
+                    <>
+                      {props.eventName.length > 100 ? (
+                        <>{props.eventName.substring(0, 100)}...</>
+                      ) : (
+                        <>{props.eventName}</>
+                      )}
+                    </>
+                  ) : (
+                    <>Dogs Care</>
+                  )}
                 </span>
               </p>
               <p className={styles.preview}>
@@ -177,7 +197,11 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               </p>
               <p className={styles.preview}>
                 {t('description')}:{' '}
-                <span className={styles.view}>{props.eventDescription}</span>
+                <span className={styles.view}>
+                  {props.eventDescription && props.eventDescription.length > 256
+                    ? props.eventDescription.substring(0, 256) + '...'
+                    : props.eventDescription}
+                </span>
               </p>
               <p className={styles.preview}>
                 {t('on')}: <span className={styles.view}>{props.regDate}</span>
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx
index f6187ce9c6..0fabcd2c55 100644
--- a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx
+++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx
@@ -25,6 +25,20 @@ const props: InterfaceLeftDrawerProps = {
   setHideDrawer: jest.fn(),
   setShowAddEventProjectModal: jest.fn(),
 };
+const props2: InterfaceLeftDrawerProps = {
+  event: {
+    _id: 'testEvent',
+    title: 'This is a very long event title that exceeds 20 characters',
+    description:
+      'This is a very long event description that exceeds 30 characters. It contains more details about the event.',
+    organization: {
+      _id: 'Test Organization',
+    },
+  },
+  hideDrawer: false,
+  setHideDrawer: jest.fn(),
+  setShowAddEventProjectModal: jest.fn(),
+};
 
 const mocks = [
   {
@@ -184,4 +198,24 @@ describe('Testing Left Drawer component for the Event Dashboard', () => {
     expect(localStorage.clear).toHaveBeenCalled();
     expect(global.window.location.pathname).toBe('/');
   });
+  test('Testing substring functionality in event title and description', async () => {
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider mocks={mocks}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <LeftDrawerEvent {...props2} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+    const eventTitle = props2.event.title;
+    expect(eventTitle.length).toBeGreaterThan(20);
+    const eventDescription = props2.event.description;
+    expect(eventDescription.length).toBeGreaterThan(30);
+    const truncatedEventTitle = eventTitle.substring(0, 20) + '...';
+    const truncatedEventDescription = eventDescription.substring(0, 30) + '...';
+    expect(truncatedEventTitle).toContain('...');
+    expect(truncatedEventDescription).toContain('...');
+  });
 });
diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
index 1981eb12f0..2e3ac65cde 100644
--- a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
+++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx
@@ -84,8 +84,16 @@ const leftDrawerEvent = ({
               />
             </div>
             <div className={styles.profileText}>
-              <span className={styles.primaryText}>{event.title}</span>
-              <span className={styles.secondaryText}>{event.description}</span>
+              <span className={styles.primaryText}>
+                {event.title && event.title.length > 20
+                  ? event.title.substring(0, 20) + '...'
+                  : event.title}
+              </span>
+              <span className={styles.secondaryText}>
+                {event.description && event.description.length > 30
+                  ? event.description.substring(0, 30) + '...'
+                  : event.description}
+              </span>
             </div>
           </button>
         </div>
diff --git a/src/screens/EventDashboard/EventDashboard.module.css b/src/screens/EventDashboard/EventDashboard.module.css
index 5a484443d8..10ac2ee4ed 100644
--- a/src/screens/EventDashboard/EventDashboard.module.css
+++ b/src/screens/EventDashboard/EventDashboard.module.css
@@ -41,7 +41,7 @@
   font-size: 20px;
   margin-bottom: 30px;
   padding-bottom: 5px;
-  width: 26%;
+  width: 100%;
 }
 .tagdetailsGreen > button {
   background-color: #31bb6b;
diff --git a/src/screens/EventDashboard/EventDashboard.tsx b/src/screens/EventDashboard/EventDashboard.tsx
index 810e8335c6..80f1374b71 100644
--- a/src/screens/EventDashboard/EventDashboard.tsx
+++ b/src/screens/EventDashboard/EventDashboard.tsx
@@ -80,7 +80,7 @@ const EventDashboard = (): JSX.Element => {
       setShowAddEventProjectModal={setShowAddEventProjectModal}
     >
       <Row>
-        <Col sm={3}>
+        <Col sm={4}>
           <div className={styles.sidebar}>
             <div className={styles.sidebarsticky}>
               {/* Side Bar - Static Information about the Event */}
@@ -110,7 +110,7 @@ const EventDashboard = (): JSX.Element => {
             </div>
           </div>
         </Col>
-        <Col sm={8} className="mt-sm-0 mt-5 ml-4 ml-sm-0">
+        <Col sm={6} className="mt-sm-0 mt-5 ml-4 ml-sm-0">
           {/* Main Screen Container */}
           <Container>
             <div className={styles.mainpageright}>