diff --git a/src/components/Firealerts/Form/EventConfigs.ts b/src/components/Firealerts/Form/EventConfigs.ts
new file mode 100644
index 000000000..c5355cc16
--- /dev/null
+++ b/src/components/Firealerts/Form/EventConfigs.ts
@@ -0,0 +1,224 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const crashlyticsIssueDefault = {
+  appVersion: '1 (1.0.0)',
+  id: '1',
+  title: 'TestApp.main',
+  subtitle: 'Runtime Error',
+};
+
+const crashlyticsFatalIssueDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.CrashlyticsNewFatalIssuePayload',
+  issue: crashlyticsIssueDefault,
+};
+
+const crashlyticsNonFatalIssueDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.CrashlyticsNewNonfatalIssuePayload',
+  issue: crashlyticsIssueDefault,
+};
+
+const crashlyticsRegressionDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.CrashlyticsRegressionAlertPayload',
+  type: 'fatal',
+  issue: crashlyticsIssueDefault,
+  resolveTime: new Date().toISOString(),
+};
+
+const trendingIssueDetailsDefault = {
+  type: 'fatal',
+  issue: crashlyticsIssueDefault,
+  eventCount: 100,
+  userCount: 100,
+};
+
+const crashlyticsVelocityDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.CrashlyticsVelocityAlertPayload',
+  issue: crashlyticsIssueDefault,
+  createTime: new Date().toISOString(),
+  crashCount: 100,
+  crashPercentage: 80,
+  firstVersion: '1 (1.0.0)',
+};
+
+const crashlyticsStabilityDigestDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.CrashlyticsStabilityDigestPayload',
+  digestDate: new Date().toISOString(),
+  trendingIssues: [trendingIssueDetailsDefault],
+};
+
+const crashlyticsNewAnrIssueDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.CrashlyticsNewAnrIssuePayload',
+  issue: crashlyticsIssueDefault,
+};
+
+const billingPlanUpdateDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.BillingPlanUpdatePayload',
+  billingPlan: 'defaultBillingPlan',
+  principalEmail: 'username@gmail.com',
+  notificationType: 'downgrade',
+};
+
+const billingPlanAutomatedUpdateDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.BillingPlanAutomatedUpdatePayload',
+  billingPlan: 'defaultBillingPlan',
+  notificationType: 'downgrade',
+};
+
+const appDistributionNewTesterIosDeviceDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.AppDistroNewTesterIosDevicePayload',
+  testerName: 'Test User',
+  testerEmail: 'username@gmail.com',
+  testerDeviceModelName: 'Google Pixel 10',
+  testerDeviceIdentifier: '12345',
+};
+const appDistributionInAppFeedbackDefault: { [key: string]: any } = {
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.AppDistroInAppFeedbackPayload',
+  feedbackReport: '',
+  feedbackConsoleUri: '',
+  testerName: 'Test User',
+  testerEmail: 'username@gmail.com',
+  appVersion: '1 (1.0.0)',
+  text: '',
+  screenshotUri: '',
+};
+
+const performanceThresholdDefault: { [key: string]: any } = {
+  metricType: 'duration',
+  appVersion: '1 (1.0.0)',
+  violationValue: 0.205629,
+  thresholdUnit: 'seconds',
+  violationUnit: 'seconds',
+  '@type':
+    'type.googleapis.com/google.events.firebase.firebasealerts.v1.FireperfThresholdAlertPayload',
+  numSamples: '200',
+  eventName: 'custom-trace',
+  thresholdValue: 0.15,
+  eventType: 'duration_trace',
+  conditionPercentile: 90,
+  investigateUri: '',
+};
+
+export const generateCloudEventWithData = (alerttype: string, data: any) => {
+  const projectId = '1234567890';
+  return {
+    alerttype: alerttype,
+    id: Math.random().toString().slice(2),
+    source: `//firebasealerts.googleapis.com/projects/${projectId}`,
+    specVersion: '1.0',
+    appid: `1:${projectId}:web:${crypto
+      .getRandomValues(new Uint8Array(16))
+      .reduce((acc, byte) => acc + `${byte.toString(16)}`, '')}`,
+    time: new Date().toISOString(),
+    type: 'google.firebase.firebasealerts.alerts.v1.published',
+    project: projectId,
+    data: {
+      '@type':
+        'type.googleapis.com/google.events.firebase.firebasealerts.v1.AlertData',
+      createTime: new Date().toISOString(),
+      endTime: new Date().toISOString(),
+      payload: data,
+    },
+  };
+};
+
+export type FirealertsType =
+  | 'crashlytics.newFatalIssue'
+  | 'crashlytics.newNonfatalIssue'
+  | 'crashlytics.regression'
+  | 'crashlytics.stabilityDigest'
+  | 'crashlytics.velocity'
+  | 'crashlytics.newAnrIssue'
+  | 'billing.planUpdate'
+  | 'billing.planAutomatedUpdate'
+  | 'appDistribution.newTesterIosDevice'
+  | 'appDistribution.inAppFeedback'
+  | 'performance.threshold';
+
+export type AlertConfig = {
+  [key in FirealertsType]: {
+    name: string;
+    default: { [key: string]: any };
+    link: string;
+  };
+};
+export const alertConfiguration: AlertConfig = {
+  'crashlytics.newFatalIssue': {
+    name: 'Crashlytics: New Fatal Issue',
+    default: crashlyticsFatalIssueDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.crashlytics.newfatalissuepayload',
+  },
+  'crashlytics.newNonfatalIssue': {
+    name: 'Crashlytics: New Non-Fatal Issue',
+    default: crashlyticsNonFatalIssueDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.crashlytics.newnonfatalissuepayload',
+  },
+  'crashlytics.regression': {
+    name: 'Crashlytics: Regression',
+    default: crashlyticsRegressionDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.crashlytics.regressionalertpayload',
+  },
+  'crashlytics.stabilityDigest': {
+    name: 'Crashlytics: Stablity Digest',
+    default: crashlyticsStabilityDigestDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.crashlytics.stabilitydigestpayload',
+  },
+  'crashlytics.velocity': {
+    name: 'Crashlytics: Velocity',
+    default: crashlyticsVelocityDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.crashlytics.velocityalertpayload',
+  },
+  'crashlytics.newAnrIssue': {
+    name: 'Crahslytics: New ANR Issue',
+    default: crashlyticsNewAnrIssueDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.crashlytics.newanrissuepayload',
+  },
+  'billing.planUpdate': {
+    name: 'Billing: Plan Update',
+    default: billingPlanUpdateDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.billing.planupdatepayload',
+  },
+  'billing.planAutomatedUpdate': {
+    name: 'Billing: Plan Automated Update',
+    default: billingPlanAutomatedUpdateDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.billing.planautomatedupdatepayload',
+  },
+  'appDistribution.newTesterIosDevice': {
+    name: 'App Distribution: New Tester IOS Device',
+    default: appDistributionNewTesterIosDeviceDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.appdistribution.newtesterdevicepayload',
+  },
+  'appDistribution.inAppFeedback': {
+    name: 'App Distribution: In App Feedback',
+    default: appDistributionInAppFeedbackDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.appdistribution.inappfeedbackpayload',
+  },
+  'performance.threshold': {
+    name: 'Performance Threshold',
+    default: performanceThresholdDefault,
+    link: 'https://firebase.google.com/docs/reference/functions/2nd-gen/node/firebase-functions.alerts.performance.thresholdalertpayload',
+  },
+};
diff --git a/src/components/Firealerts/Form/FirealertsForm.module.scss b/src/components/Firealerts/Form/FirealertsForm.module.scss
new file mode 100644
index 000000000..8132b9d9f
--- /dev/null
+++ b/src/components/Firealerts/Form/FirealertsForm.module.scss
@@ -0,0 +1,53 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+  padding: 20px;
+}
+
+.eventForm {
+  background-color: #f5f5f5;
+  font-family: monospace;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+.tab {
+  padding-left: 4em;
+}
+
+.eventForm input {
+  font-family: monospace;
+}
+
+.triggers {
+  color: #f5f5f5;
+}
+
+.FirealertsLog {
+  height: 200px;
+  margin-top: 10px;
+  overflow: scroll;
+  border: 1px solid #f5f5f5;
+}
+
+.jsonBlock {
+  margin-left: 4em;
+  background-color: #f5f5f5;
+}
+
+.arrayBlock {
+  margin-left: 4em;
+}
diff --git a/src/components/Firealerts/Form/FirealertsForm.tsx b/src/components/Firealerts/Form/FirealertsForm.tsx
new file mode 100644
index 000000000..2376818cf
--- /dev/null
+++ b/src/components/Firealerts/Form/FirealertsForm.tsx
@@ -0,0 +1,267 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from '@rmwc/button';
+import { Card } from '@rmwc/card';
+import { GridCell, GridRow } from '@rmwc/grid';
+import { IconButton } from '@rmwc/icon-button';
+import { Select } from '@rmwc/select';
+import { Typography } from '@rmwc/typography';
+import _ from 'lodash';
+import { ChangeEvent, useEffect, useState } from 'react';
+
+import { Callout } from '../../common/Callout';
+import { useEmulatorConfig } from '../../common/EmulatorConfigProvider';
+import { useFirealerts } from '../api/useFirealerts';
+import { FirealertsTrigger } from '../models';
+import AlertSentNotification from '../Notification/AlertSentNotification';
+import {
+  FirealertsType,
+  alertConfiguration,
+  generateCloudEventWithData,
+} from './EventConfigs';
+import styles from './FirealertsForm.module.scss';
+import FirealertsLog from './FirealertsLog';
+import { ZeroState } from './ZeroState';
+
+export const FirealertsForm = () => {
+  const triggers = useFirealerts();
+  const implementedAlerts = getAlertsForTriggers(triggers);
+  const alertsList = Object.keys(implementedAlerts) as FirealertsType[];
+  const config = useEmulatorConfig('eventarc');
+
+  const [selectedAlert, setSelectedAlert] = useState(alertsList[0]);
+  const [alertData, setAlertData] = useState(
+    _.cloneDeep(alertConfiguration[selectedAlert]?.default)
+  );
+  const [currentDefault, setCurrentDefault] = useState(
+    _.cloneDeep(alertConfiguration[selectedAlert]?.default)
+  );
+  const [showNotification, setShowNotification] = useState<boolean>(false);
+
+  useEffect(() => {
+    setAlertData(_.cloneDeep(alertConfiguration[selectedAlert]?.default));
+    setCurrentDefault(_.cloneDeep(alertConfiguration[selectedAlert]?.default));
+  }, [selectedAlert]);
+
+  const updateData = (key: string, value: any) => {
+    key = key.slice(1);
+    const newAlertData = { ...alertData };
+    _.set(newAlertData, key, value);
+    setAlertData(newAlertData);
+  };
+
+  const sendAlert = async () => {
+    const event = generateCloudEventWithData(selectedAlert, alertData);
+    const payload = { events: [event] };
+    const url = `//${config.hostAndPort}/google/publishEvents`;
+    await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    });
+    setShowNotification(true);
+  };
+
+  const getTriggerName = (trigger: FirealertsTrigger): string => {
+    const tokens = trigger.triggerName.split('-');
+    return tokens[tokens.length - 2];
+  };
+
+  if (!triggers || triggers.length === 0) {
+    return (
+      <GridCell span={12}>
+        <ZeroState />
+      </GridCell>
+    );
+  }
+  return (
+    <>
+      <GridCell span={12}>
+        {!triggers || triggers.length === 0 ? (
+          <ZeroState />
+        ) : (
+          <GridRow>
+            <GridCell span={12}>
+              <Typography use="headline6">
+                Send Test {alertConfiguration[selectedAlert].name} Alert
+              </Typography>
+            </GridCell>
+            <GridCell span={12}>
+              <Callout>
+                For more information on what the fields mean see{' '}
+                <a href={alertConfiguration[selectedAlert].link}>here</a>
+              </Callout>
+            </GridCell>
+            <GridCell span={12}>
+              <Card className={styles.container}>
+                <Select
+                  outlined
+                  label="Select Alert Type"
+                  defaultValue={selectedAlert}
+                  onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                    setSelectedAlert(e.target.value as FirealertsType)
+                  }
+                >
+                  {alertsList.sort().map((alert) => (
+                    <option
+                      key={alert}
+                      value={alert}
+                      disabled={
+                        implementedAlerts[alert as FirealertsType]?.length === 0
+                      }
+                    >
+                      {alert}
+                    </option>
+                  ))}
+                </Select>
+                <Typography use="body2" theme="textSecondaryOnBackground">
+                  {' '}
+                  Triggers:{' '}
+                  {implementedAlerts[selectedAlert]
+                    ?.map(getTriggerName)
+                    .join(', ')}
+                </Typography>
+                <form className={styles.eventForm}>
+                  <JSONForm
+                    alertData={alertData}
+                    parent={''}
+                    defaultObject={currentDefault}
+                    update={updateData}
+                  />
+                </form>
+                <GridRow>
+                  <GridCell span={2}>
+                    <Button
+                      label="Send Alert"
+                      unelevated
+                      icon="send"
+                      onClick={sendAlert}
+                    />
+                  </GridCell>
+                </GridRow>
+                <FirealertsLog />
+              </Card>
+            </GridCell>
+          </GridRow>
+        )}
+      </GridCell>
+      <AlertSentNotification
+        showAlertSentNotification={showNotification}
+        setShowAlertSentNotification={setShowNotification}
+      />
+    </>
+  );
+};
+
+const isObject = (x: any) =>
+  typeof x === 'object' && !Array.isArray(x) && x !== null;
+
+const JSONForm = ({
+  alertData,
+  parent,
+  defaultObject,
+  update,
+}: {
+  alertData: any;
+  parent: string;
+  defaultObject: any;
+  update: (key: string, value: any) => void;
+}) => {
+  return (
+    <>
+      {'{'}
+      {Object.keys(alertData).map((key) => (
+        <div key={`${parent}.${key}`} className={styles.jsonBlock}>
+          <label>{JSON.stringify(key)}: </label>
+          {isObject(alertData[key]) ? (
+            <JSONForm
+              alertData={alertData[key]}
+              parent={`${parent}.${key}`}
+              defaultObject={defaultObject}
+              update={update}
+            />
+          ) : Array.isArray(alertData[key]) ? (
+            <>
+              <br />
+              {'['}
+              <div className={styles.arrayBlock}>
+                {alertData[key].map((data: any, index: number) => (
+                  <div key={`${parent}.${key}`}>
+                    <IconButton
+                      style={{ fontSize: '1em' }}
+                      label="delete"
+                      type="button"
+                      icon="delete"
+                      onClick={() => {
+                        alertData[key].splice(index, 1);
+                        update(`${parent}.${key}`, [...alertData[key]]);
+                      }}
+                    />
+                    <JSONForm
+                      alertData={data}
+                      parent={`${parent}.${key}[${index}]`}
+                      defaultObject={defaultObject}
+                      update={update}
+                    />
+                  </div>
+                ))}
+                <IconButton
+                  style={{ fontSize: '1em' }}
+                  label="Add field"
+                  type="button"
+                  icon="add"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    const defaultKey = `${parent}.${key}`.slice(1) + '[0]';
+                    const arrayValue = _.get(defaultObject, defaultKey);
+                    update(`${parent}.${key}`, [...alertData[key], arrayValue]);
+                  }}
+                />
+              </div>
+              {'],'}
+            </>
+          ) : (
+            <>
+              <input
+                type="text"
+                className={styles.fieldInput}
+                value={alertData[key]}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                  update(`${parent}.${key}`, e.target.value);
+                }}
+              />
+            </>
+          )}
+        </div>
+      ))}
+      {'},'}
+    </>
+  );
+};
+
+const getAlertsForTriggers = (triggers: FirealertsTrigger[]) => {
+  if (!triggers || triggers.length === 0) return {};
+  const alertTypes = Object.keys(alertConfiguration);
+  const alertsForFunctions: { [key in FirealertsType]?: FirealertsTrigger[] } =
+    {};
+  alertTypes.forEach((alerttype) => {
+    const alertTriggers = triggers.filter(
+      (t) => t.eventTrigger.eventFilters.alerttype === alerttype
+    );
+    alertsForFunctions[alerttype as FirealertsType] = alertTriggers || [];
+  });
+  return alertsForFunctions;
+};
diff --git a/src/components/Firealerts/Form/FirealertsLog.tsx b/src/components/Firealerts/Form/FirealertsLog.tsx
new file mode 100644
index 000000000..f2497d682
--- /dev/null
+++ b/src/components/Firealerts/Form/FirealertsLog.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import '../../LogViewer/index.scss';
+
+import { GridCell } from '@rmwc/grid';
+import React, { useEffect, useState } from 'react';
+
+import { ReconnectingWebSocket } from '../../../reconnectingWebSocket';
+import { useConfigOptional } from '../../common/EmulatorConfigProvider';
+import { CompiledGetterCache } from '../../LogViewer/CompiledGetterCache';
+import History from '../../LogViewer/History';
+import { parseQuery } from '../../LogViewer/QueryBar';
+import { LogEntry } from '../../LogViewer/types';
+import styles from './FirealertsForm.module.scss';
+
+const compiledGetters = new CompiledGetterCache();
+
+export const LogViewer: React.FC<React.PropsWithChildren<unknown>> = () => {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+
+  // This component does not suspend. Show empty logs on start and keep previous
+  // logs when emulator stops.
+  const config = useConfigOptional()?.logging;
+
+  useEffect(() => {
+    if (!config) return;
+
+    setLogs([]);
+
+    const protocol = document.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const webSocket = new ReconnectingWebSocket(
+      `${protocol}//${config.hostAndPort}`
+    );
+    webSocket.listener = (log: LogEntry) => {
+      setLogs((logs) => [...logs, log]);
+    };
+    return () => webSocket.cleanup();
+  }, [config, setLogs]);
+
+  const parsedQuery = parseQuery('metadata.emulator.name="functions"');
+
+  return (
+    <GridCell span={12}>
+      <div className={styles.FirealertsLog}>
+        <History
+          parsedQuery={parsedQuery}
+          setQuery={() => {}}
+          compiledGetters={compiledGetters}
+          logs={logs}
+        />
+      </div>
+    </GridCell>
+  );
+};
+
+export default LogViewer;
diff --git a/src/components/Firealerts/Form/ZeroState.module.scss b/src/components/Firealerts/Form/ZeroState.module.scss
new file mode 100644
index 000000000..5e8e442c5
--- /dev/null
+++ b/src/components/Firealerts/Form/ZeroState.module.scss
@@ -0,0 +1,23 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.wrapper {
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
diff --git a/src/components/Firealerts/Form/ZeroState.tsx b/src/components/Firealerts/Form/ZeroState.tsx
new file mode 100644
index 000000000..d1124e9d6
--- /dev/null
+++ b/src/components/Firealerts/Form/ZeroState.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Typography } from '@rmwc/typography';
+import React from 'react';
+
+import styles from './ZeroState.module.scss';
+
+export const ZeroState: React.FC<React.PropsWithChildren<unknown>> = () => {
+  return (
+    <div className={styles.wrapper}>
+      <Typography
+        use="body2"
+        className={styles.noResultsWrapper}
+        theme="textSecondaryOnBackground"
+      >
+        No FireAlerts triggers for this project yet
+      </Typography>
+    </div>
+  );
+};
diff --git a/src/components/Firealerts/Notification/AlertSentNotification.module.scss b/src/components/Firealerts/Notification/AlertSentNotification.module.scss
new file mode 100644
index 000000000..b8608d946
--- /dev/null
+++ b/src/components/Firealerts/Notification/AlertSentNotification.module.scss
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.AlertSentNotification {
+  & .mdc-snackbar__surface {
+    background-color: #051e34; // navy800
+  }
+
+  i.rmwc-icon {
+    // !important is needed because Snackbar sets an inline color style
+    color: #00bfa5 !important; // successOnDark
+  }
+}
diff --git a/src/components/Firealerts/Notification/AlertSentNotification.tsx b/src/components/Firealerts/Notification/AlertSentNotification.tsx
new file mode 100644
index 000000000..5ae300f86
--- /dev/null
+++ b/src/components/Firealerts/Notification/AlertSentNotification.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Snackbar } from '@rmwc/snackbar';
+import React from 'react';
+
+import styles from './AlertSentNotification.module.scss';
+
+export const SNACKBAR_MESSAGE = 'Alert Sent!';
+
+interface Props {
+  showAlertSentNotification: boolean;
+  setShowAlertSentNotification: (value: boolean) => void;
+}
+
+const ForceRunNotification: React.FC<React.PropsWithChildren<Props>> = ({
+  showAlertSentNotification,
+  setShowAlertSentNotification,
+}) => (
+  <Snackbar
+    className={styles.AlertSentNotification}
+    open={showAlertSentNotification}
+    onClose={() => setShowAlertSentNotification(false)}
+    message={SNACKBAR_MESSAGE}
+    icon={{ icon: 'check_circle', size: 'medium' }}
+    timeout={2000}
+  />
+);
+
+export default ForceRunNotification;
diff --git a/src/components/Firealerts/api/internal/useFirealertsTriggers.tsx b/src/components/Firealerts/api/internal/useFirealertsTriggers.tsx
new file mode 100644
index 000000000..390ab0a0d
--- /dev/null
+++ b/src/components/Firealerts/api/internal/useFirealertsTriggers.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import useSWR from 'swr';
+
+import { useEmulatorConfig } from '../../../common/EmulatorConfigProvider';
+import { FirealertsTrigger } from '../../models';
+
+export function useFirealertsTriggers(): FirealertsTrigger[] {
+  const config = useEmulatorConfig('eventarc');
+  const FIREALERTS_EVENT_TYPE =
+    'google.firebase.firebasealerts.alerts.v1.published-google';
+  const fetcher = async (url: URL) => {
+    const response = await fetch(url);
+    const json = await response.json();
+    return json;
+  };
+
+  const { data } = useSWR(
+    `//${config.hostAndPort}/google/getTriggers`,
+    fetcher,
+    { suspense: true }
+  );
+  return data[FIREALERTS_EVENT_TYPE];
+}
diff --git a/src/components/Firealerts/api/useFirealerts.tsx b/src/components/Firealerts/api/useFirealerts.tsx
new file mode 100644
index 000000000..76307d8c9
--- /dev/null
+++ b/src/components/Firealerts/api/useFirealerts.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createContext, useContext } from 'react';
+
+import { FirealertsTrigger } from '../models';
+
+export const FirealertsContext = createContext<FirealertsTrigger[]>([]);
+
+export const FirealertsProvider: React.FC<
+  React.PropsWithChildren<{
+    triggers: FirealertsTrigger[];
+  }>
+> = ({ children, triggers }) => {
+  return (
+    <FirealertsContext.Provider value={triggers}>
+      {children}
+    </FirealertsContext.Provider>
+  );
+};
+
+export function useFirealerts() {
+  return useContext(FirealertsContext);
+}
diff --git a/src/components/Firealerts/index.tsx b/src/components/Firealerts/index.tsx
new file mode 100644
index 000000000..0aefbe2c8
--- /dev/null
+++ b/src/components/Firealerts/index.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Suspense } from 'react';
+
+import { useIsEmulatorDisabled } from '../common/EmulatorConfigProvider';
+import { EmulatorDisabled } from '../common/EmulatorDisabled';
+import { Spinner } from '../common/Spinner';
+import { useFirealertsTriggers } from './api/internal/useFirealertsTriggers';
+import { FirealertsProvider } from './api/useFirealerts';
+import { FirealertsForm } from './Form/FirealertsForm';
+
+export const FirealertsRoute: React.FC = () => {
+  return (
+    <Suspense fallback={<FirealertsRouteSuspended />}>
+      <HydrateFirealerts>
+        <FirealertsForm />
+      </HydrateFirealerts>
+    </Suspense>
+  );
+};
+
+const HydrateFirealerts: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
+  const functions = useFirealertsTriggers();
+  return (
+    <FirealertsProvider triggers={functions}>{children}</FirealertsProvider>
+  );
+};
+const FirealertsRouteSuspended: React.FC<
+  React.PropsWithChildren<unknown>
+> = () => {
+  const isDisabled = useIsEmulatorDisabled('eventarc');
+  return isDisabled ? (
+    <EmulatorDisabled productName="FireAlerts" />
+  ) : (
+    <Spinner span={12} message="FireAlerts Emulator Loading..." />
+  );
+};
+
+export default FirealertsRoute;
diff --git a/src/components/Firealerts/models.ts b/src/components/Firealerts/models.ts
new file mode 100644
index 000000000..0715add97
--- /dev/null
+++ b/src/components/Firealerts/models.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface FirealertsTrigger {
+  projectId: string;
+  triggerName: string;
+  eventTrigger: EventTrigger;
+}
+
+export interface EventTrigger {
+  eventFilters: {
+    alerttype?: string;
+  };
+  eventType: string;
+  service: string;
+}
diff --git a/src/routes.ts b/src/routes.ts
index 531a1e850..4329db4f6 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -20,6 +20,7 @@ import { matchPath } from 'react-router';
 import Auth from './components/Auth';
 import Database from './components/Database';
 import { ExtensionsRoute } from './components/Extensions';
