diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 191fdc57..5252b091 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 0.0.57
+
+### Patch Changes
+
+- add filter by user name
+
 ## 0.0.56
 
 ### Patch Changes
diff --git a/packages/components/__generated__/ActivityLogsPaginationQuery.graphql.ts b/packages/components/__generated__/ActivityLogsPaginationQuery.graphql.ts
index 34eed2fd..382ff1f3 100644
--- a/packages/components/__generated__/ActivityLogsPaginationQuery.graphql.ts
+++ b/packages/components/__generated__/ActivityLogsPaginationQuery.graphql.ts
@@ -14,6 +14,7 @@ import { FragmentRefs } from 'relay-runtime'
 export type ActivityLogsPaginationQuery$variables = {
   count?: number | null | undefined
   cursor?: string | null | undefined
+  userName?: string | null | undefined
 }
 export type ActivityLogsPaginationQuery$data = {
   readonly ' $fragmentSpreads': FragmentRefs<'ActivityLogsFragment'>
diff --git a/packages/components/modules/activity-log/ActivityLogComponent/index.tsx b/packages/components/modules/activity-log/ActivityLogComponent/index.tsx
index 5f7a3b81..611537c2 100644
--- a/packages/components/modules/activity-log/ActivityLogComponent/index.tsx
+++ b/packages/components/modules/activity-log/ActivityLogComponent/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { ChangeEventHandler, FC, useState, useTransition } from 'react'
+import { FC, useState, useTransition } from 'react'
+import type { ChangeEvent } from 'react'
 
 import { Searchbar } from '@baseapp-frontend/design-system'
 
@@ -19,14 +20,27 @@ const ActivityLogComponent: FC<ActivityLogComponentProps> = ({
   LogGroupsProps,
 }) => {
   const [selectedFilters, setSelectedFilters] = useState<EventFilterOption[]>(['All'])
-  const [isPending] = useTransition()
-  const { control, watch } = useForm({ defaultValues: { search: '' } })
+  const [isPending, startTransition] = useTransition()
+  const { control, reset, watch } = useForm({ defaultValues: { search: '' } })
   const searchValue = watch('search')
-  const { logGroups, loadNext, hasNext, isLoadingNext } = useActivityLogs(queryRef)
-  // TODO: use startTransition from useTransition when triggering a refetch
-  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = () => {}
-  const handleSearchClear = () => {}
+
+  const { logGroups, loadNext, hasNext, isLoadingNext, refetch } = useActivityLogs(queryRef)
+
+  const handleSearchClear = () => {
+    startTransition(() => {
+      reset()
+      refetch({ userName: '' })
+    })
+  }
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value || ''
+    startTransition(() => {
+      refetch({ userName: value, count: 10, cursor: null }, { fetchPolicy: 'store-and-network' })
+    })
+  }
+
   const emptyLogsList = logGroups.length === 0
+
   return (
     <Box p={2} justifyContent="center" minWidth="100%" display="flex" alignItems="center">
       <Box justifyContent="center" maxWidth={600} width="100%" mx="auto">
diff --git a/packages/components/modules/activity-log/graphql/queries/ActivityLogsFragment.ts b/packages/components/modules/activity-log/graphql/queries/ActivityLogsFragment.ts
index 5a9bcbeb..f0c7d70d 100644
--- a/packages/components/modules/activity-log/graphql/queries/ActivityLogsFragment.ts
+++ b/packages/components/modules/activity-log/graphql/queries/ActivityLogsFragment.ts
@@ -9,8 +9,13 @@ import { LogGroup } from '../../ActivityLogComponent/LogGroups/types'
 export const ActivityLogsFragmentQuery = graphql`
   fragment ActivityLogsFragment on Query
   @refetchable(queryName: "ActivityLogsPaginationQuery")
-  @argumentDefinitions(count: { type: "Int", defaultValue: 10 }, cursor: { type: "String" }) {
-    activityLogs(first: $count, after: $cursor) @connection(key: "ActivityLogs_activityLogs") {
+  @argumentDefinitions(
+    count: { type: "Int", defaultValue: 10 }
+    cursor: { type: "String" }
+    userName: { type: "String", defaultValue: null }
+  ) {
+    activityLogs(first: $count, after: $cursor, userName: $userName)
+      @connection(key: "ActivityLogs_activityLogs", filters: ["userName"]) {
       edges {
         node {
           id
diff --git a/packages/components/package.json b/packages/components/package.json
index 8b9fa855..07103bfa 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,