diff --git a/web/src/hooks/useSearchString.jsx b/web/src/hooks/useSearchString.jsx
index 1dde57dcc..b4fdaf3d0 100644
--- a/web/src/hooks/useSearchString.jsx
+++ b/web/src/hooks/useSearchString.jsx
@@ -18,7 +18,8 @@ export const useSearchString = (limit, searchParams) => {
   const removeDefaultSearchKeys = useCallback((searchParams) => {
     searchParams.delete('limit');
     searchParams.delete('include_thumbnails');
-    searchParams.delete('before');
+    // removed deletion of "before" as its used by DatePicker
+    // searchParams.delete('before');
   }, []);
 
   return { searchString, setSearchString, removeDefaultSearchKeys };
diff --git a/web/src/routes/Events/components/filter.jsx b/web/src/routes/Events/components/filter.jsx
index 86d1bcd72..775682b8d 100644
--- a/web/src/routes/Events/components/filter.jsx
+++ b/web/src/routes/Events/components/filter.jsx
@@ -1,31 +1,29 @@
 import { h } from 'preact';
 import Select from '../../../components/Select';
-import { useCallback, useMemo } from 'preact/hooks';
+import { useCallback } from 'preact/hooks';
 
-const Filter = ({ onChange, searchParams, paramName, options }) => {
+function Filter({ onChange, searchParams, paramName, options, type, ...rest }) {
   const handleSelect = useCallback(
     (key) => {
       const newParams = new URLSearchParams(searchParams.toString());
-      if (key !== 'all') {
-        newParams.set(paramName, key);
-      } else {
-        newParams.delete(paramName);
-      }
+      Object.keys(key).map((entries) => {
+        if (key[entries] !== 'all') {
+          newParams.set(entries, key[entries]);
+        } else {
+          paramName.map((p) => newParams.delete(p));
+        }
+      });
 
       onChange(newParams);
     },
     [searchParams, paramName, onChange]
   );
 
-  const selectOptions = useMemo(() => ['all', ...options], [options]);
+  let obj = {};
+  paramName.map((p) => Object.assign(obj, { [p]: searchParams.get(p) }), [searchParams]);
 
   return (
-    <Select
-      label={`${paramName.charAt(0).toUpperCase()}${paramName.substr(1)}`}
-      onChange={handleSelect}
-      options={selectOptions}
-      selected={searchParams.get(paramName) || 'all'}
-    />
+    <Select onChange={handleSelect} options={options} selected={obj} paramName={paramName} type={type} {...rest} />
   );
-};
+}
 export default Filter;
diff --git a/web/src/routes/Events/components/filterable.jsx b/web/src/routes/Events/components/filterable.jsx
index b23e38eea..9c7cd6882 100644
--- a/web/src/routes/Events/components/filterable.jsx
+++ b/web/src/routes/Events/components/filterable.jsx
@@ -3,13 +3,19 @@ import { useCallback, useMemo } from 'preact/hooks';
 import Link from '../../../components/Link';
 import { route } from 'preact-router';
 
-const Filterable = ({ onFilter, pathname, searchParams, paramName, name, removeDefaultSearchKeys }) => {
+function Filterable({ onFilter, pathname, searchParams, paramName, name }) {
+  const removeDefaultSearchKeys = useCallback((searchParams) => {
+    searchParams.delete('limit');
+    searchParams.delete('include_thumbnails');
+    // searchParams.delete('before');
+  }, []);
+
   const href = useMemo(() => {
     const params = new URLSearchParams(searchParams.toString());
     params.set(paramName, name);
     removeDefaultSearchKeys(params);
     return `${pathname}?${params.toString()}`;
-  }, [searchParams, paramName, pathname, name, removeDefaultSearchKeys]);
+  }, [searchParams, paramName, pathname, name]);
 
   const handleClick = useCallback(
     (event) => {
@@ -27,6 +33,6 @@ const Filterable = ({ onFilter, pathname, searchParams, paramName, name, removeD
       {name}
     </Link>
   );
-};
+}
 
 export default Filterable;
diff --git a/web/src/routes/Events/components/filters.jsx b/web/src/routes/Events/components/filters.jsx
index e08b4ea65..553eebb60 100644
--- a/web/src/routes/Events/components/filters.jsx
+++ b/web/src/routes/Events/components/filters.jsx
@@ -2,10 +2,10 @@ import { h } from 'preact';
 import Filter from './filter';
 import { useConfig } from '../../../api';
 import { useMemo } from 'preact/hooks';
+import { DateFilterOptions } from '../../../components/DatePicker';
 
 const Filters = ({ onChange, searchParams }) => {
   const { data } = useConfig();
-
   const cameras = useMemo(() => Object.keys(data.cameras), [data]);
 
   const zones = useMemo(
@@ -30,9 +30,38 @@ const Filters = ({ onChange, searchParams }) => {
 
   return (
     <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} />
+      <Filter
+        type="dropdown"
+        onChange={onChange}
+        options={['all', ...cameras]}
+        paramName={['camera']}
+        label="Camera"
+        searchParams={searchParams}
+      />
+      <Filter
+        type="dropdown"
+        onChange={onChange}
+        options={['all', ...zones]}
+        paramName={['zone']}
+        label="Zone"
+        searchParams={searchParams}
+      />
+      <Filter
+        type="dropdown"
+        onChange={onChange}
+        options={['all', ...labels]}
+        paramName={['label']}
+        label="Label"
+        searchParams={searchParams}
+      />
+      <Filter
+        type="datepicker"
+        onChange={onChange}
+        options={DateFilterOptions}
+        paramName={['before', 'after']}
+        label="DatePicker"
+        searchParams={searchParams}
+      />
     </div>
   );
 };