+import FirealertsRoute from './components/Firealerts';
 import Firestore from './components/Firestore';
 import Home from './components/Home';
 import LogsViewer from './components/LogViewer';
@@ -135,4 +136,11 @@ export const routes: ReadonlyArray<Route> = [
     exact: true,
     showInNav: true,
   },
+  {
+    path: '/firealerts',
+    component: FirealertsRoute,
+    label: 'FireAlerts',
+    exact: false,
+    showInNav: true,
+  },
 ];
diff --git a/src/store/config/types.ts b/src/store/config/types.ts
index 44d101bea..79dc8379c 100644
--- a/src/store/config/types.ts
+++ b/src/store/config/types.ts
@@ -42,7 +42,8 @@ export type Emulator =
   | 'hosting'
   | 'storage'
   | 'pubsub'
-  | 'extensions';
+  | 'extensions'
+  | 'eventarc';
 
 // Config for the Emulator Suite UI's own analytics (not a Google Analytics emulator)
 // See also: https://github.com/FirebasePrivate/firebase-tools/blob/3e6f525717f546c64f9943f6b3e045772fbf637f/src/track.ts#L167-L187
@@ -81,5 +82,6 @@ export interface Config {
   hosting?: EmulatorConfig;
   storage?: EmulatorConfig;
   pubsub?: EmulatorConfig;
+  eventarc?: EmulatorConfig;
   experiments: Array<string>;
 }