diff --git a/app/.DS_Store b/app/.DS_Store
index 61eaee2..6dbe7dc 100644
Binary files a/app/.DS_Store and b/app/.DS_Store differ
diff --git a/client/.DS_Store b/client/.DS_Store
index 98da61b..1e4f339 100644
Binary files a/client/.DS_Store and b/client/.DS_Store differ
diff --git a/client/src/components/center-calendar/CenterCalendar.js b/client/src/components/center-calendar/CenterCalendar.js
index 6e2f898..1d0ea14 100644
--- a/client/src/components/center-calendar/CenterCalendar.js
+++ b/client/src/components/center-calendar/CenterCalendar.js
@@ -458,8 +458,8 @@ const EventsCalendar = () => {
 		}
 	};
 
-	const calendarView = <div className="multi-columns-container">
-		<div className="column-container" style={{'minWidth': '1000px'}}>
+	const calendarView = <div className="multi-columns-container" style={{ display: 'flex', alignItems: 'stretch' }}>
+		<div className="column-container" style={{ minWidth: '1000px', display: 'flex', flexDirection: 'column' }}>
 			{calendar && <ScheduleXCalendar customComponents={customComponents} calendarApp={calendar} />}
 			{/* Dynamic Legend */}
 			<div className="calendar-legend mt-3">
@@ -483,85 +483,87 @@ const EventsCalendar = () => {
 				</div>
 			</div>
 		</div>
-		<div className="column-container">
-			<div className="column-card" style={{ maxHeight: '800px', overflowY: 'auto', overflowX: 'hidden', padding: '16px' }}>
+		<div className="column-container" style={{ display: 'flex', flexDirection: 'column' }}>
+			<div className="column-card" style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '16px', display: 'flex', flexDirection: 'column' }}>
 				<h6 className="text-primary mb-3">List</h6>
