diff --git a/services/api/src/main.py b/services/api/src/main.py
index b15f6d5d..f9f93dfb 100644
--- a/services/api/src/main.py
+++ b/services/api/src/main.py
@@ -27,6 +27,7 @@
 from admin_new_org import AdminNewOrg
 from admin_org import AdminOrg
 from contact_support import ContactSupportResource
+from rsu_error_summary import RSUErrorSummaryResource
 import smtp_error_handler
 
 log_level = os.environ.get("LOGGING_LEVEL", "INFO")
@@ -61,6 +62,7 @@
 api.add_resource(AdminNotification, "/admin-notification")
 api.add_resource(AdminNewNotification, "/admin-new-notification")
 api.add_resource(ContactSupportResource, "/contact-support")
+api.add_resource(RSUErrorSummaryResource, "/rsu-error-summary")
 
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000)
diff --git a/services/api/src/middleware.py b/services/api/src/middleware.py
index 97858c4c..e8ea4e29 100644
--- a/services/api/src/middleware.py
+++ b/services/api/src/middleware.py
@@ -61,6 +61,7 @@ def get_user_role(token):
     "/rsu-geo-query": True,
     "/admin-new-notification": False,
     "/admin-notification": False,
+    "/rsu-error-summary": False,
 }
 
 
@@ -69,7 +70,7 @@ def check_auth_exempt(method, path):
     if method == "OPTIONS":
         return True
 
-    exempt_paths = ["/", "/contact-support"]
+    exempt_paths = ["/", "/contact-support", "/rsu-error-summary"]
     if path in exempt_paths:
         return True
 
diff --git a/services/api/src/rsu_error_summary.py b/services/api/src/rsu_error_summary.py
new file mode 100644
index 00000000..63d0d878
--- /dev/null
+++ b/services/api/src/rsu_error_summary.py
@@ -0,0 +1,75 @@
+import logging
+import os
+from flask import abort, request
+from flask_restful import Resource
+from marshmallow import Schema
+from marshmallow import fields
+
+from common.emailSender import EmailSender
+
+class RSUErrorSummarySchema(Schema):
+    emails = fields.Str(required=True)
+    subject = fields.Str(required=True)
+    message = fields.Str(required=True)
+
+class RSUErrorSummaryResource(Resource):
+    options_headers = {
+        "Access-Control-Allow-Origin": os.environ["CORS_DOMAIN"],
+        "Access-Control-Allow-Headers": "Content-Type,Authorization",
+        "Access-Control-Allow-Methods": "POST,OPTIONS",
+        "Access-Control-Max-Age": "3600",
+    }
+
+    headers = {
+        "Access-Control-Allow-Origin": os.environ["CORS_DOMAIN"],
+        "Access-Control-Allow-Headers": "Content-Type,Authorization",
+        "Access-Control-Allow-Methods": "POST,OPTIONS",
+        "Content-Type": "application/json",
+    }
+
+    def options(self):
+        # CORS support
+        return ("", 204, self.options_headers)
+
+    def post(self):
+        logging.debug("RSUErrorSummary POST requested")
+        # Check for main body values
+        if not request.json:
+            logging.error("No JSON body provided")
+            abort(400)
+
+        self.validate_input(request.json)
+
+        try:
+            email_addresses = request.json["emails"].split(",")
+            subject = request.json["subject"]
+            message = request.json["message"]
+
+            for email_address in email_addresses:
+                logging.info(f"Sending email to {email_address}")
+                emailSender = EmailSender(
+                    os.environ["CSM_TARGET_SMTP_SERVER_ADDRESS"],
+                    587,
+                )
+                emailSender.send(
+                    sender=os.environ["CSM_EMAIL_TO_SEND_FROM"],
+                    recipient=email_address,
+                    subject=subject,
+                    message=message,
+                    replyEmail="",
+                    username=os.environ["CSM_EMAIL_APP_USERNAME"],
+                    password=os.environ["CSM_EMAIL_APP_PASSWORD"],
+                    pretty=True,
+                )
+        except Exception as e:
+            logging.error(f"Exception encountered: {e}")
+            abort(500)
+        return ("", 200, self.headers)
+
+    def validate_input(self, input):
+        try:
+            schema = RSUErrorSummarySchema()
+            schema.load(input)
+        except Exception as e:
+            logging.error(f"Exception encountered: {e}")
+            abort(400)
\ No newline at end of file
diff --git a/services/api/tests/data/rsu_error_summary_data.py b/services/api/tests/data/rsu_error_summary_data.py
new file mode 100644
index 00000000..cce2fd97
--- /dev/null
+++ b/services/api/tests/data/rsu_error_summary_data.py
@@ -0,0 +1,17 @@
+CSM_EMAIL_TO_SEND_FROM = "test@test.com"
+CSM_EMAIL_APP_USERNAME = "testusername"
+CSM_EMAIL_APP_PASSWORD = "testpassword"
+DEFAULT_CSM_TARGET_SMTP_SERVER_ADDRESS = "smtp.gmail.com"
+DEFAULT_CSM_TARGET_SMTP_SERVER_PORT = 587
+
+
+rsu_error_summary_data_good = {
+    "subject": "test_subject",
+    "message": "test_message",
+    "emails": "some-reply@test.com",
+}
+
+rsu_error_summary_data_bad = {
+    "subject": "test_subject",
+    "message": "test_message",
+}
diff --git a/services/api/tests/src/test_rsu_error_summary.py b/services/api/tests/src/test_rsu_error_summary.py
new file mode 100644
index 00000000..f99b8258
--- /dev/null
+++ b/services/api/tests/src/test_rsu_error_summary.py
@@ -0,0 +1,150 @@
+import os
+from unittest.mock import MagicMock
+
+import api.src.rsu_error_summary as rsu_error_summary
+import api.tests.data.rsu_error_summary_data as rsu_error_summary_data
+
+# RSUErrorSummarySchema class tests ---
+
+def test_rsu_error_summary_schema():
+    # prepare
+    schema = rsu_error_summary.RSUErrorSummarySchema()
+
+    # execute
+    exceptionOccurred = False
+    try:
+        schema.load(rsu_error_summary_data.rsu_error_summary_data_good)
+    except Exception as e:
+        exceptionOccurred = True
+
+    # assert
+    assert exceptionOccurred == False
+
+
+def test_rsu_error_summary_schema_invalid():
+    # prepare
+    schema = rsu_error_summary.RSUErrorSummarySchema()
+
+    # execute
+    exceptionOccurred = False
+    try:
+        schema.load(rsu_error_summary_data.rsu_error_summary_data_bada)
+    except Exception as e:
+        exceptionOccurred = True
+
+    # assert
+    assert exceptionOccurred == True
+
+
+# RSUErrorSummaryResource class tests ---
+
+def test_options():
+    # prepare
+    os.environ["CSM_EMAIL_TO_SEND_FROM"] = rsu_error_summary_data.CSM_EMAIL_TO_SEND_FROM
+    os.environ["CSM_EMAIL_APP_USERNAME"] = rsu_error_summary_data.CSM_EMAIL_APP_USERNAME
+    os.environ["CSM_EMAIL_APP_PASSWORD"] = rsu_error_summary_data.CSM_EMAIL_APP_PASSWORD
+    os.environ[
+        "CSM_TARGET_SMTP_SERVER_ADDRESS"
+    ] = rsu_error_summary_data.DEFAULT_CSM_TARGET_SMTP_SERVER_ADDRESS
+    os.environ["CSM_TARGET_SMTP_SERVER_PORT"] = str(rsu_error_summary_data.DEFAULT_CSM_TARGET_SMTP_SERVER_PORT)
+    RSUErrorSummaryResource = rsu_error_summary.RSUErrorSummaryResource()
+
+    # execute
+    result = RSUErrorSummaryResource.options()
+
+    # assert
+    assert result == ("", 204, RSUErrorSummaryResource.options_headers)
+
+    # cleanup
+    del os.environ["CSM_EMAIL_TO_SEND_FROM"]
+    del os.environ["CSM_EMAIL_APP_USERNAME"]
+    del os.environ["CSM_EMAIL_APP_PASSWORD"]
+    del os.environ["CSM_TARGET_SMTP_SERVER_ADDRESS"]
+    del os.environ["CSM_TARGET_SMTP_SERVER_PORT"]
+
+
+def test_post_success():
+    # prepare
+    os.environ["CSM_EMAIL_TO_SEND_FROM"] = rsu_error_summary_data.CSM_EMAIL_TO_SEND_FROM
+    os.environ["CSM_EMAIL_APP_USERNAME"] = rsu_error_summary_data.CSM_EMAIL_APP_USERNAME
+    os.environ["CSM_EMAIL_APP_PASSWORD"] = rsu_error_summary_data.CSM_EMAIL_APP_PASSWORD
+    os.environ[
+        "CSM_TARGET_SMTP_SERVER_ADDRESS"
+    ] = rsu_error_summary_data.DEFAULT_CSM_TARGET_SMTP_SERVER_ADDRESS
+    os.environ["CSM_TARGET_SMTP_SERVER_PORT"] = str(rsu_error_summary_data.DEFAULT_CSM_TARGET_SMTP_SERVER_PORT)
+    RSUErrorSummaryResource = rsu_error_summary.RSUErrorSummaryResource()
+    RSUErrorSummaryResource.validate_input = MagicMock()
+    RSUErrorSummaryResource.send = MagicMock()
+    rsu_error_summary.abort = MagicMock()
+    rsu_error_summary.request = MagicMock()
+
+    # execute
+    result = RSUErrorSummaryResource.post()
+
+    # assert
+    assert result == ("", 200, RSUErrorSummaryResource.headers)
+
+    # cleanup
+    del os.environ["CSM_EMAIL_TO_SEND_FROM"]
+    del os.environ["CSM_EMAIL_APP_USERNAME"]
+    del os.environ["CSM_EMAIL_APP_PASSWORD"]
+    del os.environ["CSM_TARGET_SMTP_SERVER_ADDRESS"]
+    del os.environ["CSM_TARGET_SMTP_SERVER_PORT"]
+
+
+def test_post_no_json_body():
+    # prepare
+    os.environ["CSM_EMAIL_TO_SEND_FROM"] = rsu_error_summary_data.CSM_EMAIL_TO_SEND_FROM
+    os.environ["CSM_EMAIL_APP_USERNAME"] = rsu_error_summary_data.CSM_EMAIL_APP_USERNAME
+    os.environ["CSM_EMAIL_APP_PASSWORD"] = rsu_error_summary_data.CSM_EMAIL_APP_PASSWORD
+    os.environ[
+        "CSM_TARGET_SMTP_SERVER_ADDRESS"
+    ] = rsu_error_summary_data.DEFAULT_CSM_TARGET_SMTP_SERVER_ADDRESS
+    os.environ["CSM_TARGET_SMTP_SERVER_PORT"] = str(rsu_error_summary_data.DEFAULT_CSM_TARGET_SMTP_SERVER_PORT)
+    RSUErrorSummaryResource = rsu_error_summary.RSUErrorSummaryResource()
+    RSUErrorSummaryResource.validate_input = MagicMock()
+    RSUErrorSummaryResource.send = MagicMock()
+    rsu_error_summary.abort = MagicMock()
+    rsu_error_summary.request = MagicMock()
+    rsu_error_summary.request.json = None
+
+    # execute
+    result = RSUErrorSummaryResource.post()
+
+    # assert
+    assert rsu_error_summary.abort.call_count == 2
+    assert result == ("", 200, RSUErrorSummaryResource.headers)
+
+    # cleanup
+    del os.environ["CSM_EMAIL_TO_SEND_FROM"]
+    del os.environ["CSM_EMAIL_APP_USERNAME"]
+    del os.environ["CSM_EMAIL_APP_PASSWORD"]
+    del os.environ["CSM_TARGET_SMTP_SERVER_ADDRESS"]
+    del os.environ["CSM_TARGET_SMTP_SERVER_PORT"]
+
+
+def test_validate_input_good():
+    # prepare
+    os.environ["CSM_EMAIL_TO_SEND_FROM"] = rsu_error_summary_data.CSM_EMAIL_TO_SEND_FROM
+    os.environ["CSM_EMAIL_APP_USERNAME"] = rsu_error_summary_data.CSM_EMAIL_APP_USERNAME
+    os.environ["CSM_EMAIL_APP_PASSWORD"] = rsu_error_summary_data.CSM_EMAIL_APP_PASSWORD
+    os.environ[
+        "CSM_TARGET_SMTP_SERVER_ADDRESS"
+    ] = rsu_error_summary_data.DEFAULT_CSM_TARGET_SMTP_SERVER_ADDRESS
+    os.environ["CSM_TARGET_SMTP_SERVER_PORT"] = str(rsu_error_summary_data.DEFAULT_CSM_TARGET_SMTP_SERVER_PORT)
+    RSUErrorSummaryResource = rsu_error_summary.RSUErrorSummaryResource()
+
+    # execute
+    result = RSUErrorSummaryResource.validate_input(
+        rsu_error_summary_data.rsu_error_summary_data_good
+    )
+
+    # assert
+    assert result == None
+
+    # cleanup
+    del os.environ["CSM_EMAIL_TO_SEND_FROM"]
+    del os.environ["CSM_EMAIL_APP_USERNAME"]
+    del os.environ["CSM_EMAIL_APP_PASSWORD"]
+    del os.environ["CSM_TARGET_SMTP_SERVER_ADDRESS"]
+    del os.environ["CSM_TARGET_SMTP_SERVER_PORT"]
\ No newline at end of file
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index b2481013..4c27fe74 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -60,6 +60,7 @@
         "react-spinners": "^0.11.0",
         "react-table": "^7.8.0",
         "react-tabs": "^4.2.1",
