diff --git a/app/actions/ModActionPanel/QuickAction.tsx b/app/actions/ModActionPanel/QuickAction.tsx
index 49cb12c9..48e559bc 100644
--- a/app/actions/ModActionPanel/QuickAction.tsx
+++ b/app/actions/ModActionPanel/QuickAction.tsx
@@ -427,7 +427,7 @@ function Form(
           }
         }
       `}</style>
-      <div className="flex overflow-y-auto scrollable-container">
+      <div className="flex overflow-y-auto scrollable-container pt-1">
         <form
           id={FORM_ID}
           onSubmit={onFormSubmit}
@@ -560,7 +560,6 @@ function Form(
                       id="labels"
                       name="labels"
                       formId={FORM_ID}
-                      subject={subject}
                       defaultLabels={currentLabels.filter(
                         (label) => !isSelfLabel(label),
                       )}
diff --git a/components/common/FullScreenActionPanel.tsx b/components/common/FullScreenActionPanel.tsx
index 9f6e0061..9f744b27 100644
--- a/components/common/FullScreenActionPanel.tsx
+++ b/components/common/FullScreenActionPanel.tsx
@@ -37,7 +37,7 @@ export function FullScreenActionPanel(props: {
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="max-w-screen-lg w-full sm:w-5/6 h-full md:max-h-3/4 md:my-12 align-bottom bg-white rounded-lg text-left sm:overflow-hidden shadow-xl transform transition-all sm:align-middle flex">
+            <Dialog.Panel className="max-w-screen-xl w-full sm:w-5/6 h-full md:max-h-3/4 md:my-12 align-bottom bg-white rounded-lg text-left sm:overflow-hidden shadow-xl transform transition-all sm:align-middle flex">
               <div className="absolute top-0 right-0 pt-4 pr-4">
                 <button
                   type="button"
diff --git a/components/common/labels/Grid.tsx b/components/common/labels/Grid.tsx
index d603dfd1..01715d19 100644
--- a/components/common/labels/Grid.tsx
+++ b/components/common/labels/Grid.tsx
@@ -1,163 +1,25 @@
-import { Fragment, useState, useEffect } from 'react'
+import { useState } from 'react'
 import Select from 'react-tailwindcss-select'
-import { Disclosure, Transition } from '@headlessui/react'
-import { LabelChip, LabelListEmpty } from './List'
 import {
   labelOptions,
   displayLabel,
   groupLabelList,
   getLabelGroupInfo,
-  isSelfLabel,
   buildAllLabelOptions,
-  unFlagSelfLabel,
 } from './util'
-import { classNames } from '@/lib/util'
 
 const EMPTY_ARR = []
 type SelectProps = React.ComponentProps<typeof Select>
 
-// TODO: Probably redundant
-export function LabelsGrid(props: LabelsProps) {
-  const {
-    id,
-    formId,
-    name,
-    className = '',
-    defaultLabels = EMPTY_ARR,
-    options = labelOptions,
-    disabled,
-    subject,
-    ...others
-  } = props
-  const allOptions = buildAllLabelOptions(defaultLabels, options)
-  const [current, setCurrent] = useState<string[]>(defaultLabels)
-
-  // update the current list when the current labels prop changes
-  // default labels are an array of strings so passing that as dependency to the useEffect hook will
-  // cause the current state to change everytime some other prop changes. the string conversion shields
-  // us from that. only caveat is that it won't work when the labels don't change just their order is changed
-  const defaultLabelsKey = defaultLabels.join('_')
-  useEffect(() => {
-    setCurrent(defaultLabels)
-  }, [defaultLabelsKey, subject])
-
-  const handleCheckboxChange = (opt: string) => {
-    // don't allow self labels to be changed
-    if (isSelfLabel(opt)) return
-    setCurrent((prev) => {
-      if (prev.includes(opt)) {
-        return prev.filter((item) => item !== opt)
-      } else {
-        return [...prev, opt]
-      }
-    })
-  }
-
-  const groupedLabelList = groupLabelList(allOptions)
-  // Sort by number of labels in each group so that the lists of labels take less vertical space in the UI
-  const sortedLabelList = Object.values(groupedLabelList).sort(
-    (a, b) => b.labels?.length - a.labels?.length,
-  )
-
-  return (
-    <Disclosure as="div">
-      <Disclosure.Button
-        className={`${disabled ? '' : 'cursor-pointer'}	${className}`}
-        disabled={disabled}
-        {...others}
-      >
-        {!current.length && <LabelListEmpty>(click to add)</LabelListEmpty>}
-        {current.map((label) => {
-          const labelGroup = getLabelGroupInfo(unFlagSelfLabel(label))
-          return (
-            <LabelChip key={label} style={{ color: labelGroup.color }}>
-              {displayLabel(label)}
-              <input type="hidden" name={name} value={label} />
-            </LabelChip>
-          )
-        })}
-      </Disclosure.Button>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-200"
-        enterFrom="opacity-0 translate-y-1"
-        enterTo="opacity-100 translate-y-0"
-        leave="transition ease-in duration-150"
-        leaveFrom="opacity-100 translate-y-0"
-        leaveTo="opacity-0 translate-y-1"
-      >
-        <Disclosure.Panel>
-          <div
-            className="flex flex-wrap flex-row gap-x-8 py-3 shadow-sm"
-            id={`${id}-staged-container`}
-          >
-            {sortedLabelList.map((group) => {
-              const groupTitle = group.strings.settings.en.name
-              return (
-                <div
-                  key={`label_group_${groupTitle}`}
-                  className={classNames('flex flex-col py-1 min-w-1/6')}
-                >
-                  <p style={{ color: group.color }}>{groupTitle}</p>
-                  {group.labels.map((opt, i) => {
-                    const labelText = typeof opt === 'string' ? opt : opt.id
-                    const cantChange = isSelfLabel(labelText)
-                    return (
-                      <div
-                        className={classNames(
-                          `flex flex-row pl-1`,
-                          cantChange ? 'opacity-75' : '',
-                        )}
-                        key={`label_${labelText}`}
-                      >
-                        <div className="flex h-6 items-center">
-                          <input
-                            id={`${id}-${groupTitle}-opt-${i}`}
-                            name={`${name}-staged`}
-                            type="checkbox"
-                            value={labelText}
-                            disabled={cantChange}
-                            checked={current.includes(labelText)}
-                            onChange={() => handleCheckboxChange(labelText)}
-                            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>
-                        <label
-                          htmlFor={`${id}-${groupTitle}-opt-${i}`}
-                          className="ml-1 text-sm leading-6 font-medium text-gray-900"
-                        >
-                          {displayLabel(labelText)}
-                        </label>
-                      </div>
-                    )
-                  })}
-                </div>
-              )
-            })}
-          </div>
-        </Disclosure.Panel>
-      </Transition>
-    </Disclosure>
-  )
-}
-
 export const LabelSelector = (props: LabelsProps) => {
   const {
     id,
     formId,
     name,
-    className = '',
     defaultLabels = EMPTY_ARR,
     options = labelOptions,
     disabled,
-    subject,
-    ...others
+    onChange,
   } = props
   const [selectedLabels, setSelectedLabels] = useState<SelectProps['value']>(
     defaultLabels.map((label) => ({
@@ -186,6 +48,7 @@ export const LabelSelector = (props: LabelsProps) => {
       <input
         type="hidden"
         name={name}
+        {...{ id, formId, disabled }}
         value={
           Array.isArray(selectedLabels)
             ? selectedLabels.map(({ label }) => label).join(',')
@@ -209,7 +72,12 @@ export const LabelSelector = (props: LabelsProps) => {
             </li>
           )
         }}
-        onChange={(value) => setSelectedLabels(value)}
+        onChange={(value) => {
+          setSelectedLabels(value)
+          onChange?.(
+            Array.isArray(value) ? value.map(({ value }) => value) : [],
+          )
+        }}
       />
     </>
   )
@@ -220,8 +88,7 @@ type LabelsProps = {
   formId: string
   name: string
   disabled?: boolean
-  className?: string
   defaultLabels?: string[]
   options?: string[]
-  subject?: string
+  onChange?: (labels: string[]) => void
 }
diff --git a/components/mod-event/EventList.tsx b/components/mod-event/EventList.tsx
index cdd9f23f..fd01eb9f 100644
--- a/components/mod-event/EventList.tsx
+++ b/components/mod-event/EventList.tsx
@@ -1,14 +1,24 @@
-import { ModEventListQueryOptions, useModEventList } from './useModEventList'
+import {
+  EventListState,
+  FIRST_EVENT_TIMESTAMP,
+  formatDateForInput,
+  ModEventListQueryOptions,
+  useModEventList,
+} from './useModEventList'
 import { LoadMoreButton } from '@/common/LoadMoreButton'
 import { ModEventItem } from './EventItem'
 import { Dropdown } from '@/common/Dropdown'
-import { MOD_EVENT_TITLES } from './constants'
-import {
-  ArchiveBoxXMarkIcon,
-  CheckIcon,
-  ChevronDownIcon,
-} from '@heroicons/react/20/solid'
+import { MOD_EVENTS, MOD_EVENT_TITLES } from './constants'
+import { ArchiveBoxXMarkIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
 import { getSubjectTitle } from './helpers/subject'
+import { useState } from 'react'
+import { Checkbox, FormLabel, Input } from '@/common/forms'
+import { ActionButton } from '@/common/buttons'
+import { FunnelIcon as FunnelEmptyIcon } from '@heroicons/react/24/outline'
+import { FunnelIcon as FunnelFilledIcon } from '@heroicons/react/24/solid'
+import { reasonTypeOptions } from '@/reports/helpers/getType'
+import Select from 'react-tailwindcss-select'
+import { LabelSelector } from '@/common/labels/Grid'
 
 const Header = ({
   subjectTitle,
@@ -59,35 +69,83 @@ export const ModEventList = (
 ) => {
   const {
     types,
-    setTypes,
+    reportTypes,
+    addedLabels,
+    removedLabels,
     includeAllUserRecords,
-    setIncludeAllUserRecords,
     modEvents,
     fetchMoreModEvents,
     hasMoreModEvents,
     isInitialLoadingModEvents,
+    hasFilter,
+    commentFilter,
+    toggleCommentFilter,
+    setCommentFilterKeyword,
+    createdBy,
+    subject,
+    oldestFirst,
+    createdAfter,
+    createdBefore,
+    changeListFilter,
+    resetListFilters,
   } = useModEventList(props)
+
+  const [showFiltersPanel, setShowFiltersPanel] = useState(false)
   const isEntireHistoryView = !props.subject && !props.createdBy
   const subjectTitle = getSubjectTitle(modEvents?.[0]?.subject)
   const noEvents = modEvents.length === 0 && !isInitialLoadingModEvents
   const isShowingEventsByCreator = !!props.createdBy
   return (
-    <div>
+    <div className="mr-1">
       <div className="flex flex-row justify-between items-center">
         {!isEntireHistoryView ? (
           <Header
             {...{
               subjectTitle,
               includeAllUserRecords,
-              setIncludeAllUserRecords,
+              setIncludeAllUserRecords: (value) =>
+                changeListFilter({
+                  field: 'includeAllUserRecords',
+                  value,
+                }),
               isShowingEventsByCreator,
             }}
           />
         ) : (
           <h4 className="font-medium text-gray-700">Moderation event stream</h4>
         )}
-        <TypeFilter setSelectedTypes={setTypes} selectedTypes={types} />
+        <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 && (
+        <EventFilterPanel
+          {...{
+            types,
+            reportTypes,
+            addedLabels,
+            removedLabels,
+            commentFilter,
+            toggleCommentFilter,
+            setCommentFilterKeyword,
+            createdBy,
+            subject,
+            oldestFirst,
+            createdAfter,
+            createdBefore,
+            changeListFilter,
+          }}
+        />
+      )}
       <div>
         {noEvents ? (
           <div className="text-gray-500 text-center py-4 shadow rounded my-4 items-center justify-center flex flex-col">
@@ -95,7 +153,11 @@ export const ModEventList = (
             No moderation events found.
             {!!types.length && (
               <p className="text-xs italic pt-2">
-                <a className="underline" href="#" onClick={() => setTypes([])}>
+                <a
+                  className="underline"
+                  href="#"
+                  onClick={() => resetListFilters()}
+                >
                   Clear all filters
                 </a>{' '}
                 to see all events
@@ -126,70 +188,291 @@ export const ModEventList = (
   )
 }
 
-const TypeFilter = ({
-  selectedTypes,
-  setSelectedTypes,
-}: {
-  selectedTypes: string[]
-  setSelectedTypes: (type: string[]) => void
-}) => {
+const EventFilterPanel = ({
+  types,
+  reportTypes,
+  addedLabels,
+  removedLabels,
+  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) => {
-    const newTypes = selectedTypes.includes(type)
-      ? selectedTypes.filter((t) => t !== type)
-      : [...selectedTypes, type]
-    setSelectedTypes(newTypes)
-  }
-
-  let selectedText = 'Filter by type'
-
-  if (selectedTypes.length === 1) {
-    selectedText = MOD_EVENT_TITLES[selectedTypes[0]]
-  } else if (selectedTypes.length > 1) {
-    selectedText = `${selectedTypes.length} selected`
+    if (type === 'all') {
+      if (types.length === allTypes.length) {
+        changeListFilter({ field: 'types', value: [] })
+      } else {
+        changeListFilter({
+          field: 'types',
+          value: allTypes.map(([type]) => type),
+        })
+      }
+      return
+    }
+    const newTypes = types.includes(type)
+      ? types.filter((t) => t !== type)
+      : [...types, type]
+    changeListFilter({ field: 'types', value: newTypes })
   }
 
   return (
-    <Dropdown
-      className="inline-flex items-center rounded-md border border-gray-300 bg-white px-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
-      items={[
-        {
-          id: 'all',
-          text: (
-            <span className="flex flex-row items-center">
-              {!selectedTypes.length && (
-                <CheckIcon
-                  className="mr-1 h-5 w-5 text-violet-200 hover:text-violet-100"
-                  aria-hidden="true"
-                />
-              )}
-              All
-            </span>
-          ),
-          onClick: () => setSelectedTypes([]),
-        },
-        ...Object.entries(MOD_EVENT_TITLES).map(([type, title]) => ({
-          id: title,
-          text: (
-            <span className="flex flex-row items-center">
-              {(selectedTypes.includes(type) || !selectedTypes.length) && (
-                <CheckIcon
-                  className="mr-1 h-5 w-5 text-violet-200 hover:text-violet-100"
-                  aria-hidden="true"
+    <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"
+              />
+              <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"
                 />
+                <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"
+            />
+            <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,
+                })
+              }
+              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"
+          >
+            <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={formatDateForInput(new Date())}
+            />
+          </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={formatDateForInput(new Date())}
+            />
+          </FormLabel>
+        </div>
+      </div>
+      <div className="flex-row flex gap-2 mt-2">
+        {types.includes(MOD_EVENTS.LABEL) && (
+          <>
+            <FormLabel label="Added Labels" className="flex-1 max-w-sm">
+              <LabelSelector
+                id="addedLabels"
+                name="addedLabels"
+                formId=""
+                defaultLabels={[]}
+                onChange={(value) =>
+                  changeListFilter({ field: 'addedLabels', value })
+                }
+              />
+            </FormLabel>
+
+            <FormLabel label="Removed Labels" className="flex-1 max-w-sm">
+              <LabelSelector
+                id="removedLabels"
+                name="removedLabels"
+                formId=""
+                defaultLabels={[]}
+                onChange={(value) =>
+                  changeListFilter({ field: 'removedLabels', value })
+                }
+              />
+            </FormLabel>
+          </>
+        )}
+
+        {types.includes(MOD_EVENTS.REPORT) && (
+          <FormLabel
+            label="Reason"
+            htmlFor="reasonType"
+            className="flex-1 max-w-sm"
+          >
+            <Select
+              isMultiple
+              isSearchable
+              primaryColor=""
+              value={reportTypes.map((value) => ({
+                value,
+                label: reasonTypeOptions[value],
+              }))}
+              options={Object.entries(reasonTypeOptions).map(
+                ([value, label]) => ({
+                  label,
+                  value,
+                }),
               )}
-              {title}
-            </span>
-          ),
-          onClick: () => toggleType(type),
-        })),
-      ]}
-      rightAligned
-    >
-      {selectedText}
-      <ChevronDownIcon
-        className="ml-2 -mr-1 h-5 w-5 text-violet-200 hover:text-violet-100"
-        aria-hidden="true"
-      />
-    </Dropdown>
+              onChange={(value) =>
+                changeListFilter({
+                  field: 'reportTypes',
+                  value: Array.isArray(value) ? value.map((v) => v.value) : [],
+                })
+              }
+            />
+          </FormLabel>
+        )}
+      </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 692c78d7..92f9f36d 100644
--- a/components/mod-event/useModEventList.tsx
+++ b/components/mod-event/useModEventList.tsx
@@ -1,8 +1,10 @@
 import { useInfiniteQuery } from '@tanstack/react-query'
 import client from '@/lib/client'
-import { useContext, useState } from 'react'
+import { useContext, useEffect, useReducer, useState } from 'react'
 import { AuthContext } from '@/shell/AuthContext'
 import { ComAtprotoAdminQueryModerationEvents } from '@atproto/api'
+import { MOD_EVENT_TITLES } from './constants'
+import { endOfDay } from 'date-fns'
 
 export type ModEventListQueryOptions = {
   queryOptions?: {
@@ -10,33 +12,176 @@ export type ModEventListQueryOptions = {
   }
 }
 
+type CommentFilter = {
+  enabled: boolean
+  keyword: string
+}
+
+// Since we use default browser's date picker, we need to format the date to the correct format
+// More details here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
+export const formatDateForInput = (date: Date) => {
+  return date.toISOString().split('.')[0]
+}
+
+export const FIRST_EVENT_TIMESTAMP = '2022-11-01T00:00'
+const allTypes = Object.keys(MOD_EVENT_TITLES)
+const initialListState = {
+  types: allTypes,
+  includeAllUserRecords: false,
+  commentFilter: { enabled: false, keyword: '' },
+  createdBy: undefined,
+  subject: undefined,
+  oldestFirst: false,
+  createdBefore: formatDateForInput(endOfDay(new Date())),
+  createdAfter: FIRST_EVENT_TIMESTAMP,
+  reportTypes: [],
+  addedLabels: [],
+  removedLabels: [],
+}
+
+// The 2 fields need overriding because in the initialState, they are set as undefined so the alternative string type is not accepted without override
+export type EventListState = Omit<
+  typeof initialListState,
+  'subject' | 'createdBy'
+> & {
+  subject?: string
+  createdBy?: string
+  reportTypes: string[]
+  addedLabels: string[]
+  removedLabels: string[]
+}
+
+type EventListFilterPayload =
+  | { field: 'types'; value: string[] }
+  | { field: 'includeAllUserRecords'; value: boolean }
+  | { field: 'commentFilter'; value: CommentFilter }
+  | { field: 'createdBy'; value: string | undefined }
+  | { field: 'subject'; value: string | undefined }
+  | { field: 'oldestFirst'; value: boolean }
+  | { field: 'createdBefore'; value: string }
+  | { field: 'createdAfter'; value: string }
+  | { field: 'reportTypes'; value: string[] }
+  | { field: 'addedLabels'; value: string[] }
+  | { field: 'removedLabels'; value: string[] }
+
+type EventListAction =
+  | {
+      type: 'SET_FILTER'
+      payload: EventListFilterPayload
+    }
+  | {
+      type: 'RESET'
+    }
+
+const eventListReducer = (state: EventListState, action: EventListAction) => {
+  switch (action.type) {
+    case 'SET_FILTER':
+      // when updating the subject, if the value is the same as the current state, don't update
+      if (
+        action.payload.field === 'subject' &&
+        action.payload.value === state.subject
+      ) {
+        return state
+      }
+      return { ...state, [action.payload.field]: action.payload.value }
+    case 'RESET':
+      return initialListState
+    default:
+      return state
+  }
+}
+
 export const useModEventList = (
   props: { subject?: string; createdBy?: string } & ModEventListQueryOptions,
 ) => {
   const { isLoggedIn } = useContext(AuthContext)
-  const [types, setTypes] = useState<string[]>([])
-  const [includeAllUserRecords, setIncludeAllUserRecords] =
-    useState<boolean>(false)
+  const [listState, dispatch] = useReducer(eventListReducer, initialListState)
+
+  const setCommentFilter = (value: CommentFilter) => {
+    dispatch({ type: 'SET_FILTER', payload: { field: 'commentFilter', value } })
+  }
+
+  useEffect(() => {
+    dispatch({
+      type: 'SET_FILTER',
+      payload: { field: 'subject', value: props.subject },
+    })
+  }, [props.subject])
+
+  useEffect(() => {
+    if (props.createdBy !== listState.createdBy) {
+      dispatch({
+        type: 'SET_FILTER',
+        payload: { field: 'createdBy', value: props.createdBy },
+      })
+    }
+  }, [props.createdBy])
 
   const results = useInfiniteQuery({
     enabled: isLoggedIn,
-    queryKey: ['modEventList', { props, types, includeAllUserRecords }],
+    queryKey: ['modEventList', { listState }],
     queryFn: async ({ pageParam }) => {
+      const {
+        types,
+        includeAllUserRecords,
+        commentFilter,
+        createdBy,
+        subject,
+        oldestFirst,
+        createdBefore,
+        createdAfter,
+        addedLabels,
+        removedLabels,
+        reportTypes,
+      } = listState
       const queryParams: ComAtprotoAdminQueryModerationEvents.QueryParams = {
         cursor: pageParam,
         includeAllUserRecords,
       }
 
-      if (props.subject?.trim()) {
-        queryParams.subject = props.subject.trim()
+      if (subject?.trim()) {
+        queryParams.subject = subject.trim()
+      }
+
+      if (createdBy?.trim()) {
+        queryParams.createdBy = createdBy
       }
 
-      if (props.createdBy?.trim()) {
-        queryParams.createdBy = props.createdBy
+      if (createdAfter) {
+        queryParams.createdAfter = new Date(createdAfter).toISOString()
       }
 
-      if (types.filter(Boolean).length) {
-        queryParams.types = types.filter(Boolean)
+      if (createdBefore) {
+        queryParams.createdBefore = new Date(createdBefore).toISOString()
+      }
+
+      if (reportTypes.length) {
+        queryParams.reportTypes = reportTypes
+      }
+
+      if (addedLabels.length) {
+        queryParams.addedLabels = addedLabels
+      }
+
+      if (removedLabels.length) {
+        queryParams.removedLabels = removedLabels
+      }
+
+      const filterTypes = types.filter(Boolean)
+      if (filterTypes.length < allTypes.length && filterTypes.length > 0) {
+        queryParams.types = filterTypes
+      }
+
+      if (oldestFirst) {
+        queryParams.sortDirection = 'asc'
+      }
+
+      if (commentFilter.enabled) {
+        queryParams.hasComment = true
+
+        if (commentFilter.keyword) {
+          queryParams.comment = commentFilter.keyword
+        }
       }
 
       return await getModerationEvents(queryParams)
@@ -45,16 +190,45 @@ export const useModEventList = (
     ...(props.queryOptions || {}),
   })
 
+  const hasFilter =
+    (listState.types.length > 0 &&
+      listState.types.length !== allTypes.length) ||
+    listState.includeAllUserRecords ||
+    listState.commentFilter.enabled ||
+    listState.createdBy ||
+    listState.subject ||
+    listState.oldestFirst ||
+    listState.reportTypes.length > 0 ||
+    listState.addedLabels.length > 0 ||
+    listState.removedLabels.length > 0
+
   return {
-    types,
-    setTypes,
-    includeAllUserRecords,
-    setIncludeAllUserRecords,
+    // Data from react-query
     modEvents: results.data?.pages.map((page) => page.events).flat() || [],
     fetchMoreModEvents: results.fetchNextPage,
     hasMoreModEvents: results.hasNextPage,
     refetchModEvents: results.refetch,
     isInitialLoadingModEvents: results.isInitialLoading,
+
+    // Helper functions to mutate state
+    toggleCommentFilter: () => {
+      if (listState.commentFilter.enabled) {
+        return setCommentFilter({ enabled: false, keyword: '' })
+      }
+      return setCommentFilter({ enabled: true, keyword: '' })
+    },
+    setCommentFilterKeyword: (keyword: string) => {
+      setCommentFilter({ enabled: true, keyword })
+    },
+    changeListFilter: (payload: EventListFilterPayload) =>
+      dispatch({ type: 'SET_FILTER', payload: payload }),
+    resetListFilters: () => dispatch({ type: 'RESET' }),
+
+    // State data
+    ...listState,
+
+    // Derived data from state
+    hasFilter,
   }
 }
 
@@ -69,4 +243,4 @@ async function getModerationEvents(
     { headers: client.adminHeaders() },
   )
   return data
-}
+}
\ No newline at end of file
diff --git a/components/reports/ReportPanel.tsx b/components/reports/ReportPanel.tsx
index bfbf7884..61a8b7ac 100644
--- a/components/reports/ReportPanel.tsx
+++ b/components/reports/ReportPanel.tsx
@@ -7,6 +7,7 @@ import { RecordCard, RepoCard } from '../common/RecordCard'
 import { PropsOf } from '@/lib/types'
 import { queryClient } from 'components/QueryClient'
 import { SubjectSwitchButton } from '@/common/SubjectSwitchButton'
+import { reasonTypeOptions } from './helpers/getType'
 
 export function ReportPanel(
   props: PropsOf<typeof ActionPanel> & {
@@ -149,16 +150,6 @@ function Form(props: {
   )
 }
 
-const reasonTypeOptions = {
-  [ComAtprotoModerationDefs.REASONSPAM]: 'Spam',
-  [ComAtprotoModerationDefs.REASONVIOLATION]: 'Violation of Terms',
-  [ComAtprotoModerationDefs.REASONMISLEADING]: 'Misleading',
-  [ComAtprotoModerationDefs.REASONSEXUAL]: 'Sexual',
-  [ComAtprotoModerationDefs.REASONRUDE]: 'Rude or Hassment',
-  [ComAtprotoModerationDefs.REASONAPPEAL]: 'Appeal',
-  [ComAtprotoModerationDefs.REASONOTHER]: 'Other Reason',
-}
-
 export type ReportFormValues = {
   subject: string
   reasonType: string
diff --git a/components/reports/helpers/getType.ts b/components/reports/helpers/getType.ts
index 04372c70..b2705581 100644
--- a/components/reports/helpers/getType.ts
+++ b/components/reports/helpers/getType.ts
@@ -1,6 +1,18 @@
+import { ComAtprotoModerationDefs } from '@atproto/api'
+
 export function getType(obj: unknown): string {
   if (obj && typeof obj['$type'] === 'string') {
     return obj['$type']
   }
   return ''
 }
+
+export const reasonTypeOptions = {
+  [ComAtprotoModerationDefs.REASONSPAM]: 'Spam',
+  [ComAtprotoModerationDefs.REASONVIOLATION]: 'Violation of Terms',
+  [ComAtprotoModerationDefs.REASONMISLEADING]: 'Misleading',
+  [ComAtprotoModerationDefs.REASONSEXUAL]: 'Sexual',
+  [ComAtprotoModerationDefs.REASONRUDE]: 'Rude or Hassment',
+  [ComAtprotoModerationDefs.REASONAPPEAL]: 'Appeal',
+  [ComAtprotoModerationDefs.REASONOTHER]: 'Other Reason',
+}
diff --git a/package.json b/package.json
index 763e98ab..1088804c 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "e2e:run": "$(yarn bin)/cypress run"
   },
   "dependencies": {
-    "@atproto/api": "0.9.2",
+    "@atproto/api": "0.9.6",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
     "@tanstack/react-query": "^4.22.0",
diff --git a/yarn.lock b/yarn.lock
index 1a1a1bb6..9f31c25a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@atproto/api@0.9.2":
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.9.2.tgz#acb70a0c0f658eb13b3ee759c700486de820c49e"
-  integrity sha512-Z1dJM3BER8XsXjw6b6WtbFB1/sf/JXHIGR6tmuOB1AZ1/CLAmBpRN/OAZYz3GD0EHnkzlnjOh9B6FJVfdLKXUQ==
+"@atproto/api@0.9.6":
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.9.6.tgz#768d8f32261199f254883225917ef051c2027c25"
+  integrity sha512-qbBTskuPTyW2VPVptErHtf9pRbZESULmdk9MQJ/Qx2fvtddTF3iksBSyIUySHvnnO0bIDNoBFXY0RZnIyknX0g==
   dependencies:
     "@atproto/common-web" "^0.2.3"
     "@atproto/lexicon" "^0.3.1"
@@ -4366,9 +4366,9 @@ tiny-invariant@^1.2.0:
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
 tlds@^1.234.0:
-  version "1.248.0"
-  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.248.0.tgz#65bf56eee6d0ace1e918fbc653227ef18a9ddf8d"
-  integrity sha512-noj0KdpWTBhwsKxMOXk0rN9otg4kTgLm4WohERRHbJ9IY+kSDKr3RmjitaQ3JFzny+DyvBOQKlFZhp0G0qNSfg==
+  version "1.249.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.249.0.tgz#5e10f3428923fef27fa47867770e0aa11b160a35"
+  integrity sha512-PfcE+oqaEhs0U3RDNg4uGg37793cGvlK6+aLAetwR0ImFyV3R2ts1KvU2RfJdtoLn7IFnUEftFFz4br5Wr3caA==
 
 tmp@~0.2.1:
   version "0.2.1"