diff --git a/web/src/routes/CameraMap.jsx b/web/src/routes/CameraMap.jsx
index 3896d6b6a..ca77ec56e 100644
--- a/web/src/routes/CameraMap.jsx
+++ b/web/src/routes/CameraMap.jsx
@@ -200,12 +200,25 @@ ${Object.keys(objectMaskPoints)
     <div className="flex-col space-y-4 p-2 px-4">
       <Heading size="2xl">{camera} mask & zone creator</Heading>
 
+      <Card
+        content={
+          <div>
+            <p>This tool can help you create masks & zones for your {camera} camera.</p>
+            <ul>
+              <li>Click to add a point.</li>
+              <li>Click and hold on an existing point to move it.</li>
+              <li>Right-Click on an existing point to delete it.</li>
+            </ul>
+          </div>
+        }
+        header="Instructions"
+      />
+
       <Card
         content={
           <p>
-            This tool can help you create masks & zones for your {camera} camera. When done, copy each mask
-            configuration into your <code className="font-mono">config.yml</code> file restart your Frigate instance to
-            save your changes.
+            When done, copy each mask configuration into your <code className="font-mono">config.yml</code> file
+            restart your Frigate instance to save your changes.
           </p>
         }
         header="Warning"
diff --git a/web/src/routes/Recording.jsx b/web/src/routes/Recording.jsx
index 3c8607833..1b018138b 100644
--- a/web/src/routes/Recording.jsx
+++ b/web/src/routes/Recording.jsx
@@ -54,6 +54,10 @@ export default function Recording({ camera, date, hour = '00', minute = '00', se
 
     const selectedDayRecordingData = recordingsSummary.find((s) => !date || s.day === date);
 
+    if (!selectedDayRecordingData) {
+      return [];
+    }
+
     const [year, month, day] = selectedDayRecordingData.day.split('-');
     return selectedDayRecordingData.hours
       .map((h) => {
diff --git a/web/src/routes/__tests__/Recording.test.jsx b/web/src/routes/__tests__/Recording.test.jsx
new file mode 100644
index 000000000..de71ec625
--- /dev/null
+++ b/web/src/routes/__tests__/Recording.test.jsx
@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import * as CameraImage from '../../components/CameraImage';
+import * as Mqtt from '../../api/mqtt';
+import Cameras from '../Cameras';
+import { render, screen, waitForElementToBeRemoved } from 'testing-library';
+
+describe('Recording Route', () => {
+  beforeEach(() => {
+    vi.spyOn(CameraImage, 'default').mockImplementation(() => <div data-testid="camera-image" />);
+    vi.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() }));
+  });
+
+  test('shows an ActivityIndicator if not yet loaded', async () => {
+    render(<Cameras />);
+    expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
+  });
+
+
+
+  test('shows no recordings warning', async () => {
+    render(<Cameras />);
+
+    await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading…'));
+
+    expect(screen.queryAllByText('No Recordings Found')).toHaveLength(0);
+  });
+});