+        "react-to-print": "^3.0.1",
         "react-widgets": "5.8.4",
         "reactstrap": "^9.2.2",
         "recharts": "^2.12.6",
@@ -24960,6 +24961,14 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-to-print": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-3.0.1.tgz",
+      "integrity": "sha512-WcGiim2VWiHW7TR0PB9Xqv/SOOtnDJbjhlSOeMB1N+lxyFLuoQ8GIoNAw/ci7+sCkbXreEKmiy1ZWgd87v7U2Q==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ~19"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index d744e430..7cbc325d 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -55,6 +55,7 @@
     "react-spinners": "^0.11.0",
     "react-table": "^7.8.0",
     "react-tabs": "^4.2.1",
+    "react-to-print": "^3.0.1",
     "react-widgets": "5.8.4",
     "reactstrap": "^9.2.2",
     "recharts": "^2.12.6",
diff --git a/webapp/src/EnvironmentVars.tsx b/webapp/src/EnvironmentVars.tsx
index ba6f7b2e..f40e929b 100644
--- a/webapp/src/EnvironmentVars.tsx
+++ b/webapp/src/EnvironmentVars.tsx
@@ -63,6 +63,7 @@ class EnvironmentVars {
   static adminAddOrg = `${this.getBaseApiUrl()}/admin-new-org`
   static adminOrg = `${this.getBaseApiUrl()}/admin-org`
   static contactSupport = `${this.getBaseApiUrl()}/contact-support`
+  static rsuErrorSummary = `${this.getBaseApiUrl()}/rsu-error-summary`
 }
 
 export default EnvironmentVars
diff --git a/webapp/src/apis/rsu-api.ts b/webapp/src/apis/rsu-api.ts
index 231924f7..f2951fb0 100644
--- a/webapp/src/apis/rsu-api.ts
+++ b/webapp/src/apis/rsu-api.ts
@@ -171,6 +171,15 @@ class RsuApi {
       body: JSON.stringify(json),
     })
   }
+
+  // POST
+  postRsuErrorSummary = async (json: Object): Promise<ApiMsgRespWithCodes<any>> => {
+    console.log('api: ', json)
+    return await apiHelper._postData({
+      url: EnvironmentVars.rsuErrorSummary,
+      body: JSON.stringify(json),
+    })
+  }
 }
 
 const rsuApiObject = new RsuApi()
