diff --git a/web/src/Events.jsx b/web/src/Events.jsx
index 90c886824..e145889c5 100644
--- a/web/src/Events.jsx
+++ b/web/src/Events.jsx
@@ -259,7 +259,7 @@ function Filters({ onChange, searchParams }) {
   }, [data]);
 
   return (
-    <div className="flex space-x-8">
+    <div className="flex space-x-4">
       <Filter onChange={onChange} options={cameras} paramName="camera" searchParams={searchParams} />
       <Filter onChange={onChange} options={zones} paramName="zone" searchParams={searchParams} />
       <Filter onChange={onChange} options={labels} paramName="label" searchParams={searchParams} />
diff --git a/web/src/icons/ArrowDropdown.jsx b/web/src/icons/ArrowDropdown.jsx
index abb59a464..555901e39 100644
--- a/web/src/icons/ArrowDropdown.jsx
+++ b/web/src/icons/ArrowDropdown.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function ArrowDropdown() {
+export function ArrowDropdown() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function ArrowDropdown() {
     </svg>
   );
 }
+
+export default memo(ArrowDropdown);
diff --git a/web/src/icons/ArrowDropup.jsx b/web/src/icons/ArrowDropup.jsx
index 984e820e9..534076a94 100644
--- a/web/src/icons/ArrowDropup.jsx
+++ b/web/src/icons/ArrowDropup.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function ArrowDropup() {
+export function ArrowDropup() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function ArrowDropup() {
     </svg>
   );
 }
+
+export default memo(ArrowDropup);
diff --git a/web/src/icons/AutoAwesome.jsx b/web/src/icons/AutoAwesome.jsx
index 2db782fb5..b4f3803fa 100644
--- a/web/src/icons/AutoAwesome.jsx
+++ b/web/src/icons/AutoAwesome.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function ArrowDropdown() {
+export function AutoAwesome() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function ArrowDropdown() {
     </svg>
   );
 }
+
+export default memo(AutoAwesome);
diff --git a/web/src/icons/DarkMode.jsx b/web/src/icons/DarkMode.jsx
index 329449251..414457e47 100644
--- a/web/src/icons/DarkMode.jsx
+++ b/web/src/icons/DarkMode.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function DarkMode() {
+export function DarkMode() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <rect fill="none" height="24" width="24" />
@@ -8,3 +9,5 @@ export default function DarkMode() {
     </svg>
   );
 }
+
+export default memo(DarkMode);
diff --git a/web/src/icons/LightMode.jsx b/web/src/icons/LightMode.jsx
index 73b07ae44..3044d9102 100644
--- a/web/src/icons/LightMode.jsx
+++ b/web/src/icons/LightMode.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function ArrowDropdown() {
+export function LightMode() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <rect fill="none" height="24" width="24" />
@@ -8,3 +9,5 @@ export default function ArrowDropdown() {
     </svg>
   );
 }
+
+export default memo(LightMode);
diff --git a/web/src/icons/Menu.jsx b/web/src/icons/Menu.jsx
index 2fcea205f..fff8961b8 100644
--- a/web/src/icons/Menu.jsx
+++ b/web/src/icons/Menu.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function Menu() {
+export function Menu() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function Menu() {
     </svg>
   );
 }
+
+export default memo(Menu);
diff --git a/web/src/icons/MenuOpen.jsx b/web/src/icons/MenuOpen.jsx
index cad03fd01..6d8f7bb0c 100644
--- a/web/src/icons/MenuOpen.jsx
+++ b/web/src/icons/MenuOpen.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function MenuOpen() {
+export function MenuOpen() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0V0z" fill="none" />
@@ -8,3 +9,5 @@ export default function MenuOpen() {
     </svg>
   );
 }
+
+export default memo(MenuOpen);
diff --git a/web/src/icons/More.jsx b/web/src/icons/More.jsx
index 76dacfb5e..7ea2b6df8 100644
--- a/web/src/icons/More.jsx
+++ b/web/src/icons/More.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function More() {
+export function More() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
@@ -8,3 +9,5 @@ export default function More() {
     </svg>
   );
 }
+
+export default memo(More);
diff --git a/web/src/icons/Settings.jsx b/web/src/icons/Settings.jsx
index 32989fda5..be605cd3c 100644
--- a/web/src/icons/Settings.jsx
+++ b/web/src/icons/Settings.jsx
@@ -1,6 +1,7 @@
 import { h } from 'preact';
+import { memo } from 'preact/compat';
 
-export default function DarkMode() {
+export function Settings() {
   return (
     <svg className="fill-current" viewBox="0 0 24 24">
       <g>
@@ -10,3 +11,5 @@ export default function DarkMode() {
     </svg>
   );
 }
+
+export default memo(Settings);