diff --git a/components/MaintenanceAlert.tsx b/components/MaintenanceAlert.tsx
index 82a136c..6885434 100644
--- a/components/MaintenanceAlert.tsx
+++ b/components/MaintenanceAlert.tsx
@@ -26,12 +26,12 @@ export default function MaintenanceAlert({
             fontWeight: 700,
           }}
         >
-          {upcoming
-            ? `Upcoming Maintenance: ${maintenance.title || 'Scheduled Maintenance'}`
-            : maintenance.title || 'Scheduled Maintenance'}
+          {(upcoming ? '[Upcoming] ' : '') + (maintenance.title || 'Scheduled Maintenance')}
         </span>
       }
-      color={upcoming ? (pageConfig.maintenances?.upcomingColor ?? 'gray') : maintenance.color || 'yellow'}
+      color={
+        upcoming ? pageConfig.maintenances?.upcomingColor ?? 'gray' : maintenance.color || 'yellow'
+      }
       withCloseButton={false}
       style={{ margin: '16px auto', ...style }}
     >
@@ -56,9 +56,7 @@ export default function MaintenanceAlert({
         <b>{upcoming ? 'Scheduled for' : 'From'}:</b> {new Date(maintenance.start).toLocaleString()}
         <br />
         <b>{upcoming ? 'Expected end' : 'To'}:</b>{' '}
-        {maintenance.end
-          ? new Date(maintenance.end).toLocaleString()
-          : 'Until further notice'}
+        {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
       </div>
 
       <Text style={{ paddingTop: '3px', whiteSpace: 'pre-line' }}>{maintenance.body}</Text>
diff --git a/components/OverallStatus.tsx b/components/OverallStatus.tsx
index 3874959..8aa13b5 100644
--- a/components/OverallStatus.tsx
+++ b/components/OverallStatus.tsx
@@ -45,6 +45,7 @@ export default function OverallStatus({
   const [openTime] = useState(Math.round(Date.now() / 1000))
   const [currentTime, setCurrentTime] = useState(Math.round(Date.now() / 1000))
   const isWindowVisible = useWindowVisibility()
+  const [expandUpcoming, setExpandUpcoming] = useState(false)
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -59,7 +60,9 @@ export default function OverallStatus({
 
   const now = new Date()
 
-  const activeMaintenances: (Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] })[] = maintenances
+  const activeMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
+    monitors?: MonitorTarget[]
+  })[] = maintenances
     .filter((m) => now >= new Date(m.start) && (!m.end || now <= new Date(m.end)))
     .map((maintenance) => ({
       ...maintenance,
@@ -68,7 +71,9 @@ export default function OverallStatus({
       ),
     }))
 
-  const upcomingMaintenances: (Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] })[] = maintenances
+  const upcomingMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
+    monitors?: MonitorTarget[]
+  })[] = maintenances
     .filter((m) => now < new Date(m.start))
     .map((maintenance) => ({
       ...maintenance,
@@ -90,32 +95,40 @@ export default function OverallStatus({
         } sec ago)`}
       </Title>
 
-      {/* Active Maintenance */}
-      {activeMaintenances.length > 0 && (
-        <>
-          {activeMaintenances.map((maintenance, idx) => (
-            <MaintenanceAlert
-              key={`active-${idx}`}
-              maintenance={maintenance}
-              style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
-            />
-          ))}
-        </>
-      )}
-
       {/* Upcoming Maintenance */}
       {upcomingMaintenances.length > 0 && (
         <>
-          {upcomingMaintenances.map((maintenance, idx) => (
-            <MaintenanceAlert
-              key={`upcoming-${idx}`}
-              maintenance={maintenance}
-              style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
-              upcoming
-            />
-          ))}
+          <Title mt="4px" style={{ textAlign: 'center', color: '#70778c' }} order={5}>
+            {`${upcomingMaintenances.length} upcoming maintenances`}{' '}
+            <span
+              style={{ textDecoration: 'underline' }}
+              onClick={() => setExpandUpcoming(!expandUpcoming)}
+            >
+              {expandUpcoming ? '[HIDE]' : '[SHOW]'}
+            </span>
+          </Title>
+
+          <Collapse in={expandUpcoming}>
+            {upcomingMaintenances.map((maintenance, idx) => (
+              <MaintenanceAlert
+                key={`upcoming-${idx}`}
+                maintenance={maintenance}
+                style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
+                upcoming
+              />
+            ))}
+          </Collapse>
         </>
       )}
+
+      {/* Active Maintenance */}
+      {activeMaintenances.map((maintenance, idx) => (
+        <MaintenanceAlert
+          key={`active-${idx}`}
+          maintenance={maintenance}
+          style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
+        />
+      ))}
     </Container>
   )
 }