-				{(!groupedEvents || groupedEvents.size === 0) && (
-					<div style={{ padding: '24px', textAlign: 'center', color: '#999' }}>
-						No events for this period
-					</div>
-				)}
-				{
-					Array.from(groupedEvents?.keys())?.map((key) => {
-						return <div key={key}>
-							<h6 className="text-primary me-2">{key}</h6>
-							{
-								groupedEvents.get(key).map(eventItem => <div 
-									key={eventItem.id}
-									className={`event-${eventItem.color || 'primary'} mb-3 event-list-item-container`}
-									onClick={() => currentTab === 'medicalCalendar' && goToView(eventItem.id)}
-									style={{ cursor: currentTab === 'medicalCalendar' ? 'pointer' : 'default', padding: '8px 12px', borderRadius: '4px' }}
-								>
-									{/* Medical Events */}
-									{currentTab === 'medicalCalendar' && (
-										<>
-											<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-												<span className="sx__month-agenda-event__title">{formatFullName(eventItem.customer)}</span>
-												<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')} - {moment(eventItem?.stop_time || eventItem?.start_time).format('HH:mm')}</span>
-											</div>
-											<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Provider: {eventItem?.doctor || '-'}</div>
-										</>
-									)}
-									
-									{/* Activities */}
-									{currentTab === 'activitiesCalendar' && (
-										<>
-											<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-												<span className="sx__month-agenda-event__title">{eventItem.title}</span>
-												<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')}</span>
-											</div>
-											<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Location: {eventItem?.event_location || '-'}</div>
-										</>
-									)}
-									
-									{/* Attendance Notes */}
-									{currentTab === 'incidentsCalendar' && (
-										<>
-											<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-												<span className="sx__month-agenda-event__title">{eventItem?.target_name || eventItem.title}</span>
-												<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
-											</div>
-											<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Reason: {eventItem?.description || '-'}</div>
-										</>
-									)}
-									
-									{/* Meal Plan */}
-									{currentTab === 'mealPlanCalendar' && (
-										<>
-											<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-												<span className="sx__month-agenda-event__title">{eventItem.title}</span>
-												<span style={{ fontSize: '12px', textTransform: 'capitalize' }}>{eventItem?.meal_type || '-'}</span>
-											</div>
-											<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Ingredients: {eventItem?.ingredients || '-'}</div>
-										</>
-									)}
-									
-									{/* Important Dates / Reminders */}
-									{currentTab === 'reminderDatesCalendar' && (
-										<>
-											<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-												<span className="sx__month-agenda-event__title">{eventItem.title}</span>
-												<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
-											</div>
-											<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>{eventItem?.target_type === 'vehicle' ? 'Vehicle' : 'Person'}: {eventItem?.target_name || '-'}</div>
-											{eventItem?.event_prediction_date && <div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '2px' }}>Deadline: {moment(eventItem?.event_prediction_date).format('MM/DD/YYYY')}</div>}
-										</>
-									)}
-								</div>)
-							}
+				<div style={{ flex: 1, overflowY: 'auto' }}>
+					{(!groupedEvents || groupedEvents.size === 0) && (
+						<div style={{ padding: '24px', textAlign: 'center', color: '#999' }}>
+							No events for this period
 						</div>
-					})
-				}
+					)}
+					{
+						Array.from(groupedEvents?.keys())?.map((key) => {
+							return <div key={key}>
+								<h6 className="text-primary me-2">{key}</h6>
+								{
+									groupedEvents.get(key).map(eventItem => <div 
+										key={eventItem.id}
+										className={`event-${eventItem.color || 'primary'} mb-3 event-list-item-container`}
+										onClick={() => currentTab === 'medicalCalendar' && goToView(eventItem.id)}
+										style={{ cursor: currentTab === 'medicalCalendar' ? 'pointer' : 'default', padding: '8px 12px', borderRadius: '4px' }}
+									>
+										{/* Medical Events */}
+										{currentTab === 'medicalCalendar' && (
+											<>
+												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+													<span className="sx__month-agenda-event__title">{formatFullName(eventItem.customer)}</span>
+													<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')} - {moment(eventItem?.stop_time || eventItem?.start_time).format('HH:mm')}</span>
+												</div>
+												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Provider: {eventItem?.doctor || '-'}</div>
+											</>
+										)}
+										
+										{/* Activities */}
+										{currentTab === 'activitiesCalendar' && (
+											<>
+												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+													<span className="sx__month-agenda-event__title">{eventItem.title}</span>
+													<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')}</span>
+												</div>
+												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Location: {eventItem?.event_location || '-'}</div>
+											</>
+										)}
+										
+										{/* Attendance Notes */}
+										{currentTab === 'incidentsCalendar' && (
+											<>
+												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+													<span className="sx__month-agenda-event__title">{eventItem?.target_name || eventItem.title}</span>
+													<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
+												</div>
+												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Reason: {eventItem?.description || '-'}</div>
+											</>
+										)}
+										
+										{/* Meal Plan */}
+										{currentTab === 'mealPlanCalendar' && (
+											<>
+												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+													<span className="sx__month-agenda-event__title">{eventItem.title}</span>
+													<span style={{ fontSize: '12px', textTransform: 'capitalize' }}>{eventItem?.meal_type || '-'}</span>
+												</div>
+												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Ingredients: {eventItem?.ingredients || '-'}</div>
+											</>
+										)}
+										
+										{/* Important Dates / Reminders */}
+										{currentTab === 'reminderDatesCalendar' && (
+											<>
+												<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+													<span className="sx__month-agenda-event__title">{eventItem.title}</span>
+													<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
+												</div>
+												<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>{eventItem?.target_type === 'vehicle' ? 'Vehicle' : 'Person'}: {eventItem?.target_name || '-'}</div>
+												{eventItem?.event_prediction_date && <div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '2px' }}>Deadline: {moment(eventItem?.event_prediction_date).format('MM/DD/YYYY')}</div>}
+											</>
+										)}
+									</div>)
+								}
+							</div>
+						})
+					}
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/client/src/components/customers/CustomersList.js b/client/src/components/customers/CustomersList.js
index 98cc15d..48f33d8 100644
--- a/client/src/components/customers/CustomersList.js
+++ b/client/src/components/customers/CustomersList.js
@@ -50,7 +50,7 @@ const CustomersList = () => {
     navigate(`/customers`);
   }
 
-  const additionalButtons = (
+  const additionalButtons = ({ showExportDropdown, onExportToggle }) => (
     <>
       <button className="btn btn-primary me-2" onClick={() => goToCreateNew()}>
         <Plus size={16}></Plus>Add New Customer
@@ -63,7 +63,9 @@ const CustomersList = () => {
           phone: customer?.phone || customer?.home_phone || customer?.mobile_phone,
           tags: customer?.tags?.join(', ')
         }))} 