diff --git a/webapp/src/components/AdminTable.tsx b/webapp/src/components/AdminTable.tsx
index 36e09829..25958ad0 100644
--- a/webapp/src/components/AdminTable.tsx
+++ b/webapp/src/components/AdminTable.tsx
@@ -11,6 +11,8 @@ interface AdminTableProps {
   data: any[]
   title: string
   editable?: any
+  selection?: boolean
+  tableLayout?: 'auto' | 'fixed'
 }
 
 const AdminTable = (props: AdminTableProps) => {
@@ -25,9 +27,9 @@ const AdminTable = (props: AdminTableProps) => {
             title={props.title}
             editable={props.editable}
             options={{
-              selection: true,
+              selection: props.selection === undefined ? true : props.selection,
               actionsColumnIndex: -1,
-              tableLayout: 'fixed',
+              tableLayout: props.tableLayout === undefined ? 'fixed' : props.tableLayout,
               rowStyle: {
                 overflowWrap: 'break-word',
               },
diff --git a/webapp/src/components/RsuErrorSummary.test.tsx b/webapp/src/components/RsuErrorSummary.test.tsx
new file mode 100644
index 00000000..a0662f3d
--- /dev/null
+++ b/webapp/src/components/RsuErrorSummary.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import RsuErrorSummary from './RsuErrorSummary'
+import { replaceChaoticIds } from '../utils/test-utils'
+
+it('should take a snapshot', () => {
+  const { container } = render(
+    <RsuErrorSummary
+      rsu={'string'}
+      online_status={''}
+      scms_status={''}
+      hidden={false}
+      setHidden={function (): void {
+        return null
+      }}
+    />
+  )
+
+  expect(replaceChaoticIds(container)).toMatchSnapshot()
+})
diff --git a/webapp/src/components/RsuErrorSummary.tsx b/webapp/src/components/RsuErrorSummary.tsx
new file mode 100644
index 00000000..dc365689
--- /dev/null
+++ b/webapp/src/components/RsuErrorSummary.tsx
@@ -0,0 +1,132 @@
+import React, { useState } from 'react'
+import { Form } from 'react-bootstrap'
+import { useForm } from 'react-hook-form'
+
+import 'react-widgets/styles.css'
+import RsuApi from '../apis/rsu-api'
+
+import './css/ContactSupportMenu.css'
+import toast from 'react-hot-toast'
+import Dialog from '@mui/material/Dialog'
+import { DialogActions, DialogContent, DialogTitle } from '@mui/material'
+import { RsuOnlineStatus } from '../apis/rsu-api-types'
+
+type RsuErrorSummaryType = {
+  rsu: 'string'
+  online_status: RsuOnlineStatus | string
+  scms_status: string
+  hidden: boolean
+  setHidden: () => void
+}
+
+const RsuErrorSummary = (props: RsuErrorSummaryType) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm()
+
+  const onSubmit = async (data: Object) => {
+    try {
+      const res = await RsuApi.postRsuErrorSummary(data)
+      const status = res.status
+      if (status === 200) {
+        toast.success('Successfully sent RSU summary email')
+        reset()
+      } else {
+        toast.error('Something went wrong: ' + status)
+      }
+    } catch (exception_var) {
+      toast.error('An exception occurred, please try again later')
+    }
+    props.setHidden()
+  }
+
+  const messageTable = `
+    <table>
+        <tr>
+            <th>Online Status</th>
+            <th>SCMS Status</th>
+        </tr>
+        <tr>
+            <td>${'RSU ' + props.online_status}</td>
+            <td>${props.scms_status}</td>
+        </tr>
+    </table>
+`
+
+  const message = `
+    <h2>RSU Error Summary Email</h2>
+    <br />
+    <p>Hello,</p>
+    <p>Below is the error summary for RSU ${props.rsu} at ${new Date().toISOString()} UTC:</p>
+    ${messageTable}
+`
+
+  return (
+    <Dialog open={!props.hidden}>
+      <DialogTitle style={{ textAlign: 'center' }}>RSU Error Summary Email</DialogTitle>
+      <DialogContent>
+        <Form
+          id="rsu-error-summary-form"
+          onSubmit={handleSubmit(onSubmit)}
+          style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}
+        >
+          <Form.Group className="mb-3" controlId="email">
+            <Form.Label className="label">Send To</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Comma-delimited list of emails (Required)"
+              {...register('emails', {
+                required: 'Email list is required',
+              })}
+              style={{ marginTop: '0.5rem', borderRadius: '5px' }}
+            />
+            {errors.email && <Form.Text className="text-danger">{errors.email.message}</Form.Text>}
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="subject">
+            <Form.Label className="label">Subject</Form.Label>
+            <Form.Control
+              type="text"
+              defaultValue={`RSU Error Summary for ${props.rsu}`}
+              {...register('subject', {
+                required: 'Subject is required',
+              })}
+              style={{ marginTop: '0.5rem', borderRadius: '5px' }}
+            />
+            {errors.subject && <Form.Text className="text-danger">{errors.subject.message}</Form.Text>}
+          </Form.Group>
+          <Form.Group className="mb-3" controlId="message">
+            <Form.Label className="label">Message</Form.Label>
+            <Form.Control
+              as="textarea"
+              rows={5}
+              defaultValue={message}
+              {...register('message', {
+                required: 'Message is required',
+              })}
+              style={{ marginTop: '0.5rem', borderRadius: '5px' }}
+            />
+            {errors.message && <Form.Text className="text-danger">{errors.message.message}</Form.Text>}
+          </Form.Group>
+        </Form>
+      </DialogContent>
+      <DialogActions>
+        <button
+          onClick={() => {
+            props.setHidden()
+          }}
+          className="admin-button"
+        >
+          Close
+        </button>
+        <button form="rsu-error-summary-form" type="submit" className="admin-button">
+          Send Email
+        </button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default RsuErrorSummary
diff --git a/webapp/src/components/__snapshots__/RsuErrorSummary.test.tsx.snap b/webapp/src/components/__snapshots__/RsuErrorSummary.test.tsx.snap
new file mode 100644
index 00000000..261c5b8b
--- /dev/null
+++ b/webapp/src/components/__snapshots__/RsuErrorSummary.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should take a snapshot 1`] = `
+<div
+  aria-hidden="true"
+/>
+`;
diff --git a/webapp/src/features/menu/DisplayRsuErrors.test.tsx b/webapp/src/features/menu/DisplayRsuErrors.test.tsx
new file mode 100644
index 00000000..718fcb20
--- /dev/null
+++ b/webapp/src/features/menu/DisplayRsuErrors.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import DisplayRsuErrors from './DisplayRsuErrors'
+import { Provider } from 'react-redux'
+import { setupStore } from '../../store'
+import { replaceChaoticIds } from '../../utils/test-utils'
+
+jest.useFakeTimers().setSystemTime(new Date('2024-10-01'))
+
+it('should take a snapshot', () => {
+  const { container } = render(
+    <Provider store={setupStore({})}>
+      <DisplayRsuErrors />
+    </Provider>
+  )
+
+  expect(replaceChaoticIds(container)).toMatchSnapshot()
+})
diff --git a/webapp/src/features/menu/DisplayRsuErrors.tsx b/webapp/src/features/menu/DisplayRsuErrors.tsx
new file mode 100644
index 00000000..3a5aa4fb
--- /dev/null
+++ b/webapp/src/features/menu/DisplayRsuErrors.tsx
@@ -0,0 +1,307 @@
+import React, { useEffect, useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { getIssScmsStatus, selectRsuData } from '../../generalSlices/rsuSlice'
+
+import '../../components/css/SnmpwalkMenu.css'
+import { theme } from '../../styles'
+import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
+import { Action } from '@material-table/core'
+import { RootState } from '../../store'
+import { selectRsuOnlineStatus, selectIssScmsStatusData } from '../../generalSlices/rsuSlice'
+
+import { PlaceOutlined, ArrowBackIos } from '@mui/icons-material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+import AdminTable from '../../components/AdminTable'
+import { setMapViewState } from '../../pages/mapSlice'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  StyledEngineProvider,
+  ThemeProvider,
+  Typography,
+} from '@mui/material'
+import RsuErrorSummary from '../../components/RsuErrorSummary'
+import GenerateRSUErrorsPDF from './GenerateRSUErrorsPDF'
+
+const DisplayRsuErrors = () => {
+  const dispatch: ThunkDispatch<RootState, void, AnyAction> = useDispatch()
+  const rsuData = useSelector(selectRsuData)
+  const rsuOnlineStatus = useSelector(selectRsuOnlineStatus)
+  const issScmsStatusData = useSelector(selectIssScmsStatusData)
+  const [selectedRSU, setSelectedRSU] = useState(null)
+  const [emailHidden, setEmailHidden] = useState(true)
+
+  type RsuErrorRowType = {
+    rsu: string
+    online_status: string
+    lat: number
+    lon: number
+    scms_status: string
+  }
+
+  // UseEffect to pull SCMS status data on first load
+  useEffect(() => {
+    dispatch(getIssScmsStatus())
+  }, [])
+
+  const getRSUOnlineStatus = (rsuIpv4: string) => {
+    return rsuIpv4 in rsuOnlineStatus && rsuOnlineStatus[rsuIpv4].hasOwnProperty('current_status')
+      ? rsuOnlineStatus[rsuIpv4].current_status
+      : 'Offline'
+  }
+
+  const getRSULastOnline = (rsuIpv4: string): string => {
+    return rsuIpv4 in rsuOnlineStatus && rsuOnlineStatus[rsuIpv4].hasOwnProperty('last_online')
+      ? rsuOnlineStatus[rsuIpv4].last_online
+      : 'No Data'
+  }
+
+  const getRSUSCMSStatus = (rsuIpv4: string) => {
+    return issScmsStatusData.hasOwnProperty(rsuIpv4) && issScmsStatusData[rsuIpv4]
+      ? issScmsStatusData[rsuIpv4].health
+      : '0'
+  }
+
+  const getRSUSCMSExpiration = (rsuIpv4: string) => {
+    return issScmsStatusData.hasOwnProperty(rsuIpv4) &&
+      issScmsStatusData[rsuIpv4] !== null &&
+      issScmsStatusData[rsuIpv4].hasOwnProperty('expiration')
+      ? issScmsStatusData[rsuIpv4].expiration
+      : 'Never downloaded certificates'
+  }
+
+  const getRSUSCMSDisplay = (rsuIpv4: string) => {
+    if (getRSUSCMSStatus(rsuIpv4) === '0') {
+      var rsu_scms_status = 'SCMS Unhealthy'
+      let rsu_scms_expiration = getRSUSCMSExpiration(rsuIpv4)
+      switch (rsu_scms_expiration) {
+        case 'Never downloaded certificates':
+          rsu_scms_status += ' (RSU Never downloaded certificates)'
+          break
+        default:
+          try {
+            let expiration_date = new Date(rsu_scms_expiration)
+            let now = new Date()
+            let diff = expiration_date.getTime() - now.getTime()
+            if (diff < 0) {
+              rsu_scms_status += ' (RSU SCMS certificate expired)'
+            }
+          } catch (e) {
+            console.debug('Error parsing SCMS expiration date: ', e)
+          }
+          break
+      }
+    } else {
+      rsu_scms_status = 'SCMS Healthy (Expires ' + getRSUSCMSExpiration(rsuIpv4) + ')'
+    }
+    return rsu_scms_status
+  }
+
+  // Create RSU Errors Table Data
+  const rsuTableData = rsuData.map((rsu) => {
+    var rsu_online_status = 'RSU ' + getRSUOnlineStatus(rsu.properties.ipv4_address)
+
+    var rsu_scms_status = getRSUSCMSDisplay(rsu.properties.ipv4_address)
+
+    return {
+      rsu: rsu.properties.ipv4_address,
+      road: rsu.properties.primary_route,
+      lat: rsu.geometry.coordinates[1],
+      lon: rsu.geometry.coordinates[0],
+      online_status: rsu_online_status,
+      scms_status: rsu_scms_status,
+    }
+  })
+
+  const tableActions: Action<RsuErrorRowType>[] = [
+    {
+      icon: () => <PlaceOutlined />,
+      tooltip: 'View RSU on Map',
+      position: 'row',
+      onClick: (event, rowData: RsuErrorRowType) => {
+        dispatch(setMapViewState({ latitude: rowData.lat, longitude: rowData.lon, zoom: 15 }))
+        setSelectedRSU(rsuData.find((rsu) => rsu.properties.ipv4_address === rowData.rsu))
+      },
+    },
+  ]
+
+  const setHidden = () => {
+    setEmailHidden(!emailHidden)
+  }
+
+  const containerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 'auto',
+    TextAlign: 'center',
+    FlexDirection: 'column',
+  }
+
+  const errorPageStyle = {
+    backgroundColor: 'rgb(14, 32, 82)',
+    borderTop: '1px solid white',
+    borderBottom: '1px solid white',
+    fontFamily: 'Arial Helvetica Sans-Serif',
+    width: '90%',
+    padding: '0.5rem 1rem',
+  }
+
+  return (
+    <div style={containerStyle}>
+      {selectedRSU !== null ? (
+        <div id="container" className="sideBarOn" style={{ width: '95%' }}>
+          <h1 className="h1" style={{ marginBottom: '1rem', width: '100%', textAlign: 'center' }}>
+            {selectedRSU.properties.ipv4_address} Status
+          </h1>
+          <ArrowBackIos
+            style={{
+              position: 'absolute',
+              top: '1px',
+              left: '0.5rem',
+              margin: '1rem',
+              backgroundColor: 'rgb(14, 32, 82)',
+              color: 'white',
+              borderRadius: '50%',
+              zIndex: 90,
+              cursor: 'pointer',
+            }}
+            onClick={() => {
+              setSelectedRSU(null)
+            }}
+          />
+          <div id="sideBarBlock" className="accordion">
+            <StyledEngineProvider injectFirst>
+              <ThemeProvider theme={theme}>
+                <Accordion>
+                  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                    <Typography>Online Status</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <div style={errorPageStyle}>
+                      <p>
+                        <b>RSU Online Status: </b>
+                        {getRSUOnlineStatus(selectedRSU.properties.ipv4_address)}
+                      </p>
+                      <br />
+                      <p>
+                        <b>RSU Last Online: </b>
+                        {getRSULastOnline(selectedRSU.properties.ipv4_address)}
+                      </p>
+                    </div>
+                  </AccordionDetails>
+                </Accordion>
+                <Accordion>
+                  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                    <Typography>SCMS Status</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <div style={errorPageStyle}>
+                      <p>
+                        <b>SCMS Status: </b>
+                        {getRSUSCMSStatus(selectedRSU.properties.ipv4_address) === '1' ? 'Healthy' : 'Unhealthy'}
+                      </p>
+                      <br />
+                      <p>
+                        <b>SCMS Expiration: </b>
+                        {getRSUSCMSExpiration(selectedRSU.properties.ipv4_address)}
+                      </p>
+                    </div>
+                  </AccordionDetails>
+                </Accordion>
+              </ThemeProvider>
+            </StyledEngineProvider>
+          </div>
+          <div style={{ display: 'flex', alignContent: 'center', justifyContent: 'center', flexDirection: 'row' }}>
+            <Button
+              variant="contained"
+              style={{ margin: '1rem', backgroundColor: '#b55e12', color: 'white' }}
+              onClick={() => {
+                setEmailHidden(false)
+              }}
+            >
+              Generate Error Summary Email
+            </Button>
+          </div>
+          <RsuErrorSummary
+            rsu={selectedRSU.properties.ipv4_address}
+            online_status={
+              getRSUOnlineStatus(selectedRSU.properties.ipv4_address) +
+              (getRSULastOnline(selectedRSU.properties.ipv4_address) === 'No Data'
+                ? ' (Never Online)'
+                : ' (Last Online ' + getRSULastOnline(selectedRSU.properties.ipv4_address) + ')')
+            }
+            scms_status={getRSUSCMSDisplay(selectedRSU.properties.ipv4_address)}
+            hidden={emailHidden}
+            setHidden={setHidden}
+          />
+        </div>
+      ) : (
+        <div id="container" className="sideBarOn" style={{ width: '95%' }}>
+          <h1 className="h1" style={{ marginBottom: '1rem', width: '100%', textAlign: 'center' }}>
+            RSU Status
+          </h1>
+          <GenerateRSUErrorsPDF rows={rsuTableData} />
+          <AdminTable
+            actions={tableActions}
+            columns={[
+              { title: 'RSU', field: 'rsu' },
+              {
+                title: 'Online Status',
+                field: 'online_status',
+                render: (rowData) => (
+                  <p
+                    style={
+                      rowData.online_status.includes('RSU Offline')
+                        ? {
+                            color: '#FD7C7C',
+                            fontWeight: 'bold',
+                          }
+                        : {
+                            color: '#90EE90',
+                            fontWeight: 'bold',
+                          }
+                    }
+                  >
+                    {rowData.online_status}
+                  </p>
+                ),
+              },
+              {
+                title: 'SCMS Status',
+                field: 'scms_status',
+                render: (rowData) => (
+                  <p
+                    style={
+                      rowData.scms_status.includes('SCMS Healthy')
+                        ? {
+                            color: '#90EE90',
+                            fontWeight: 'bold',
+                          }
+                        : {
+                            color: '#FD7C7C',
+                            fontWeight: 'bold',
+                          }
+                    }
+                  >
+                    {rowData.scms_status}
+                  </p>
+                ),
+              },
+            ]}
+            data={rsuTableData}
+            title=""
+            selection={false}
+            tableLayout="auto"
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DisplayRsuErrors
diff --git a/webapp/src/features/menu/GenerateRSUErrorsPDF.test.tsx b/webapp/src/features/menu/GenerateRSUErrorsPDF.test.tsx
new file mode 100644
index 00000000..3e2de45c
--- /dev/null
+++ b/webapp/src/features/menu/GenerateRSUErrorsPDF.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import GenerateRSUErrorsPDF from './GenerateRSUErrorsPDF'
+import { Provider } from 'react-redux'
+import { setupStore } from '../../store'
+import { replaceChaoticIds } from '../../utils/test-utils'
+
+jest.useFakeTimers().setSystemTime(new Date('2024-10-01'))
+
+it('should take a snapshot', () => {
+  const { container } = render(
+    <Provider store={setupStore({})}>
+      <GenerateRSUErrorsPDF />
+    </Provider>
+  )
+
+  expect(replaceChaoticIds(container)).toMatchSnapshot()
+})
diff --git a/webapp/src/features/menu/GenerateRSUErrorsPDF.tsx b/webapp/src/features/menu/GenerateRSUErrorsPDF.tsx
new file mode 100644
index 00000000..7a183789
--- /dev/null
+++ b/webapp/src/features/menu/GenerateRSUErrorsPDF.tsx
@@ -0,0 +1,220 @@
+import React, { useRef, useState } from 'react'
+import { useReactToPrint } from 'react-to-print'
+import Button from '@mui/material/Button'
+import { StyledEngineProvider, ThemeProvider } from '@mui/material'
+import { theme } from '../../styles'
+import AdminTable from '../../components/AdminTable'
+import MaterialTable from '@material-table/core'
+
+const GenerateRSUErrorsPDF = (props) => {
+  const contentRef = useRef(null)
+  const errorRef = useRef(null)
+  const handlePrint = useReactToPrint({ contentRef })
+  const handleErrorPrint = useReactToPrint({ contentRef: errorRef })
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <div className={'containerDiv'}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1rem' }}>
+            <Button
+              style={{ color: 'white' }}
+              onClick={() => {
+                handlePrint()
+              }}
+            >
+              Print Full Report
+            </Button>
+            <Button
+              style={{ color: 'white' }}
+              onClick={() => {
+                handleErrorPrint()
+              }}
+            >
+              Print Error Report
+            </Button>
+          </div>
+          <div style={{ display: 'none' }}>
+            <div
+              ref={contentRef}
+              style={{
+                margin: '50px',
+                fontFamily: 'Arial Helvetica Sans-Serif',
+                height: '100vh',
+              }}
+            >
+              <h1 style={{ textAlign: 'center', marginBottom: '10px' }}>RSU Summary</h1>
+              <br />
+              <p>Below is the generated RSU summary report for all RSUs at {new Date().toISOString()} UTC:</p>
+              <div style={{ marginTop: '25px' }}>
+                <MaterialTable
+                  columns={[
+                    {
+                      title: 'RSU',
+                      field: 'rsu',
+                      render: (rowData) => <p style={{ color: 'black', fontWeight: 'bold' }}>{rowData.rsu}</p>,
+                    },
+                    {
+                      title: 'Road',
+                      field: 'road',
+                      render: (rowData) => <p style={{ color: 'black', fontWeight: 'bold' }}>{rowData.road}</p>,
+                    },
+                    {
+                      title: 'Online Status',
+                      field: 'online_status',
+                      render: (rowData) => (
+                        <p
+                          style={
+                            rowData.online_status.includes('RSU Offline')
+                              ? {
+                                  color: '#B60202',
+                                  fontWeight: 'bold',
+                                }
+                              : {
+                                  color: '#2B6510',
+                                  fontWeight: 'bold',
+                                }
+                          }
+                        >
+                          {rowData.online_status}
+                        </p>
+                      ),
+                    },
+                    {
+                      title: 'SCMS Status',
+                      field: 'scms_status',
+                      render: (rowData) => (
+                        <p
+                          style={
+                            rowData.scms_status.includes('SCMS Healthy')
+                              ? {
+                                  color: '#2B6510',
+                                  fontWeight: 'bold',
+                                }
+                              : {
+                                  color: '#B60202',
+                                  fontWeight: 'bold',
+                                }
+                          }
+                        >
+                          {rowData.scms_status}
+                        </p>
+                      ),
+                    },
+                  ]}
+                  actions={[]}
+                  data={props.rows}
+                  title=""
+                  options={{
+                    toolbar: false,
+                    search: false,
+                    paging: false,
+                  }}
+                  style={{
+                    backgroundColor: 'white',
+                    color: 'black',
+                    fontFamily: 'Arial Helvetica Sans-Serif',
+                    border: 'none',
+                  }}
+                />
+              </div>
+            </div>
+            <div
+              ref={errorRef}
+              style={{
+                margin: '50px',
+                fontFamily: 'Arial Helvetica Sans-Serif',
+                height: '100vh',
+              }}
+            >
+              <h1 style={{ textAlign: 'center', marginBottom: '10px' }}>RSU Error Summary</h1>
+              <br />
+              <p>Below is the generated RSU Error summary report for all RSUs at {new Date().toISOString()} UTC:</p>
+              <div style={{ marginTop: '25px' }}>
+                <MaterialTable
+                  columns={[
+                    {
+                      title: 'RSU',
+                      field: 'rsu',
+                      render: (rowData) => <p style={{ color: 'black', fontWeight: 'bold' }}>{rowData.rsu}</p>,
+                    },
+                    {
+                      title: 'Road',
+                      field: 'road',
+                      render: (rowData) => <p style={{ color: 'black', fontWeight: 'bold' }}>{rowData.road}</p>,
+                    },
+                    {
+                      title: 'Online Status',
+                      field: 'online_status',
+                      render: (rowData) => (
+                        <p
+                          style={
+                            rowData.online_status.includes('RSU Offline')
+                              ? {
+                                  color: '#B60202',
+                                  fontWeight: 'bold',
+                                }
+                              : {
+                                  color: '#2B6510',
+                                  fontWeight: 'bold',
+                                }
+                          }
+                        >
+                          {rowData.online_status}
+                        </p>
+                      ),
+                    },
+                    {
+                      title: 'SCMS Status',
+                      field: 'scms_status',
+                      render: (rowData) => (
+                        <p
+                          style={
+                            rowData.scms_status.includes('SCMS Healthy')
+                              ? {
+                                  color: '#2B6510',
+                                  fontWeight: 'bold',
+                                }
+                              : {
+                                  color: '#B60202',
+                                  fontWeight: 'bold',
+                                }
+                          }
+                        >
+                          {rowData.scms_status}
+                        </p>
+                      ),
+                    },
+                  ]}
+                  actions={[]}
+                  data={
+                    props.rows !== undefined
+                      ? props.rows.filter(
+                          (row) =>
+                            row.online_status.includes('RSU Offline') || row.scms_status.includes('SCMS Unhealthy')
+                        )
+                      : []
+                  }
+                  title=""
+                  options={{
+                    toolbar: false,
+                    search: false,
+                    paging: false,
+                  }}
+                  style={{
+                    backgroundColor: 'white',
+                    color: 'black',
+                    fontFamily: 'Arial Helvetica Sans-Serif',
+                    border: 'none',
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  )
+}
+
+export default GenerateRSUErrorsPDF
diff --git a/webapp/src/features/menu/Menu.css b/webapp/src/features/menu/Menu.css
index 109ecbd2..3cdb57d1 100644
--- a/webapp/src/features/menu/Menu.css
+++ b/webapp/src/features/menu/Menu.css
@@ -79,6 +79,25 @@
   background-color: #b55e12;
   color: white;
 }
+#rsu-errors-toggle {
+  height: 35px;
+  border: none;
+  padding: 1px 12px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 30px;
+  margin-left: 100px;
+  position: absolute;
+  z-index: 100;
+  margin-top: 10px;
+  right: 10px;
+  top: 185px;
+  background-color: #b55e12;
+  color: white;
+}
 #toggle_config {
   height: 35px;
   border: none;
diff --git a/webapp/src/features/menu/Menu.tsx b/webapp/src/features/menu/Menu.tsx
index 8e6a1339..48f5fdbc 100644
--- a/webapp/src/features/menu/Menu.tsx
+++ b/webapp/src/features/menu/Menu.tsx
@@ -5,9 +5,10 @@ import { useSelector, useDispatch } from 'react-redux'
 import { selectRole } from '../../generalSlices/userSlice'
 import { selectCountList, selectSelectedRsu } from '../../generalSlices/rsuSlice'
 import { selectConfigList } from '../../generalSlices/configSlice'
-import { selectDisplayCounts, selectView, setDisplay, setSortedCountList } from './menuSlice'
+import { selectDisplayCounts, selectView, setDisplay, setSortedCountList, selectDisplayRsuErrors } from './menuSlice'
 import { SecureStorageManager } from '../../managers'
 import DisplayCounts from './DisplayCounts'
+import DisplayRsuErrors from './DisplayRsuErrors'
 import ConfigureRSU from './ConfigureRSU'
 import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit'
 import { RootState } from '../../store'
@@ -31,6 +32,7 @@ const Menu = () => {
   const selectedRsu = useSelector(selectSelectedRsu)
   const selectedRsuList = useSelector(selectConfigList)
   const displayCounts = useSelector(selectDisplayCounts)
+  const displayRsuErrors = useSelector(selectDisplayRsuErrors)
   const view = useSelector(selectView)
 
   useEffect(() => {
@@ -39,19 +41,20 @@ const Menu = () => {
 
   return (
     <div>
-      {view === 'buttons' && !selectedRsu && selectedRsuList?.length === 0 && (
-        <div>
-          <button id="toggle" onClick={() => dispatch(setDisplay('tab'))}>
-            Display Counts
+      {view === 'tab' && displayCounts === true && !selectedRsu && selectedRsuList?.length === 0 && (
+        <div style={menuStyle} id="sideBarBlock" className="visibleProp">
+          <button id="toggle" onClick={() => dispatch(setDisplay({ view: 'buttons', display: 'displayCounts' }))}>
+            X
           </button>
+          <DisplayCounts />
         </div>
       )}
-      {view === 'tab' && displayCounts === true && !selectedRsu && selectedRsuList?.length === 0 && (
+      {view === 'tab' && displayRsuErrors === true && !selectedRsu && selectedRsuList?.length === 0 && (
         <div style={menuStyle} id="sideBarBlock" className="visibleProp">
-          <button id="toggle" onClick={() => dispatch(setDisplay('buttons'))}>
+          <button id="toggle" onClick={() => dispatch(setDisplay({ view: 'buttons', display: 'displayRsuErrors' }))}>
             X
           </button>
-          <DisplayCounts />
+          <DisplayRsuErrors />
         </div>
       )}
       {SecureStorageManager.getUserRole() === 'admin' && (selectedRsu || selectedRsuList?.length > 0) && (
diff --git a/webapp/src/features/menu/__snapshots__/DisplayRsuErrors.test.tsx.snap b/webapp/src/features/menu/__snapshots__/DisplayRsuErrors.test.tsx.snap
new file mode 100644
index 00000000..f820bc11
--- /dev/null
+++ b/webapp/src/features/menu/__snapshots__/DisplayRsuErrors.test.tsx.snap
@@ -0,0 +1,979 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should take a snapshot 1`] = `
+<div>
+  <div
+    style="display: flex; justify-content: center; align-items: center; margin: auto;"
+  >
+    <div
+      class="sideBarOn"
+      id="container"
+      style="width: 95%;"
+    >
+      <h1
+        class="h1"
+        style="margin-bottom: 1rem; width: 100%; text-align: center;"
+      >
+        RSU Status
+      </h1>
+      <div
+        class="containerDiv"
+      >
+        <div
+          style="display: flex; justify-content: space-between; margin-bottom: 1rem;"
+        >
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
+            style="color: white;"
+            tabindex="0"
+            type="button"
+          >
+            Print Full Report
+            <span
+              class="MuiTouchRipple-root css-mocked-MuiTouchRipple-root"
+            />
+          </button>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
+            style="color: white;"
+            tabindex="0"
+            type="button"
+          >
+            Print Error Report
+            <span
+              class="MuiTouchRipple-root css-mocked-MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+        <div
+          style="display: none;"
+        >
+          <div
+            style="margin: 50px; font-family: Arial Helvetica Sans-Serif; height: 100vh;"
+          >
+            <h1
+              style="text-align: center; margin-bottom: 10px;"
+            >
+              RSU Summary
+            </h1>
+            <br />
+            <p>
+              Below is the generated RSU summary report for all RSUs at 
+              2024-10-01T00:00:00.000Z
+               UTC:
+            </p>
+            <div
+              style="margin-top: 25px;"
+            >
+              <div
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-mocked-MuiPaper-root"
+                style="position: relative; background-color: white; color: black; font-family: Arial Helvetica Sans-Serif;"
+              >
+                <div
+                  class="MuiBox-root css-187halg"
+                >
+                  <div>
+                    <div
+                      style="overflow-y: auto;"
+                    >
+                      <div>
+                        <table
+                          class="MuiTable-root css-mocked-MuiTable-root"
+                          style="table-layout: auto;"
+                        >
+                          <thead
+                            class="MuiTableHead-root css-mocked-MuiTableHead-root"
+                          >
+                            <tr
+                              class="MuiTableRow-root MuiTableRow-head css-mocked-MuiTableRow-root"
+                            >
+                              <th
+                                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                                scope="col"
+                                style="box-sizing: border-box;"
+                              >
+                                <div
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                                  data-rfd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-draggable-id="0"
+                                  data-rfd-draggable-context-id="0"
+                                  data-rfd-draggable-id="0"
+                                  draggable="false"
+                                  role="button"
+                                  style="position: relative; min-width: 0; display: flex;"
+                                  tabindex="0"
+                                >
+                                  <span
+                                    aria-sort="none"
+                                    class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                    data-testid="mtableheader-sortlabel"
+                                    role="columnheader"
+                                    tabindex="0"
+                                  >
+                                    RSU
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                      data-testid="arrow_downward"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                  <span
+                                    data-testid="material-table-column-sort-order-indicator"
+                                    style="width: 1em;"
+                                  />
+                                </div>
+                              </th>
+                              <th
+                                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                                scope="col"
+                                style="box-sizing: border-box;"
+                              >
+                                <div
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                                  data-rfd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-draggable-id="1"
+                                  data-rfd-draggable-context-id="0"
+                                  data-rfd-draggable-id="1"
+                                  draggable="false"
+                                  role="button"
+                                  style="position: relative; min-width: 0; display: flex;"
+                                  tabindex="0"
+                                >
+                                  <span
+                                    aria-sort="none"
+                                    class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                    data-testid="mtableheader-sortlabel"
+                                    role="columnheader"
+                                    tabindex="0"
+                                  >
+                                    Road
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                      data-testid="arrow_downward"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                  <span
+                                    data-testid="material-table-column-sort-order-indicator"
+                                    style="width: 1em;"
+                                  />
+                                </div>
+                              </th>
+                              <th
+                                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                                scope="col"
+                                style="box-sizing: border-box;"
+                              >
+                                <div
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                                  data-rfd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-draggable-id="2"
+                                  data-rfd-draggable-context-id="0"
+                                  data-rfd-draggable-id="2"
+                                  draggable="false"
+                                  role="button"
+                                  style="position: relative; min-width: 0; display: flex;"
+                                  tabindex="0"
+                                >
+                                  <span
+                                    aria-sort="none"
+                                    class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                    data-testid="mtableheader-sortlabel"
+                                    role="columnheader"
+                                    tabindex="0"
+                                  >
+                                    Online Status
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                      data-testid="arrow_downward"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                  <span
+                                    data-testid="material-table-column-sort-order-indicator"
+                                    style="width: 1em;"
+                                  />
+                                </div>
+                              </th>
+                              <th
+                                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                                scope="col"
+                                style="box-sizing: border-box;"
+                              >
+                                <div
+                                  aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                                  data-rfd-drag-handle-context-id="0"
+                                  data-rfd-drag-handle-draggable-id="3"
+                                  data-rfd-draggable-context-id="0"
+                                  data-rfd-draggable-id="3"
+                                  draggable="false"
+                                  role="button"
+                                  style="position: relative; min-width: 0; display: flex;"
+                                  tabindex="0"
+                                >
+                                  <span
+                                    aria-sort="none"
+                                    class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                    data-testid="mtableheader-sortlabel"
+                                    role="columnheader"
+                                    tabindex="0"
+                                  >
+                                    SCMS Status
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                      data-testid="arrow_downward"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                  <span
+                                    data-testid="material-table-column-sort-order-indicator"
+                                    style="width: 1em;"
+                                  />
+                                </div>
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody
+                            class="MuiTableBody-root css-mocked-MuiTableBody-root"
+                          >
+                            <tr
+                              class="MuiTableRow-root css-mocked-MuiTableRow-root"
+                              style="height: 49px;"
+                            >
+                              <td
+                                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mocked-MuiTableCell-root"
+                                colspan="4"
+                                style="padding-top: 0px; padding-bottom: 0px; text-align: center;"
+                              >
+                                No records to display
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style="margin: 50px; font-family: Arial Helvetica Sans-Serif; height: 100vh;"
+          >
+            <h1
+              style="text-align: center; margin-bottom: 10px;"
+            >
+              RSU Error Summary
+            </h1>
+            <br />
+            <p>
+              Below is the generated RSU Error summary report for all RSUs at 
+              2024-10-01T00:00:00.000Z
+               UTC:
+            </p>
+            <div
+              style="margin-top: 25px;"
+            >
+              <div
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-mocked-MuiPaper-root"
+                style="position: relative; background-color: white; color: black; font-family: Arial Helvetica Sans-Serif;"
+              >
+                <div
+                  class="MuiBox-root css-187halg"
+                >
+                  <div>
+                    <div
+                      style="overflow-y: auto;"
+                    >
+                      <div>
+                        <table
+                          class="MuiTable-root css-mocked-MuiTable-root"
+                          style="table-layout: auto;"
+                        >
+                          <thead
+                            class="MuiTableHead-root css-mocked-MuiTableHead-root"
+                          >
+                            <tr
+                              class="MuiTableRow-root MuiTableRow-head css-mocked-MuiTableRow-root"
+                            >
+                              <th
+                                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                                scope="col"
+                                style="box-sizing: border-box;"
+                              >
+                                <div
+                                  aria-describedby="rfd-hidden-text-1-hidden-text-6"
+                                  data-rfd-drag-handle-context-id="1"
+                                  data-rfd-drag-handle-draggable-id="0"
+                                  data-rfd-draggable-context-id="1"
+                                  data-rfd-draggable-id="0"
+                                  draggable="false"
+                                  role="button"
+                                  style="position: relative; min-width: 0; display: flex;"
+                                  tabindex="0"
+                                >
+                                  <span
+                                    aria-sort="none"
+                                    class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                    data-testid="mtableheader-sortlabel"
+                                    role="columnheader"
+                                    tabindex="0"
+                                  >
+                                    RSU
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                      data-testid="arrow_downward"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                  <span
+                                    data-testid="material-table-column-sort-order-indicator"
+                                    style="width: 1em;"
+                                  />
+                                </div>
+                              </th>
+                              <th
+                                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                                scope="col"
+                                style="box-sizing: border-box;"
+                              >
+                                <div
+                                  aria-describedby="rfd-hidden-text-1-hidden-text-6"
+                                  data-rfd-drag-handle-context-id="1"
+                                  data-rfd-drag-handle-draggable-id="1"
+                                  data-rfd-draggable-context-id="1"
+                                  data-rfd-draggable-id="1"
+                                  draggable="false"
+                                  role="button"
+                                  style="position: relative; min-width: 0; display: flex;"
+                                  tabindex="0"
+                                >
+                                  <span
+                                    aria-sort="none"
+                                    class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                    data-testid="mtableheader-sortlabel"
+                                    role="columnheader"
+                                    tabindex="0"
+                                  >
+                                    Road
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                      data-testid="arrow_downward"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                  <span
+                                    data-testid="material-table-column-sort-order-indicator"
+                                    style="width: 1em;"
+                                  />
+                                </div>
+                              </th>
+                              <th
+                                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                                scope="col"
+                                style="box-sizing: border-box;"
+                              >
+                                <div
+                                  aria-describedby="rfd-hidden-text-1-hidden-text-6"
+                                  data-rfd-drag-handle-context-id="1"
+                                  data-rfd-drag-handle-draggable-id="2"
+                                  data-rfd-draggable-context-id="1"
+                                  data-rfd-draggable-id="2"
+                                  draggable="false"
+                                  role="button"
+                                  style="position: relative; min-width: 0; display: flex;"
+                                  tabindex="0"
+                                >
+                                  <span
+                                    aria-sort="none"
+                                    class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                    data-testid="mtableheader-sortlabel"
+                                    role="columnheader"
+                                    tabindex="0"
+                                  >
+                                    Online Status
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                      data-testid="arrow_downward"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                  <span
+                                    data-testid="material-table-column-sort-order-indicator"
+                                    style="width: 1em;"
+                                  />
+                                </div>
+                              </th>
+                              <th
+                                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                                scope="col"
+                                style="box-sizing: border-box;"
+                              >
+                                <div
+                                  aria-describedby="rfd-hidden-text-1-hidden-text-6"
+                                  data-rfd-drag-handle-context-id="1"
+                                  data-rfd-drag-handle-draggable-id="3"
+                                  data-rfd-draggable-context-id="1"
+                                  data-rfd-draggable-id="3"
+                                  draggable="false"
+                                  role="button"
+                                  style="position: relative; min-width: 0; display: flex;"
+                                  tabindex="0"
+                                >
+                                  <span
+                                    aria-sort="none"
+                                    class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                    data-testid="mtableheader-sortlabel"
+                                    role="columnheader"
+                                    tabindex="0"
+                                  >
+                                    SCMS Status
+                                    <svg
+                                      aria-hidden="true"
+                                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                      data-testid="arrow_downward"
+                                      focusable="false"
+                                      viewBox="0 0 24 24"
+                                    >
+                                      <path
+                                        d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                      />
+                                    </svg>
+                                  </span>
+                                  <span
+                                    data-testid="material-table-column-sort-order-indicator"
+                                    style="width: 1em;"
+                                  />
+                                </div>
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody
+                            class="MuiTableBody-root css-mocked-MuiTableBody-root"
+                          >
+                            <tr
+                              class="MuiTableRow-root css-mocked-MuiTableRow-root"
+                              style="height: 49px;"
+                            >
+                              <td
+                                class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mocked-MuiTableCell-root"
+                                colspan="4"
+                                style="padding-top: 0px; padding-bottom: 0px; text-align: center;"
+                              >
+                                No records to display
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-mocked-MuiPaper-root"
+          style="position: relative;"
+        >
+          <div
+            class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-mocked-MuiToolbar-root"
+          >
+            
+            <div
+              class="MuiBox-root css-15k1nh5"
+            />
+            <div
+              class="MuiFormControl-root MuiTextField-root css-mocked-MuiFormControl-root-MuiTextField-root"
+            >
+              <div
+                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedStart MuiInputBase-adornedEnd css-mocked-MuiInputBase-root-MuiInput-root"
+              >
+                <div
+                  class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-standard MuiInputAdornment-sizeMedium css-mocked-MuiInputAdornment-root"
+                >
+                  <span
+                    class="notranslate"
+                  >
+                    ​
+                  </span>
+                  <svg
+                    aria-hidden="true"
+                    aria-label="Search"
+                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-mocked-MuiSvgIcon-root"
+                    data-mui-internal-clone-element="true"
+                    data-testid="search"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+                    />
+                  </svg>
+                </div>
+                <input
+                  aria-label="Search"
+                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-mocked-MuiInputBase-input-MuiInput-input"
+                  id="mui-2"
+                  placeholder="Search"
+                  type="text"
+                  value=""
+                />
+                <div
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeMedium css-mocked-MuiInputAdornment-root"
+                >
+                  <button
+                    aria-label="Clear Search"
+                    class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-mocked-MuiButtonBase-root-MuiIconButton-root"
+                    disabled=""
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      aria-label="clear"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-mocked-MuiSvgIcon-root"
+                      data-testid="clear"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="MuiBox-root css-1smue61"
+            >
+              <div>
+                <div
+                  style="display: flex;"
+                >
+                  <span>
+                    <div
+                      style="display: flex;"
+                    />
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="MuiBox-root css-187halg"
+          >
+            <div>
+              <div
+                style="overflow-y: auto;"
+              >
+                <div>
+                  <table
+                    class="MuiTable-root css-mocked-MuiTable-root"
+                    style="table-layout: auto;"
+                  >
+                    <thead
+                      class="MuiTableHead-root css-mocked-MuiTableHead-root"
+                    >
+                      <tr
+                        class="MuiTableRow-root MuiTableRow-head css-mocked-MuiTableRow-root"
+                      >
+                        <th
+                          class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                          scope="col"
+                          style="box-sizing: border-box;"
+                        >
+                          <div
+                            aria-describedby="rfd-hidden-text-2-hidden-text-12"
+                            data-rfd-drag-handle-context-id="2"
+                            data-rfd-drag-handle-draggable-id="0"
+                            data-rfd-draggable-context-id="2"
+                            data-rfd-draggable-id="0"
+                            draggable="false"
+                            role="button"
+                            style="position: relative; min-width: 0; display: flex;"
+                            tabindex="0"
+                          >
+                            <span
+                              aria-sort="none"
+                              class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                              data-testid="mtableheader-sortlabel"
+                              role="columnheader"
+                              tabindex="0"
+                            >
+                              RSU
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                data-testid="arrow_downward"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                />
+                              </svg>
+                            </span>
+                            <span
+                              data-testid="material-table-column-sort-order-indicator"
+                              style="width: 1em;"
+                            />
+                          </div>
+                        </th>
+                        <th
+                          class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                          scope="col"
+                          style="box-sizing: border-box;"
+                        >
+                          <div
+                            aria-describedby="rfd-hidden-text-2-hidden-text-12"
+                            data-rfd-drag-handle-context-id="2"
+                            data-rfd-drag-handle-draggable-id="1"
+                            data-rfd-draggable-context-id="2"
+                            data-rfd-draggable-id="1"
+                            draggable="false"
+                            role="button"
+                            style="position: relative; min-width: 0; display: flex;"
+                            tabindex="0"
+                          >
+                            <span
+                              aria-sort="none"
+                              class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                              data-testid="mtableheader-sortlabel"
+                              role="columnheader"
+                              tabindex="0"
+                            >
+                              Online Status
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                data-testid="arrow_downward"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                />
+                              </svg>
+                            </span>
+                            <span
+                              data-testid="material-table-column-sort-order-indicator"
+                              style="width: 1em;"
+                            />
+                          </div>
+                        </th>
+                        <th
+                          class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                          scope="col"
+                          style="box-sizing: border-box;"
+                        >
+                          <div
+                            aria-describedby="rfd-hidden-text-2-hidden-text-12"
+                            data-rfd-drag-handle-context-id="2"
+                            data-rfd-drag-handle-draggable-id="2"
+                            data-rfd-draggable-context-id="2"
+                            data-rfd-draggable-id="2"
+                            draggable="false"
+                            role="button"
+                            style="position: relative; min-width: 0; display: flex;"
+                            tabindex="0"
+                          >
+                            <span
+                              aria-sort="none"
+                              class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                              data-testid="mtableheader-sortlabel"
+                              role="columnheader"
+                              tabindex="0"
+                            >
+                              SCMS Status
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                data-testid="arrow_downward"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                />
+                              </svg>
+                            </span>
+                            <span
+                              data-testid="material-table-column-sort-order-indicator"
+                              style="width: 1em;"
+                            />
+                          </div>
+                        </th>
+                        <th
+                          class="MuiTableCell-root MuiTableCell-head MuiTableCell-paddingCheckbox MuiTableCell-sizeMedium css-mocked-MuiTableCell-root"
+                          scope="col"
+                          style="text-align: center; width: 48px; box-sizing: border-box;"
+                        >
+                          <span
+                            aria-disabled="true"
+                            class="MuiButtonBase-root Mui-disabled MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                            role="button"
+                            tabindex="-1"
+                          >
+                            Actions
+                          </span>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody
+                      class="MuiTableBody-root css-mocked-MuiTableBody-root"
+                    >
+                      <tr
+                        class="MuiTableRow-root css-mocked-MuiTableRow-root"
+                        style="height: 245px;"
+                      >
+                        <td
+                          class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mocked-MuiTableCell-root"
+                          colspan="4"
+                          style="padding-top: 0px; padding-bottom: 0px; text-align: center;"
+                        >
+                          No records to display
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <table
+            class="MuiTable-root css-mocked-MuiTable-root"
+          >
+            <tfoot
+              class="MuiTableFooter-root css-mocked-MuiTableFooter-root"
+              style="display: grid;"
+            >
+              <tr
+                class="MuiTableRow-root MuiTableRow-footer css-mocked-MuiTableRow-root"
+                style="display: grid;"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-footer MuiTableCell-sizeMedium MuiTablePagination-root css-mocked-MuiTableCell-root-MuiTablePagination-root"
+                  colspan="3"
+                >
+                  <div
+                    class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular MuiTablePagination-toolbar css-mocked-MuiToolbar-root-MuiTablePagination-toolbar"
+                  >
+                    <div
+                      class="MuiTablePagination-spacer css-mocked-MuiTablePagination-spacer"
+                    />
+                    <p
+                      class="MuiTablePagination-selectLabel css-mocked-MuiTablePagination-selectLabel"
+                      id="mui-9"
+                    >
+                      Rows per page:
+                    </p>
+                    <div
+                      class="MuiInputBase-root MuiInputBase-colorPrimary MuiTablePagination-input css-mocked-MuiInputBase-root-MuiTablePagination-select"
+                    >
+                      <div
+                        aria-controls="mui-3"
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        aria-labelledby="mui-9 mui-8"
+                        class="MuiSelect-select MuiTablePagination-select MuiSelect-standard MuiInputBase-input css-mocked-MuiSelect-select-MuiInputBase-input"
+                        id="mui-8"
+                        role="combobox"
+                        tabindex="0"
+                      >
+                        <div
+                          class="MuiBox-root css-c8mw91"
+                        >
+                          5 rows 
+                        </div>
+                      </div>
+                      <input
+                        aria-hidden="true"
+                        class="MuiSelect-nativeInput css-mocked-MuiSelect-nativeInput"
+                        tabindex="-1"
+                        value="5"
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiTablePagination-selectIcon MuiSelect-iconStandard css-mocked-MuiSvgIcon-root-MuiSelect-icon"
+                        data-testid="ArrowDropDownIcon"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </svg>
+                    </div>
+                    <p
+                      class="MuiTablePagination-displayedRows css-mocked-MuiTablePagination-displayedRows"
+                    >
+                      0–0 of 0
+                    </p>
+                    <div
+                      class="MuiBox-root css-15z8oqz"
+                    >
+                      <span
+                        aria-label="First Page"
+                        class=""
+                        data-mui-internal-clone-element="true"
+                      >
+                        <button
+                          aria-label="First Page"
+                          class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge css-mocked-MuiButtonBase-root-MuiIconButton-root"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-mocked-MuiSvgIcon-root"
+                            data-testid="first_page"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M18.41 16.59 13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
+                            />
+                          </svg>
+                        </button>
+                      </span>
+                      <span
+                        aria-label="Previous Page"
+                        class=""
+                        data-mui-internal-clone-element="true"
+                      >
+                        <button
+                          aria-label="Previous Page"
+                          class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-mocked-MuiButtonBase-root-MuiIconButton-root"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-mocked-MuiSvgIcon-root"
+                            data-testid="chevron_left"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+                            />
+                          </svg>
+                        </button>
+                      </span>
+                      <span
+                        class="MuiTypography-root MuiTypography-caption css-mocked-MuiTypography-root"
+                        style="flex: 1; text-align: center; align-self: center; flex-basis: inherit;"
+                      >
+                        0-0 of 0
+                      </span>
+                      <span
+                        aria-label="Next Page"
+                        class=""
+                        data-mui-internal-clone-element="true"
+                      >
+                        <button
+                          aria-label="Next Page"
+                          class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-mocked-MuiButtonBase-root-MuiIconButton-root"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-mocked-MuiSvgIcon-root"
+                            data-testid="chevron_right"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+                            />
+                          </svg>
+                        </button>
+                      </span>
+                      <span
+                        aria-label="Last Page"
+                        class=""
+                        data-mui-internal-clone-element="true"
+                      >
+                        <button
+                          aria-label="Last Page"
+                          class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge css-mocked-MuiButtonBase-root-MuiIconButton-root"
+                          disabled=""
+                          tabindex="-1"
+                          type="button"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-mocked-MuiSvgIcon-root"
+                            data-testid="last_page"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M5.59 7.41 10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
+                            />
+                          </svg>
+                        </button>
+                      </span>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/webapp/src/features/menu/__snapshots__/GenerateRSUErrorsPDF.test.tsx.snap b/webapp/src/features/menu/__snapshots__/GenerateRSUErrorsPDF.test.tsx.snap
new file mode 100644
index 00000000..d2e27c5a
--- /dev/null
+++ b/webapp/src/features/menu/__snapshots__/GenerateRSUErrorsPDF.test.tsx.snap
@@ -0,0 +1,506 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should take a snapshot 1`] = `
+<div>
+  <div
+    class="containerDiv"
+  >
+    <div
+      style="display: flex; justify-content: space-between; margin-bottom: 1rem;"
+    >
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
+        style="color: white;"
+        tabindex="0"
+        type="button"
+      >
+        Print Full Report
+        <span
+          class="MuiTouchRipple-root css-mocked-MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
+        style="color: white;"
+        tabindex="0"
+        type="button"
+      >
+        Print Error Report
+        <span
+          class="MuiTouchRipple-root css-mocked-MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+    <div
+      style="display: none;"
+    >
+      <div
+        style="margin: 50px; font-family: Arial Helvetica Sans-Serif; height: 100vh;"
+      >
+        <h1
+          style="text-align: center; margin-bottom: 10px;"
+        >
+          RSU Summary
+        </h1>
+        <br />
+        <p>
+          Below is the generated RSU summary report for all RSUs at 
+          2024-10-01T00:00:00.000Z
+           UTC:
+        </p>
+        <div
+          style="margin-top: 25px;"
+        >
+          <div
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-mocked-MuiPaper-root"
+            style="position: relative; background-color: white; color: black; font-family: Arial Helvetica Sans-Serif;"
+          >
+            <div
+              class="MuiBox-root css-187halg"
+            >
+              <div>
+                <div
+                  style="overflow-y: auto;"
+                >
+                  <div>
+                    <table
+                      class="MuiTable-root css-mocked-MuiTable-root"
+                      style="table-layout: auto;"
+                    >
+                      <thead
+                        class="MuiTableHead-root css-mocked-MuiTableHead-root"
+                      >
+                        <tr
+                          class="MuiTableRow-root MuiTableRow-head css-mocked-MuiTableRow-root"
+                        >
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                            scope="col"
+                            style="box-sizing: border-box;"
+                          >
+                            <div
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                              data-rfd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-draggable-id="0"
+                              data-rfd-draggable-context-id="0"
+                              data-rfd-draggable-id="0"
+                              draggable="false"
+                              role="button"
+                              style="position: relative; min-width: 0; display: flex;"
+                              tabindex="0"
+                            >
+                              <span
+                                aria-sort="none"
+                                class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                data-testid="mtableheader-sortlabel"
+                                role="columnheader"
+                                tabindex="0"
+                              >
+                                RSU
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                  data-testid="arrow_downward"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                data-testid="material-table-column-sort-order-indicator"
+                                style="width: 1em;"
+                              />
+                            </div>
+                          </th>
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                            scope="col"
+                            style="box-sizing: border-box;"
+                          >
+                            <div
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                              data-rfd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-draggable-id="1"
+                              data-rfd-draggable-context-id="0"
+                              data-rfd-draggable-id="1"
+                              draggable="false"
+                              role="button"
+                              style="position: relative; min-width: 0; display: flex;"
+                              tabindex="0"
+                            >
+                              <span
+                                aria-sort="none"
+                                class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                data-testid="mtableheader-sortlabel"
+                                role="columnheader"
+                                tabindex="0"
+                              >
+                                Road
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                  data-testid="arrow_downward"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                data-testid="material-table-column-sort-order-indicator"
+                                style="width: 1em;"
+                              />
+                            </div>
+                          </th>
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                            scope="col"
+                            style="box-sizing: border-box;"
+                          >
+                            <div
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                              data-rfd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-draggable-id="2"
+                              data-rfd-draggable-context-id="0"
+                              data-rfd-draggable-id="2"
+                              draggable="false"
+                              role="button"
+                              style="position: relative; min-width: 0; display: flex;"
+                              tabindex="0"
+                            >
+                              <span
+                                aria-sort="none"
+                                class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                data-testid="mtableheader-sortlabel"
+                                role="columnheader"
+                                tabindex="0"
+                              >
+                                Online Status
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                  data-testid="arrow_downward"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                data-testid="material-table-column-sort-order-indicator"
+                                style="width: 1em;"
+                              />
+                            </div>
+                          </th>
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                            scope="col"
+                            style="box-sizing: border-box;"
+                          >
+                            <div
+                              aria-describedby="rfd-hidden-text-0-hidden-text-0"
+                              data-rfd-drag-handle-context-id="0"
+                              data-rfd-drag-handle-draggable-id="3"
+                              data-rfd-draggable-context-id="0"
+                              data-rfd-draggable-id="3"
+                              draggable="false"
+                              role="button"
+                              style="position: relative; min-width: 0; display: flex;"
+                              tabindex="0"
+                            >
+                              <span
+                                aria-sort="none"
+                                class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                data-testid="mtableheader-sortlabel"
+                                role="columnheader"
+                                tabindex="0"
+                              >
+                                SCMS Status
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                  data-testid="arrow_downward"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                data-testid="material-table-column-sort-order-indicator"
+                                style="width: 1em;"
+                              />
+                            </div>
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody
+                        class="MuiTableBody-root css-mocked-MuiTableBody-root"
+                      >
+                        <tr
+                          class="MuiTableRow-root css-mocked-MuiTableRow-root"
+                          style="height: 49px;"
+                        >
+                          <td
+                            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mocked-MuiTableCell-root"
+                            colspan="4"
+                            style="padding-top: 0px; padding-bottom: 0px; text-align: center;"
+                          >
+                            No records to display
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style="margin: 50px; font-family: Arial Helvetica Sans-Serif; height: 100vh;"
+      >
+        <h1
+          style="text-align: center; margin-bottom: 10px;"
+        >
+          RSU Error Summary
+        </h1>
+        <br />
+        <p>
+          Below is the generated RSU Error summary report for all RSUs at 
+          2024-10-01T00:00:00.000Z
+           UTC:
+        </p>
+        <div
+          style="margin-top: 25px;"
+        >
+          <div
+            class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-mocked-MuiPaper-root"
+            style="position: relative; background-color: white; color: black; font-family: Arial Helvetica Sans-Serif;"
+          >
+            <div
+              class="MuiBox-root css-187halg"
+            >
+              <div>
+                <div
+                  style="overflow-y: auto;"
+                >
+                  <div>
+                    <table
+                      class="MuiTable-root css-mocked-MuiTable-root"
+                      style="table-layout: auto;"
+                    >
+                      <thead
+                        class="MuiTableHead-root css-mocked-MuiTableHead-root"
+                      >
+                        <tr
+                          class="MuiTableRow-root MuiTableRow-head css-mocked-MuiTableRow-root"
+                        >
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                            scope="col"
+                            style="box-sizing: border-box;"
+                          >
+                            <div
+                              aria-describedby="rfd-hidden-text-1-hidden-text-6"
+                              data-rfd-drag-handle-context-id="1"
+                              data-rfd-drag-handle-draggable-id="0"
+                              data-rfd-draggable-context-id="1"
+                              data-rfd-draggable-id="0"
+                              draggable="false"
+                              role="button"
+                              style="position: relative; min-width: 0; display: flex;"
+                              tabindex="0"
+                            >
+                              <span
+                                aria-sort="none"
+                                class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                data-testid="mtableheader-sortlabel"
+                                role="columnheader"
+                                tabindex="0"
+                              >
+                                RSU
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                  data-testid="arrow_downward"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                data-testid="material-table-column-sort-order-indicator"
+                                style="width: 1em;"
+                              />
+                            </div>
+                          </th>
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                            scope="col"
+                            style="box-sizing: border-box;"
+                          >
+                            <div
+                              aria-describedby="rfd-hidden-text-1-hidden-text-6"
+                              data-rfd-drag-handle-context-id="1"
+                              data-rfd-drag-handle-draggable-id="1"
+                              data-rfd-draggable-context-id="1"
+                              data-rfd-draggable-id="1"
+                              draggable="false"
+                              role="button"
+                              style="position: relative; min-width: 0; display: flex;"
+                              tabindex="0"
+                            >
+                              <span
+                                aria-sort="none"
+                                class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                data-testid="mtableheader-sortlabel"
+                                role="columnheader"
+                                tabindex="0"
+                              >
+                                Road
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                  data-testid="arrow_downward"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                data-testid="material-table-column-sort-order-indicator"
+                                style="width: 1em;"
+                              />
+                            </div>
+                          </th>
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                            scope="col"
+                            style="box-sizing: border-box;"
+                          >
+                            <div
+                              aria-describedby="rfd-hidden-text-1-hidden-text-6"
+                              data-rfd-drag-handle-context-id="1"
+                              data-rfd-drag-handle-draggable-id="2"
+                              data-rfd-draggable-context-id="1"
+                              data-rfd-draggable-id="2"
+                              draggable="false"
+                              role="button"
+                              style="position: relative; min-width: 0; display: flex;"
+                              tabindex="0"
+                            >
+                              <span
+                                aria-sort="none"
+                                class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                data-testid="mtableheader-sortlabel"
+                                role="columnheader"
+                                tabindex="0"
+                              >
+                                Online Status
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                  data-testid="arrow_downward"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                data-testid="material-table-column-sort-order-indicator"
+                                style="width: 1em;"
+                              />
+                            </div>
+                          </th>
+                          <th
+                            class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignLeft MuiTableCell-sizeSmall css-mocked-MuiTableCell-root"
+                            scope="col"
+                            style="box-sizing: border-box;"
+                          >
+                            <div
+                              aria-describedby="rfd-hidden-text-1-hidden-text-6"
+                              data-rfd-drag-handle-context-id="1"
+                              data-rfd-drag-handle-draggable-id="3"
+                              data-rfd-draggable-context-id="1"
+                              data-rfd-draggable-id="3"
+                              draggable="false"
+                              role="button"
+                              style="position: relative; min-width: 0; display: flex;"
+                              tabindex="0"
+                            >
+                              <span
+                                aria-sort="none"
+                                class="MuiButtonBase-root MuiTableSortLabel-root css-mocked-MuiButtonBase-root-MuiTableSortLabel-root"
+                                data-testid="mtableheader-sortlabel"
+                                role="columnheader"
+                                tabindex="0"
+                              >
+                                SCMS Status
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-mocked-MuiSvgIcon-root-MuiTableSortLabel-icon"
+                                  data-testid="arrow_downward"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
+                                >
+                                  <path
+                                    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                data-testid="material-table-column-sort-order-indicator"
+                                style="width: 1em;"
+                              />
+                            </div>
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody
+                        class="MuiTableBody-root css-mocked-MuiTableBody-root"
+                      >
+                        <tr
+                          class="MuiTableRow-root css-mocked-MuiTableRow-root"
+                          style="height: 49px;"
+                        >
+                          <td
+                            class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mocked-MuiTableCell-root"
+                            colspan="4"
+                            style="padding-top: 0px; padding-bottom: 0px; text-align: center;"
+                          >
+                            No records to display
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/webapp/src/features/menu/__snapshots__/Menu.test.tsx.snap b/webapp/src/features/menu/__snapshots__/Menu.test.tsx.snap
index 642c5149..ef07d503 100644
--- a/webapp/src/features/menu/__snapshots__/Menu.test.tsx.snap
+++ b/webapp/src/features/menu/__snapshots__/Menu.test.tsx.snap
@@ -2,14 +2,6 @@
 
 exports[`should take a snapshot 1`] = `
 <div>
-  <div>
-    <div>
-      <button
-        id="toggle"
-      >
-        Display Counts
-      </button>
-    </div>
-  </div>
+  <div />
 </div>
 `;
diff --git a/webapp/src/features/menu/menuSlice.test.ts b/webapp/src/features/menu/menuSlice.test.ts
index ae15d55e..cf8d9a65 100644
--- a/webapp/src/features/menu/menuSlice.test.ts
+++ b/webapp/src/features/menu/menuSlice.test.ts
@@ -28,6 +28,7 @@ describe('menu reducer', () => {
         currentSort: null,
         sortedCountList: [],
         displayCounts: false,
+        displayRsuErrors: false,
         view: 'buttons',
       },
     })
@@ -41,6 +42,7 @@ describe('reducers', () => {
       currentSort: null,
       sortedCountList: null,
       displayCounts: false,
+      displayRsuErrors: false,
       view: null,
     },
   }
@@ -63,13 +65,13 @@ describe('reducers', () => {
 
   it('setDisplay reducer updates state correctly', async () => {
     let view = 'tab'
-    expect(reducer(initialState, setDisplay(view))).toEqual({
+    expect(reducer(initialState, setDisplay({ view: 'tab', display: 'displayCounts' }))).toEqual({
       ...initialState,
       value: { ...initialState.value, view, displayCounts: true },
     })
 
     view = 'not tab'
-    expect(reducer(initialState, setDisplay(view))).toEqual({
+    expect(reducer(initialState, setDisplay({ view: 'not tab', display: 'somethingElse' }))).toEqual({
       ...initialState,
       value: { ...initialState.value, view, displayCounts: false },
     })
diff --git a/webapp/src/features/menu/menuSlice.tsx b/webapp/src/features/menu/menuSlice.tsx
index 6cd744a9..45bb854d 100644
--- a/webapp/src/features/menu/menuSlice.tsx
+++ b/webapp/src/features/menu/menuSlice.tsx
@@ -8,6 +8,7 @@ const initialState = {
   currentSort: null as null | string,
   sortedCountList: [] as CountsListElement[],
   displayCounts: false,
+  displayRsuErrors: false,
   view: 'buttons',
 }
 
@@ -74,8 +75,9 @@ export const menuSlice = createSlice({
       state.value.sortedCountList = action.payload
     },
     setDisplay: (state, action) => {
-      state.value.view = action.payload
-      state.value.displayCounts = action.payload == 'tab'
+      state.value.view = action.payload.view
+      state.value.displayCounts = action.payload.display == 'displayCounts'
+      state.value.displayRsuErrors = action.payload.display == 'displayRsuErrors'
     },
   },
 })
@@ -86,6 +88,7 @@ export const selectLoading = (state: RootState) => state.menu.loading
 export const selectCurrentSort = (state: RootState) => state.menu.value.currentSort
 export const selectSortedCountList = (state: RootState) => state.menu.value.sortedCountList
 export const selectDisplayCounts = (state: RootState) => state.menu.value.displayCounts
+export const selectDisplayRsuErrors = (state: RootState) => state.menu.value.displayRsuErrors
 export const selectView = (state: RootState) => state.menu.value.view
 
 export default menuSlice.reducer
diff --git a/webapp/src/pages/Map.test.tsx b/webapp/src/pages/Map.test.tsx
index bc80d068..ab2f7a3f 100644
--- a/webapp/src/pages/Map.test.tsx
+++ b/webapp/src/pages/Map.test.tsx
@@ -54,6 +54,8 @@ it('snapshot bsmCoordinates wzdx', () => {
     </Provider>
   )
 
+  fireEvent.click(screen.queryByText('Display Menu'))
+
   fireEvent.click(screen.queryByText('RSU Viewer'))
   fireEvent.click(screen.queryByText('Heatmap'))
   fireEvent.click(screen.queryByText('V2X Msg Viewer'))
diff --git a/webapp/src/pages/Map.tsx b/webapp/src/pages/Map.tsx
index 0b470281..1407319d 100644
--- a/webapp/src/pages/Map.tsx
+++ b/webapp/src/pages/Map.tsx
@@ -74,6 +74,12 @@ import {
   ThemeProvider,
   StyledEngineProvider,
   Tooltip,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Divider,
 } from '@mui/material'
 
 import 'rc-slider/assets/index.css'
@@ -89,6 +95,8 @@ import {
   setSelectedIntersectionId,
 } from '../generalSlices/intersectionSlice'
 import { mapTheme } from '../styles'
+import { selectViewState, setMapViewState } from './mapSlice'
+import { setDisplay } from '../features/menu/menuSlice'
 
 // @ts-ignore: workerClass does not exist in typed mapboxgl
 // eslint-disable-next-line import/no-webpack-loader-syntax
@@ -134,12 +142,17 @@ function MapPage(props: MapPageProps) {
   const selectedIntersection = useSelector(selectSelectedIntersection)
 
   // Mapbox local state variables
-  const [viewState, setViewState] = useState(EnvironmentVars.getMapboxInitViewState())
+
+  const viewState = useSelector(selectViewState)
 
   // RSU layer local state variables
   const [selectedRsuCount, setSelectedRsuCount] = useState(null)
   const [displayType, setDisplayType] = useState('')
 
+  // Menu local state variable
+  const [displayMenu, setDisplayMenu] = useState(false)
+  const [menuSelection, setMenuSelection] = useState([])
+
   const [configPolygonSource, setConfigPolygonSource] = useState<GeoJSON.Feature<GeoJSON.Geometry>>({
     type: 'Feature',
     geometry: {
@@ -586,22 +599,21 @@ function MapPage(props: MapPageProps) {
     }
 
     return (
-      <div className="legend">
-        <h1 className="legend-header">Map Layers</h1>
+      <List>
         {layers.map((layer: { id?: string; label: string }) => (
-          <div key={layer.id} className="legend-item">
-            <label className="legend-label">
-              <input
-                className="legend-input"
-                type="checkbox"
-                checked={activeLayers.includes(layer.id)}
-                onChange={() => toggleLayer(layer.id)}
-              />
-              {layer.label}
-            </label>
-          </div>
+          <ListItem key={layer.id} disablePadding>
+            <ListItemButton
+              style={{
+                backgroundColor: activeLayers.includes(layer.id) ? '#1c1c1c' : '#3d3d3d',
+                borderBottom: activeLayers.includes(layer.id) ? '1px solid black' : 'none',
+              }}
+              onClick={() => toggleLayer(layer.id)}
+            >
+              <ListItemText primary={layer.label} />
+            </ListItemButton>
+          </ListItem>
         ))}
-      </div>
+      </List>
     )
   }
 
@@ -652,97 +664,101 @@ function MapPage(props: MapPageProps) {
     return { value: type, label: type }
   })
 
+  const handleMenuSelection = (label: string) => {
+    if (menuSelection.includes(label)) {
+      setMenuSelection(menuSelection.filter((item) => item !== label))
+      switch (label) {
+        case 'Display Message Counts':
+          dispatch(setDisplay({ view: 'tab', display: '' }))
+          break
+        case 'Display RSU Status':
+          dispatch(setDisplay({ view: 'tab', display: '' }))
+          break
+      }
+    } else {
+      setMenuSelection([...menuSelection, label])
+      switch (label) {
+        case 'Display Message Counts':
+          dispatch(setDisplay({ view: 'tab', display: 'displayCounts' }))
+          break
+        case 'Display RSU Status':
+          dispatch(setDisplay({ view: 'tab', display: 'displayRsuErrors' }))
+          break
+      }
+    }
+  }
+
   return (
     <div className="container">
-      <Grid container className="legend-grid" direction="row">
-        <Legend />
-        {activeLayers.includes('rsu-layer') && (
-          <div className="rsu-status-div">
-            <h1 className="legend-header">RSU Status</h1>
-            <label className="rsu-status-label">
-              <input
-                className="rsu-status-input"
-                type="radio"
-                name="none-status-radio"
-                value="none"
-                checked={displayType === ''}
-                onChange={handleRsuDisplayTypeChange}
-              />
-              None
-            </label>
-
-            <label className="rsu-status-label">
-              <input
-                className="rsu-status-input"
-                type="radio"
-                name="online-status-radio"
-                value="online"
-                checked={displayType === 'online'}
-                onChange={handleRsuDisplayTypeChange}
-              />
-              Online Status
-            </label>
-
-            <label className="rsu-status-label">
-              <input
-                className="rsu-status-input"
-                type="radio"
-                name="scms-status-radio"
-                value="scms"
-                checked={displayType === 'scms'}
-                onChange={handleRsuDisplayTypeChange}
-              />
-              SCMS Status
-            </label>
-            {SecureStorageManager.getUserRole() === 'admin' && (
-              <>
-                <h1 className="legend-header">RSU Configuration</h1>
-                <StyledEngineProvider injectFirst>
-                  <ThemeProvider theme={mapTheme}>
-                    <FormGroup row className="form-group-row">
-                      <FormControlLabel
-                        control={<Switch checked={addConfigPoint} />}
-                        label={'Add Points'}
-                        onChange={(e) => handleButtonToggle(e, 'config')}
-                      />
-                      {configCoordinates.length > 0 && (
-                        <Tooltip title="Clear Points">
-                          <IconButton
-                            onClick={() => {
-                              dispatch(clearConfig())
-                            }}
-                            size="large"
-                          >
-                            <ClearIcon />
-                          </IconButton>
-                        </Tooltip>
-                      )}
-                    </FormGroup>
-                    <FormGroup row>
-                      <Button
-                        variant="contained"
-                        className="contained-button"
-                        sx={{ backgroundColor: '#B55e12' }}
-                        disabled={!(configCoordinates.length > 2 && addConfigPoint)}
-                        onClick={() => {
-                          dispatch(geoRsuQuery(selectedVendor))
-                        }}
-                      >
-                        Configure RSUs
-                      </Button>
-                    </FormGroup>
-                  </ThemeProvider>
-                </StyledEngineProvider>
-              </>
-            )}
-          </div>
-        )}
-        {activeLayers.includes('rsu-layer') ? (
-          <div className="vendor-filter-div">
-            <h2>Filter RSUs</h2>
-            <h4>Vendor</h4>
+      <Button id="display-menu-toggle" onClick={() => setDisplayMenu(!displayMenu)}>
+        Display Menu
+      </Button>
+      <Drawer
+        open={displayMenu}
+        sx={{
+          height: props.auth ? 'calc(100vh - 136px)' : 'calc(100vh - 100px)',
+          width: 'fit-content',
+          padding: '20px',
+        }}
+        onClose={() => setDisplayMenu(false)}
+      >
+        <List>
+          <ListItem disablePadding>
+            <ListItemButton
+              sx={{ justifyContent: 'flex-end', fontFamily: 'Roboto, Helvetica, Arial, sans-serif' }}
+              onClick={() => setDisplayMenu(false)}
+            >
+              X
+            </ListItemButton>
+          </ListItem>
+          <Divider />
+          <ListItem>
+            <ListItemText sx={{ fontWeight: '600' }} primary="Map Layers" />
+          </ListItem>
+          <Legend />
+          <Divider />
+          {SecureStorageManager.getUserRole() === 'admin' && (
+            <ListItem disablePadding>
+              <ListItemButton
+                sx={{
+                  backgroundColor: menuSelection.includes('Configure RSUs') ? '#3d3d3d' : '#333333',
+                  borderBottom: menuSelection.includes('Configure RSUs') ? '1px solid black' : 'none',
+                }}
+                onClick={() => handleMenuSelection('Configure RSUs')}
+              >
+                <ListItemText primary="Configure RSUs" />
+              </ListItemButton>
+            </ListItem>
+          )}
+          <Divider />
+          <ListItem disablePadding>
+            <ListItemButton
+              sx={{
+                backgroundColor: menuSelection.includes('Display Message Counts') ? '#3d3d3d' : '#333333',
+                borderBottom: menuSelection.includes('Display Message Counts') ? '1px solid black' : 'none',
+              }}
+              onClick={() => handleMenuSelection('Display Message Counts')}
+            >
+              <ListItemText primary="Display Message Counts" />
+            </ListItemButton>
+          </ListItem>
+          <Divider />
+          <ListItem disablePadding>
+            <ListItemButton
+              sx={{
+                backgroundColor: menuSelection.includes('Display RSU Status') ? '#3d3d3d' : '#333333',
+                borderBottom: menuSelection.includes('Display RSU Status') ? '1px solid black' : 'none',
+              }}
+              onClick={() => handleMenuSelection('Display RSU Status')}
+            >
+              <ListItemText primary="Display RSU Status" />
+            </ListItemButton>
+          </ListItem>
+          <ListItem>
+            <ListItemText sx={{ fontWeight: '600' }} primary="Filter RSUs" />
+          </ListItem>
+          <ListItem sx={{ backgroundColor: '#3d3d3d' }}>
             <DropdownList
-              className="form-dropdown"
               dataKey="id"
               textField="name"
               data={vendorArray}
@@ -750,10 +766,53 @@ function MapPage(props: MapPageProps) {
               onChange={(value) => {
                 setVendor(value)
               }}
+              style={{ width: '100%' }}
             />
-          </div>
-        ) : null}
-      </Grid>
+          </ListItem>
+          <Divider />
+        </List>
+      </Drawer>
+      {SecureStorageManager.getUserRole() === 'admin' && menuSelection.includes('Configure RSUs') && (
+        <div className="rsu-status-div">
+          <h1 className="legend-header">RSU Configuration</h1>
+          <StyledEngineProvider injectFirst>
+            <ThemeProvider theme={mapTheme}>
+              <FormGroup row className="form-group-row">
+                <FormControlLabel
+                  control={<Switch checked={addConfigPoint} />}
+                  label={'Add Points'}
+                  onChange={(e) => handleButtonToggle(e, 'config')}
+                />
+                {configCoordinates.length > 0 && (
+                  <Tooltip title="Clear Points">
+                    <IconButton
+                      onClick={() => {
+                        dispatch(clearConfig())
+                      }}
+                      size="large"
+                    >
+                      <ClearIcon />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </FormGroup>
+              <FormGroup row>
+                <Button
+                  variant="contained"
+                  className="contained-button"
+                  sx={{ backgroundColor: '#B55e12' }}
+                  disabled={!(configCoordinates.length > 2 && addConfigPoint)}
+                  onClick={() => {
+                    dispatch(geoRsuQuery(selectedVendor))
+                  }}
+                >
+                  Configure RSUs
+                </Button>
+              </FormGroup>
+            </ThemeProvider>
+          </StyledEngineProvider>
+        </div>
+      )}
       <Container
         fluid={true}
         style={{ width: '100%', height: props.auth ? 'calc(100vh - 136px)' : 'calc(100vh - 100px)', display: 'flex' }}
@@ -763,7 +822,7 @@ function MapPage(props: MapPageProps) {
           mapboxAccessToken={EnvironmentVars.MAPBOX_TOKEN}
           mapStyle={mbStyle as mapboxgl.Style}
           style={{ width: '100%', height: '100%' }}
-          onMove={(evt) => setViewState(evt.viewState)}
+          onMove={(evt) => dispatch(setMapViewState(evt.viewState))}
           onClick={(e) => {
             if (addGeoMsgPoint) {
               addGeoMsgPointToCoordinates(e.lngLat)
@@ -1019,7 +1078,7 @@ function MapPage(props: MapPageProps) {
             </div>
           </div>
         ) : (
-          <div className="control">
+          <div className={menuSelection.includes('Configure RSUs') ? 'expandedControl' : 'control'}>
             <div className="buttonContainer">
               <button
                 className={addGeoMsgPoint ? 'selected' : 'button'}
diff --git a/webapp/src/pages/__snapshots__/Map.test.tsx.snap b/webapp/src/pages/__snapshots__/Map.test.tsx.snap
index e7cbb6cc..dbcbdb13 100644
--- a/webapp/src/pages/__snapshots__/Map.test.tsx.snap
+++ b/webapp/src/pages/__snapshots__/Map.test.tsx.snap
@@ -1,91 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`snapshot bsmCoordinates wzdx 1`] = `
-<div>
+<div
+  aria-hidden="true"
+>
   <div
     class="container"
   >
-    <div
-      class="MuiGrid-root MuiGrid-container legend-grid css-mocked-MuiGrid-root"
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
+      id="display-menu-toggle"
+      tabindex="0"
+      type="button"
     >
-      <div
-        class="legend"
-      >
-        <h1
-          class="legend-header"
-        >
-          Map Layers
-        </h1>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              class="legend-input"
-              type="checkbox"
-            />
-            RSU Viewer
-          </label>
-        </div>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              checked=""
-              class="legend-input"
-              type="checkbox"
-            />
-            Heatmap
-          </label>
-        </div>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              checked=""
-              class="legend-input"
-              type="checkbox"
-            />
-            V2X Msg Viewer
-          </label>
-        </div>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              checked=""
-              class="legend-input"
-              type="checkbox"
-            />
-            WZDx Viewer
-          </label>
-        </div>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              class="legend-input"
-              type="checkbox"
-            />
-            Intersections
-          </label>
-        </div>
-      </div>
-    </div>
+      Display Menu
+      <span
+        class="MuiTouchRipple-root css-mocked-MuiTouchRipple-root"
+      />
+    </button>
     <div
       class="container-fluid"
       style="width: 100%; height: calc(100vh - 100px); display: flex;"
@@ -338,196 +270,17 @@ exports[`snapshot bsmData clicked 1`] = `
   <div
     class="container"
   >
-    <div
-      class="MuiGrid-root MuiGrid-container legend-grid css-mocked-MuiGrid-root"
+    <button
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-mocked-MuiButtonBase-root-MuiButton-root"
+      id="display-menu-toggle"
+      tabindex="0"
+      type="button"
     >
-      <div
-        class="legend"
-      >
-        <h1
-          class="legend-header"
-        >
-          Map Layers
-        </h1>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              checked=""
-              class="legend-input"
-              type="checkbox"
-            />
-            RSU Viewer
-          </label>
-        </div>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              class="legend-input"
-              type="checkbox"
-            />
-            Heatmap
-          </label>
-        </div>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              class="legend-input"
-              type="checkbox"
-            />
-            V2X Msg Viewer
-          </label>
-        </div>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              class="legend-input"
-              type="checkbox"
-            />
-            WZDx Viewer
-          </label>
-        </div>
-        <div
-          class="legend-item"
-        >
-          <label
-            class="legend-label"
-          >
-            <input
-              class="legend-input"
-              type="checkbox"
-            />
-            Intersections
-          </label>
-        </div>
-      </div>
-      <div
-        class="rsu-status-div"
-      >
-        <h1
-          class="legend-header"
-        >
-          RSU Status
-        </h1>
-        <label
-          class="rsu-status-label"
-        >
-          <input
-            checked=""
-            class="rsu-status-input"
-            name="none-status-radio"
-            type="radio"
-            value="none"
-          />
-          None
-        </label>
-        <label
-          class="rsu-status-label"
-        >
-          <input
-            class="rsu-status-input"
-            name="online-status-radio"
-            type="radio"
-            value="online"
-          />
-          Online Status
-        </label>
-        <label
-          class="rsu-status-label"
-        >
-          <input
-            class="rsu-status-input"
-            name="scms-status-radio"
-            type="radio"
-            value="scms"
-          />
-          SCMS Status
-        </label>
-      </div>
-      <div
-        class="vendor-filter-div"
-      >
-        <h2>
-          Filter RSUs
-        </h2>
-        <h4>
-          Vendor
-        </h4>
-        <div
-          aria-autocomplete="list"
-          aria-busy="false"
-          aria-controls="rw_5_listbox"
-          aria-disabled="false"
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-owns="rw_5_listbox"
-          aria-readonly="false"
-          class="form-dropdown rw-dropdown-list rw-widget"
-          data-intent="mouse"
-          id="rw_4_input"
-          role="combobox"
-          tabindex="-1"
-        >
-          <div
-            class="rw-widget-input rw-widget-picker rw-widget-container"
-            tabindex="-1"
-          >
-            <div
-              class="rw-dropdown-list-input"
-            >
-              <input
-                aria-hidden="true"
-                class="rw-detect-autofill rw-sr"
-                tabindex="-1"
-                value="Select Vendor"
-              />
-              <input
-                autocomplete="off"
-                class="rw-dropdownlist-search"
-                size="2"
-                value=""
-              />
-              <span
-                class="rw-dropdown-list-value"
-              >
-                Select Vendor
-              </span>
-            </div>
-            <span
-              aria-hidden="true"
-              class="rw-btn rw-picker-caret"
-            >
-              <svg
-                aria-hidden="true"
-                fill="currentcolor"
-                height="1em"
-                viewBox="0 0 320 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+      Display Menu
+      <span
+        class="MuiTouchRipple-root css-mocked-MuiTouchRipple-root"
+      />
+    </button>
     <div
       class="container-fluid"
       style="width: 100%; height: calc(100vh - 100px); display: flex;"
diff --git a/webapp/src/pages/css/Map.css b/webapp/src/pages/css/Map.css
index f763176c..1f8abce7 100644
--- a/webapp/src/pages/css/Map.css
+++ b/webapp/src/pages/css/Map.css
@@ -51,6 +51,10 @@
   background: #0e2052;
   border-radius: 15px;
   margin-top: 10px;
+  position: absolute;
+  top: 190px;
+  left: 10px;
+  padding: 10px;
 }
 
 .vendor-filter-div {
@@ -138,3 +142,22 @@
   top: 0;
   right: 4px;
 }
+
+#display-menu-toggle {
+  height: 35px;
+  border: none;
+  padding: 1px 12px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 30px;
+  margin-left: 100px;
+  position: absolute;
+  z-index: 100;
+  left: -90px;
+  top: 150px;
+  background-color: #b55e12;
+  color: white;
+}
diff --git a/webapp/src/pages/css/MsgMap.css b/webapp/src/pages/css/MsgMap.css
index 073131f7..e2098fe6 100644
--- a/webapp/src/pages/css/MsgMap.css
+++ b/webapp/src/pages/css/MsgMap.css
@@ -6,7 +6,19 @@
   position: absolute;
   z-index: 90;
   left: 10px;
-  top: 390px;
+  top: 210px;
+  border-radius: 10px;
+}
+
+.expandedControl {
+  background: white;
+  height: fit-content;
+  width: 250px;
+  padding: 10px;
+  position: absolute;
+  z-index: 90;
+  left: 10px;
+  top: 350px;
   border-radius: 10px;
 }
 
diff --git a/webapp/src/pages/mapSlice.test.tsx b/webapp/src/pages/mapSlice.test.tsx
new file mode 100644
index 00000000..5a7ad516
--- /dev/null
+++ b/webapp/src/pages/mapSlice.test.tsx
@@ -0,0 +1,58 @@
+import reducer, { selectViewState } from './mapSlice'
+import { RootState } from '../store'
+
+jest.mock('../EnvironmentVars', () => ({
+  getMapboxInitViewState: jest.fn(() => ({
+    latitude: 0,
+    longitude: 0,
+    zoom: 0,
+  })),
+}))
+
+const initialState: RootState['map'] = {
+  mapViewState: {
+    latitude: 0,
+    longitude: 0,
+    zoom: 0,
+  },
+}
+
+describe('mapSlice reducer', () => {
+  it('should handle initial state', () => {
+    expect(reducer(undefined, { type: 'unknown' })).toEqual(initialState)
+  })
+})
+
+describe('setMapViewState', () => {
+  it('should set the mapViewState', () => {
+    const previousState = {
+      mapViewState: {
+        latitude: 0,
+        longitude: 0,
+        zoom: 0,
+      },
+    }
+    const action = {
+      type: 'map/setMapViewState',
+      payload: {
+        latitude: 1,
+        longitude: 1,
+        zoom: 1,
+      },
+    }
+    const newState = reducer(previousState, action)
+    expect(newState).toEqual({
+      mapViewState: {
+        latitude: 1,
+        longitude: 1,
+        zoom: 1,
+      },
+    })
+  })
+})
+
+const mapState = { map: initialState } as any
+
+it('selectors return the correct value', async () => {
+  expect(selectViewState({ ...mapState })).toEqual(initialState.mapViewState)
+})
diff --git a/webapp/src/pages/mapSlice.tsx b/webapp/src/pages/mapSlice.tsx
new file mode 100644
index 00000000..21fd48a5
--- /dev/null
+++ b/webapp/src/pages/mapSlice.tsx
@@ -0,0 +1,25 @@
+import { createSlice } from '@reduxjs/toolkit'
+import EnvironmentVars from '../EnvironmentVars'
+import { RootState } from '../store'
+
+const initialState = EnvironmentVars.getMapboxInitViewState()
+
+export const mapSlice = createSlice({
+  name: 'map',
+  initialState: {
+    mapViewState: {
+      ...initialState,
+    },
+  },
+  reducers: {
+    setMapViewState: (state, action) => {
+      state.mapViewState = action.payload
+    },
+  },
+})
+
+export const { setMapViewState } = mapSlice.actions
+
+export const selectViewState = (state: RootState) => state.map.mapViewState
+
+export default mapSlice.reducer
diff --git a/webapp/src/store.tsx b/webapp/src/store.tsx
index 4bfd8f59..703f8016 100644
--- a/webapp/src/store.tsx
+++ b/webapp/src/store.tsx
@@ -22,6 +22,7 @@ import menuReducer from './features/menu/menuSlice'
 import intersectionMapReducer from './features/intersections/map/map-slice'
 import intersectionMapLayerStyleReducer from './features/intersections/map/map-layer-style-slice'
 import dataSelectorReducer from './features/intersections/data-selector/dataSelectorSlice'
+import mapSliceReducer from './pages/mapSlice'
 
 export const setupStore = (preloadedState: any) => {
   return configureStore({
@@ -49,6 +50,7 @@ export const setupStore = (preloadedState: any) => {
       intersectionMap: intersectionMapReducer,
       intersectionMapLayerStyle: intersectionMapLayerStyleReducer,
       dataSelector: dataSelectorReducer,
+      map: mapSliceReducer,
     },
     preloadedState,
     middleware: (getDefaultMiddleware) =>
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 2a3a024d..b1363f5f 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -7782,6 +7782,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@^2.1.2, fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1, function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -12330,6 +12335,11 @@ react-test-renderer@^17.0.2:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
+react-to-print@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/react-to-print/-/react-to-print-3.0.1.tgz"
+  integrity sha512-WcGiim2VWiHW7TR0PB9Xqv/SOOtnDJbjhlSOeMB1N+lxyFLuoQ8GIoNAw/ci7+sCkbXreEKmiy1ZWgd87v7U2Q==
+
 react-transition-group@^4.3.0, react-transition-group@^4.4.0, react-transition-group@^4.4.2, react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
@@ -12356,7 +12366,7 @@ react-widgets@5.8.4:
     tiny-warning "^1.0.3"
     uncontrollable "^7.2.1"
 
-react@*, "react@^16.0.0 || ^17.0.0", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.8.3 || ^17.0.0-0 || ^18.0.0", "react@^16.8.5 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", react@^17.0.0, "react@^17.0.0 || ^18.0.0", react@^17.0.2, "react@^17.0.2 || ^18.0.0", react@<18.0.0, "react@>= 0.14.7", "react@>= 16", "react@>= 16.8.0", react@>=0.14.0, react@>=0.16.0, react@>=15.0.0, react@>=16, react@>=16.0.0, react@>=16.14.0, react@>=16.3.0, react@>=16.3.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=16.9.0, react@17.0.2:
+react@*, "react@^16.0.0 || ^17.0.0", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ~19", "react@^16.8.0 || ^17.0.0-0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0", "react@^16.8.3 || ^17.0.0-0 || ^18.0.0", "react@^16.8.5 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", react@^17.0.0, "react@^17.0.0 || ^18.0.0", react@^17.0.2, "react@^17.0.2 || ^18.0.0", react@<18.0.0, "react@>= 0.14.7", "react@>= 16", "react@>= 16.8.0", react@>=0.14.0, react@>=0.16.0, react@>=15.0.0, react@>=16, react@>=16.0.0, react@>=16.14.0, react@>=16.3.0, react@>=16.3.3, react@>=16.6.0, react@>=16.8, react@>=16.8.0, react@>=16.9.0, react@17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==