diff --git a/frigate/storage.py b/frigate/storage.py
index 8700f3714..55146047b 100644
--- a/frigate/storage.py
+++ b/frigate/storage.py
@@ -71,7 +71,10 @@ class StorageMaintainer(threading.Thread):
                 .scalar()
             )
 
-            usages[camera] = {"usage": camera_storage}
+            usages[camera] = {
+                "usage": camera_storage,
+                "bandwidth": self.camera_storage_stats[camera]["bandwidth"],
+            }
 
         return usages
 
diff --git a/web/src/routes/Storage.jsx b/web/src/routes/Storage.jsx
index 7d68e376f..238f8eb3b 100644
--- a/web/src/routes/Storage.jsx
+++ b/web/src/routes/Storage.jsx
@@ -1,21 +1,84 @@
 import { h, Fragment } from 'preact';
 import ActivityIndicator from '../components/ActivityIndicator';
-import Button from '../components/Button';
 import Heading from '../components/Heading';
-import Link from '../components/Link';
-import { useMqtt } from '../api/mqtt';
+import { useWs } from '../api/ws';
 import useSWR from 'swr';
 import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
-import { useCallback } from 'preact/hooks';
+
+const emptyObject = Object.freeze({});
 
 export default function Storage() {
   const { data: storage } = useSWR('recordings/storage');
 
+  const {
+    value: { payload: stats },
+  } = useWs('stats');
+  const { data: initialStats } = useSWR('stats');
+
+  const { service = {} } = stats || initialStats || emptyObject;
+
   return (
     <div className="space-y-4 p-2 px-4">
-      <Heading>
-        Storage
-      </Heading>
+      <Heading>Storage</Heading>
+
+      {!service ? (
+        <div>
+          <ActivityIndicator />
+        </div>
+      ) : (
+        <Fragment>
+          <Heading size="lg">Overview</Heading>
+          <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
+            <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
+              <div className="text-lg flex justify-between p-4">Data</div>
+              <div className="p-2">
+                <Table className="w-full">
+                  <Thead>
+                    <Tr>
+                      <Th>Location</Th>
+                      <Th>Used</Th>
+                      <Th>Total</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    <Tr>
+                      <Td>Recordings</Td>
+                      <Td>{service['storage']['/media/frigate/recordings']['used']}</Td>
+                      <Td>{service['storage']['/media/frigate/recordings']['total']}</Td>
+                    </Tr>
+                  </Tbody>
+                </Table>
+              </div>
+            </div>
+            <div className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
+              <div className="text-lg flex justify-between p-4">Memory</div>
+              <div className="p-2">
+                <Table className="w-full">
+                  <Thead>
+                    <Tr>
+                      <Th>Location</Th>
+                      <Th>Used</Th>
+                      <Th>Total</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    <Tr>
+                      <Td>/dev/shm</Td>
+                      <Td>{service['storage']['/dev/shm']['used']}</Td>
+                      <Td>{service['storage']['/dev/shm']['total']}</Td>
+                    </Tr>
+                    <Tr>
+                      <Td>/tmp/cache</Td>
+                      <Td>{service['storage']['/tmp/cache']['used']}</Td>
+                      <Td>{service['storage']['/tmp/cache']['total']}</Td>
+                    </Tr>
+                  </Tbody>
+                </Table>
+              </div>
+            </div>
+          </div>
+        </Fragment>
+      )}
     </div>
   );
-}
\ No newline at end of file
+}