diff --git a/components/mod-event/EventList.tsx b/components/mod-event/EventList.tsx
index 1678e937..8790e765 100644
--- a/components/mod-event/EventList.tsx
+++ b/components/mod-event/EventList.tsx
@@ -1,4 +1,5 @@
 import {
+  EventListState,
   FIRST_EVENT_TIMESTAMP,
   ModEventListQueryOptions,
   useModEventList,
@@ -88,7 +89,7 @@ export const ModEventList = (
   const noEvents = modEvents.length === 0 && !isInitialLoadingModEvents
   const isShowingEventsByCreator = !!props.createdBy
   return (
-    <div className='mr-1'>
+    <div className="mr-1">
       <div className="flex flex-row justify-between items-center">
         {!isEntireHistoryView ? (
           <Header
@@ -106,184 +107,34 @@ export const ModEventList = (
         ) : (
           <h4 className="font-medium text-gray-700">Moderation event stream</h4>
         )}
-          <ActionButton
-            size="xs"
-            appearance="outlined"
-            onClick={() => setShowFiltersPanel((current) => !current)}
-          >
-            {hasFilter ? (
-              <FunnelFilledIcon className="h-3 w-3 mr-1" />
-            ) : (
-              <FunnelEmptyIcon className="h-3 w-3 mr-1" />
-            )}
-            <span className="text-xs">Configure</span>
-          </ActionButton>
+        <ActionButton
+          size="xs"
+          appearance="outlined"
+          onClick={() => setShowFiltersPanel((current) => !current)}
+        >
+          {hasFilter ? (
+            <FunnelFilledIcon className="h-3 w-3 mr-1" />
+          ) : (
+            <FunnelEmptyIcon className="h-3 w-3 mr-1" />
+          )}
+          <span className="text-xs">Configure</span>
+        </ActionButton>
       </div>
       {showFiltersPanel && (
-        <div className="shadow rounded py-3 px-5 bg-white mt-2">
-          <div className="flex flex-row">
-            <div className="mr-4">
-              <TypeFilterCheckbox
-                selectedTypes={types}
-                setSelectedTypes={(value) =>
-                  changeListFilter({ field: 'types', value })
-                }
-              />
-            </div>
-            <div>
-              <h5 className="text-gray-700 font-medium">Comment/Note</h5>
-
-              <div className="flex flex-row items-center mr-2 mt-2">
-                <input
-                  id={`comment-filter`}
-                  name={`comment-filter`}
-                  type="checkbox"
-                  value={`true`}
-                  checked={commentFilter.enabled}
-                  onChange={() => toggleCommentFilter()}
-                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      e.preventDefault() // make sure we don't submit the form
-                      e.currentTarget.click() // simulate a click on the input
-                    }
-                  }}
-                />
-                <label
-                  htmlFor={`comment-filter`}
-                  className="ml-1 text-sm leading-6 text-gray-700"
-                >
-                  Events with comments
-                </label>
-              </div>
-              {commentFilter?.enabled && (
-                <FormLabel
-                  label="Comment Keyword"
-                  htmlFor="keyword"
-                  className="flex-1 mt-2"
-                >
-                  <Input
-                    type="text"
-                    id="keyword"
-                    name="keyword"
-                    required
-                    placeholder="trim, later, soon etc."
-                    className="block w-full"
-                    value={commentFilter.keyword}
-                    onChange={(ev) => setCommentFilterKeyword(ev.target.value)}
-                    autoComplete="off"
-                  />
-                </FormLabel>
-              )}
-
-              <FormLabel
-                label="Event Author DID"
-                htmlFor="createdBy"
-                className="flex-1 mt-2"
-              >
-                <Input
-                  type="text"
-                  id="createdBy"
-                  name="createdBy"
-                  placeholder="DID of the author of the event"
-                  className="block w-full"
-                  disabled={!!props.createdBy}
-                  value={createdBy || ''}
-                  onChange={(ev) =>
-                    changeListFilter({
-                      field: 'createdBy',
-                      value: ev.target.value,
-                    })
-                  }
-                  autoComplete="off"
-                />
-              </FormLabel>
-
-              <FormLabel
-                label="Subject"
-                htmlFor="subject"
-                className="flex-1 mt-2"
-              >
-                <Input
-                  type="text"
-                  id="subject"
-                  name="subject"
-                  disabled={!!props.subject}
-                  placeholder="DID or AT-URI"
-                  className="block w-full"
-                  value={subject || ''}
-                  onChange={(ev) =>
-                    changeListFilter({
-                      field: 'subject',
-                      value: ev.target.value,
-                    })
-                  }
-                  autoComplete="off"
-                />
-              </FormLabel>
-
-              <FormLabel
-                label="Events Created After"
-                htmlFor="createdAfter"
-                className="flex-1 mt-2"
-              >
-                <Input
-                  type="datetime-local"
-                  id="createdAfter"
-                  name="createdAfter"
-                  className="block w-full"
-                  value={createdAfter}
-                  onChange={(ev) =>
-                    changeListFilter({
-                      field: 'createdAfter',
-                      value: ev.target.value,
-                    })
-                  }
-                  autoComplete="off"
-                  min={FIRST_EVENT_TIMESTAMP}
-                  max={new Date().toISOString().split('.')[0]}
-                />
-              </FormLabel>
-
-              <FormLabel
-                label="Events Created Before"
-                htmlFor="createdBefore"
-                className="flex-1 mt-2"
-              >
-                <Input
-                  type="datetime-local"
-                  id="createdBefore"
-                  name="createdBefore"
-                  className="block w-full"
-                  value={createdBefore}
-                  onChange={(ev) =>
-                    changeListFilter({
-                      field: 'createdBefore',
-                      value: ev.target.value,
-                    })
-                  }
-                  autoComplete="off"
-                  min={FIRST_EVENT_TIMESTAMP}
-                  max={new Date().toISOString().split('.')[0]}
-                />
-              </FormLabel>
-            </div>
-          </div>
-          <div>
-            <h5 className="text-gray-700 font-medium my-2">Sort Direction</h5>
-
-            <Checkbox
-              id="sortDirection"
-              name="sortDirection"
-              className="flex items-center"
-              checked={oldestFirst}
-              onChange={() =>
-                changeListFilter({ field: 'oldestFirst', value: !oldestFirst })
-              }
-              label="Show oldest events first (default: newest first)"
-            />
-          </div>
-        </div>
+        <EventFilterPanel
+          {...{
+            types,
+            commentFilter,
+            toggleCommentFilter,
+            setCommentFilterKeyword,
+            createdBy,
+            subject,
+            oldestFirst,
+            createdAfter,
+            createdBefore,
+            changeListFilter,
+          }}
+        />
       )}
       <div>
         {noEvents ? (
@@ -327,83 +178,247 @@ export const ModEventList = (
   )
 }
 
-// This is component which renders a list of checkboxes by iterating over MOD_EVENT_TITLES list for filtering by type
-// same as the TypeFilter component but instead of dropdown, use checkboxes
-// on each checkbox click, it will call the `setSelectedTypes` function and toggle the checkox's type
-const TypeFilterCheckbox = ({
-  selectedTypes,
-  setSelectedTypes,
-}: {
-  selectedTypes: string[]
-  setSelectedTypes: (type: string[]) => void
-}) => {
+const EventFilterPanel = ({
+  types,
+  commentFilter,
+  createdBy,
+  subject,
+  oldestFirst,
+  createdAfter,
+  createdBefore,
+  toggleCommentFilter,
+  setCommentFilterKeyword,
+  changeListFilter,
+}: Omit<EventListState, 'includeAllUserRecords'> &
+  Pick<
+    ReturnType<typeof useModEventList>,
+    | 'changeListFilter'
+    | 'commentFilter'
+    | 'toggleCommentFilter'
+    | 'setCommentFilterKeyword'
+  >) => {
   const allTypes = Object.entries(MOD_EVENT_TITLES)
   const toggleType = (type) => {
     if (type === 'all') {
-      if (selectedTypes.length === allTypes.length) {
-        setSelectedTypes([])
+      if (types.length === allTypes.length) {
+        changeListFilter({ field: 'types', value: [] })
       } else {
-        setSelectedTypes(allTypes.map(([type]) => type))
+        changeListFilter({
+          field: 'types',
+          value: allTypes.map(([type]) => type),
+        })
       }
       return
     }
-    const newTypes = selectedTypes.includes(type)
-      ? selectedTypes.filter((t) => t !== type)
-      : [...selectedTypes, type]
-    setSelectedTypes(newTypes)
+    const newTypes = types.includes(type)
+      ? types.filter((t) => t !== type)
+      : [...types, type]
+    changeListFilter({ field: 'types', value: newTypes })
   }
 
   return (
-    <div>
-      <h5 className="text-gray-700 font-medium">Event Type</h5>
-      <div className="flex flex-row items-center mr-2 mt-2">
-        <input
-          id={`type-all`}
-          name={`type-all`}
-          type="checkbox"
-          value={'all'}
-          checked={selectedTypes.length === allTypes.length}
-          onChange={() => toggleType('all')}
-          className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault() // make sure we don't submit the form
-              e.currentTarget.click() // simulate a click on the input
-            }
-          }}
-        />
-        <label
-          htmlFor={`type-all`}
-          className="ml-1 text-sm leading-6 text-gray-700"
-        >
-          All
-        </label>
-      </div>
-      {allTypes.map(([type, title]) => (
-        <div className="flex flex-row items-center mr-2" key={type}>
-          <input
-            id={`type-${type}`}
-            name={`type-${type}`}
-            type="checkbox"
-            value={type}
-            checked={selectedTypes.includes(type)}
-            onChange={() => toggleType(type)}
-            className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault() // make sure we don't submit the form
-                e.currentTarget.click() // simulate a click on the input
+    <div className="shadow rounded py-3 px-5 bg-white mt-2">
+      <div className="flex flex-row">
+        <div className="mr-4">
+          <div>
+            <h5 className="text-gray-700 font-medium">Event Type</h5>
+            <div className="flex flex-row items-center mr-2 mt-2">
+              <input
+                id={`type-all`}
+                name={`type-all`}
+                type="checkbox"
+                value={'all'}
+                checked={types.length === allTypes.length}
+                onChange={() => toggleType('all')}
+                className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault() // make sure we don't submit the form
+                    e.currentTarget.click() // simulate a click on the input
+                  }
+                }}
+              />
+              <label
+                htmlFor={`type-all`}
+                className="ml-1 text-sm leading-6 text-gray-700"
+              >
+                All
+              </label>
+            </div>
+            {allTypes.map(([type, title]) => (
+              <div className="flex flex-row items-center mr-2" key={type}>
+                <input
+                  id={`type-${type}`}
+                  name={`type-${type}`}
+                  type="checkbox"
+                  value={type}
+                  checked={types.includes(type)}
+                  onChange={() => toggleType(type)}
+                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault() // make sure we don't submit the form
+                      e.currentTarget.click() // simulate a click on the input
+                    }
+                  }}
+                />
+                <label
+                  htmlFor={`type-${type}`}
+                  className="ml-1 text-sm leading-6 text-gray-700"
+                >
+                  {title}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div>
+          <h5 className="text-gray-700 font-medium">Comment/Note</h5>
+
+          <div className="flex flex-row items-center mr-2 mt-2">
+            <input
+              id={`comment-filter`}
+              name={`comment-filter`}
+              type="checkbox"
+              value={`true`}
+              checked={commentFilter.enabled}
+              onChange={() => toggleCommentFilter()}
+              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault() // make sure we don't submit the form
+                  e.currentTarget.click() // simulate a click on the input
+                }
+              }}
+            />
+            <label
+              htmlFor={`comment-filter`}
+              className="ml-1 text-sm leading-6 text-gray-700"
+            >
+              Events with comments
+            </label>
+          </div>
+          {commentFilter?.enabled && (
+            <FormLabel
+              label="Comment Keyword"
+              htmlFor="keyword"
+              className="flex-1 mt-2"
+            >
+              <Input
+                type="text"
+                id="keyword"
+                name="keyword"
+                required
+                placeholder="trim, later, soon etc."
+                className="block w-full"
+                value={commentFilter.keyword}
+                onChange={(ev) => setCommentFilterKeyword(ev.target.value)}
+                autoComplete="off"
+              />
+            </FormLabel>
+          )}
+
+          <FormLabel
+            label="Event Author DID"
+            htmlFor="createdBy"
+            className="flex-1 mt-2"
+          >
+            <Input
+              type="text"
+              id="createdBy"
+              name="createdBy"
+              placeholder="DID of the author of the event"
+              className="block w-full"
+              value={createdBy || ''}
+              onChange={(ev) =>
+                changeListFilter({
+                  field: 'createdBy',
+                  value: ev.target.value,
+                })
               }