-        filename="customers" 
+        filename="customers"
+        show={showExportDropdown}
+        onToggle={onExportToggle}
       />
     </>
   );
diff --git a/client/src/components/dashboard/DashboardCustomersList.js b/client/src/components/dashboard/DashboardCustomersList.js
index ccb381e..9d123f1 100644
--- a/client/src/components/dashboard/DashboardCustomersList.js
+++ b/client/src/components/dashboard/DashboardCustomersList.js
@@ -21,6 +21,7 @@ const DashboardCustomersList = ({ additionalButtons, showBreadcrumb = false, tit
   const [filteredCustomers, setFilteredCustomers] = useState(customers);
   const [showFilterDropdown, setShowFilterDropdown] = useState(false);
   const [showManageTableDropdown, setShowManageTableDropdown] = useState(false);
+  const [showExportDropdown, setShowExportDropdown] = useState(false);
   const [healthConditionFilter, setHealthConditionFilter] = useState('');
   const [paymentStatusFilter, setPaymentStatusFilter] = useState('');
   const [serviceRequirementFilter, setServiceRequirementFilter] = useState('');
@@ -427,6 +428,7 @@ const DashboardCustomersList = ({ additionalButtons, showBreadcrumb = false, tit
               onToggle={(isOpen) => {
                 if (isOpen) {
                   setShowManageTableDropdown(false);
+                  setShowExportDropdown(false);
                 }
                 setShowFilterDropdown(isOpen);
               }}
@@ -444,11 +446,24 @@ const DashboardCustomersList = ({ additionalButtons, showBreadcrumb = false, tit
               onToggle={(isOpen) => {
                 if (isOpen) {
                   setShowFilterDropdown(false);
+                  setShowExportDropdown(false);
                 }
                 setShowManageTableDropdown(isOpen);
               }}
             />
-            {additionalButtons}
+            {typeof additionalButtons === 'function' 
+              ? additionalButtons({
+                  showExportDropdown,
+                  onExportToggle: (isOpen) => {
+                    if (isOpen) {
+                      setShowFilterDropdown(false);
+                      setShowManageTableDropdown(false);
+                    }
+                    setShowExportDropdown(isOpen);
+                  }
+                })
+              : additionalButtons
+            }
           </div>
         </div>
       </div>
diff --git a/client/src/shared/components/Export.js b/client/src/shared/components/Export.js
index 5bd62ca..0985595 100644
--- a/client/src/shared/components/Export.js
+++ b/client/src/shared/components/Export.js
@@ -2,12 +2,16 @@ import React, { useState } from "react";
 import { Dropdown } from "react-bootstrap";
 import { Download } from "react-bootstrap-icons";
 
-const Export = ({ columns, data, filename = "export", customActions = [] }) => {
-  const [showExportDropdown, setShowExportDropdown] = useState(false);
+const Export = ({ columns, data, filename = "export", customActions = [], show, onToggle }) => {
+  const [internalShow, setInternalShow] = useState(false);
   const [exportColumns, setExportColumns] = useState(
     columns.map(col => ({ ...col, show: true }))
   );
 
+  // Use external control if provided, otherwise use internal state
+  const showExportDropdown = show !== undefined ? show : internalShow;
+  const handleToggle = onToggle || ((isOpen) => setInternalShow(isOpen));
+
   const handleColumnToggle = (columnKey) => {
     const updatedColumns = exportColumns.map(col => 
       col.key === columnKey ? { ...col, show: !col.show } : col
@@ -17,7 +21,7 @@ const Export = ({ columns, data, filename = "export", customActions = [] }) => {
 
   const handleCancel = () => {
     setExportColumns(columns.map(col => ({ ...col, show: true })));
-    setShowExportDropdown(false);
+    handleToggle(false);
   };
 
   const generateCSV = () => {
@@ -179,7 +183,7 @@ const Export = ({ columns, data, filename = "export", customActions = [] }) => {
       id="export-dropdown"
       className="me-2"
       show={showExportDropdown}
-      onToggle={() => setShowExportDropdown(!showExportDropdown)}
+      onToggle={handleToggle}
       autoClose={false}
     > 
       <Dropdown.Toggle variant="primary">