-            }}
-          />
-          <label
-            htmlFor={`type-${type}`}
-            className="ml-1 text-sm leading-6 text-gray-700"
+              autoComplete="off"
+            />
+          </FormLabel>
+
+          <FormLabel label="Subject" htmlFor="subject" className="flex-1 mt-2">
+            <Input
+              type="text"
+              id="subject"
+              name="subject"
+              placeholder="DID or AT-URI"
+              className="block w-full"
+              value={subject || ''}
+              onChange={(ev) =>
+                changeListFilter({
+                  field: 'subject',
+                  value: ev.target.value,
+                })
+              }
+              autoComplete="off"
+            />
+          </FormLabel>
+
+          <FormLabel
+            label="Events Created After"
+            htmlFor="createdAfter"
+            className="flex-1 mt-2"
           >
-            {title}
-          </label>
+            <Input
+              type="datetime-local"
+              id="createdAfter"
+              name="createdAfter"
+              className="block w-full"
+              value={createdAfter}
+              onChange={(ev) =>
+                changeListFilter({
+                  field: 'createdAfter',
+                  value: ev.target.value,
+                })
+              }
+              autoComplete="off"
+              min={FIRST_EVENT_TIMESTAMP}
+              max={new Date().toISOString().split('.')[0]}
+            />
+          </FormLabel>
+
+          <FormLabel
+            label="Events Created Before"
+            htmlFor="createdBefore"
+            className="flex-1 mt-2"
+          >
+            <Input
+              type="datetime-local"
+              id="createdBefore"
+              name="createdBefore"
+              className="block w-full"
+              value={createdBefore}
+              onChange={(ev) =>
+                changeListFilter({
+                  field: 'createdBefore',
+                  value: ev.target.value,
+                })
+              }
+              autoComplete="off"
+              min={FIRST_EVENT_TIMESTAMP}
+              max={new Date().toISOString().split('.')[0]}
+            />
+          </FormLabel>
         </div>
-      ))}
+      </div>
+      <div>
+        <h5 className="text-gray-700 font-medium my-2">Sort Direction</h5>
+
+        <Checkbox
+          id="sortDirection"
+          name="sortDirection"
+          className="flex items-center"
+          checked={oldestFirst}
+          onChange={() =>
+            changeListFilter({ field: 'oldestFirst', value: !oldestFirst })
+          }
+          label="Show oldest events first (default: newest first)"
+        />
+      </div>
     </div>
   )
 }
diff --git a/components/mod-event/useModEventList.tsx b/components/mod-event/useModEventList.tsx
index a086effd..9fe390ec 100644
--- a/components/mod-event/useModEventList.tsx
+++ b/components/mod-event/useModEventList.tsx
@@ -30,7 +30,7 @@ const initialListState = {
 }
 
 // The 2 fields need overriding because in the initialState, they are set as undefined so the alternative string type is not accepted without override
-type EventListState = Omit<typeof initialListState, 'subject' | 'createdBy'> & {
+export type EventListState = Omit<typeof initialListState, 'subject' | 'createdBy'> & {
   subject?: string
   createdBy?: string
 }