diff --git a/agenta-web/src/components/Filters/EditColumns.tsx b/agenta-web/src/components/Filters/EditColumns.tsx
new file mode 100644
index 0000000000..2e4eb894e6
--- /dev/null
+++ b/agenta-web/src/components/Filters/EditColumns.tsx
@@ -0,0 +1,110 @@
+import React, {useState} from "react"
+import {Button, Dropdown, Space, Checkbox} from "antd"
+import {createUseStyles} from "react-jss"
+import {Columns} from "@phosphor-icons/react"
+import {ColumnsType} from "antd/es/table"
+import type {MenuProps} from "antd"
+
+const useStyles = createUseStyles((theme) => ({
+    dropdownMenu: {
+        "&>.ant-dropdown-menu-item": {
+            "& .anticon-check": {
+                display: "none",
+            },
+        },
+        "&>.ant-dropdown-menu-item-selected": {
+            "&:not(:hover)": {
+                backgroundColor: "transparent !important",
+            },
+            "& .anticon-check": {
+                display: "inline-flex !important",
+            },
+        },
+    },
+    button: {
+        display: "flex",
+        alignItems: "center",
+    },
+}))
+
+interface EditColumnsProps {
+    isOpen: boolean
+    handleOpenChange: (open: boolean) => void
+    selectedKeys: string[]
+    columns: ColumnsType<any>
+    onChange: (key: string) => void
+    excludes?: string[] // Array of column keys to exclude
+    buttonText?: string
+}
+
+const EditColumns: React.FC<EditColumnsProps> = ({
+    isOpen,
+    handleOpenChange,
+    selectedKeys,
+    columns,
+    onChange,
+    excludes = [],
+    buttonText = "Edit Columns",
+}) => {
+    const classes = useStyles()
+    const [open, setOpen] = useState(isOpen)
+
+    const handleDropdownChange = (newOpen: boolean) => {
+        setOpen(newOpen)
+        if (!newOpen) handleOpenChange(newOpen)
+    }
+
+    const generateEditItems = (): MenuProps["items"] => {
+        return columns
+            .filter((col) => !excludes.includes(col.key as string))
+            .flatMap((col) => [
+                {
+                    key: col.key as React.Key,
+                    label: (
+                        <Space onClick={(e) => e.stopPropagation()}>
+                            <Checkbox
+                                value={col.key}
+                                checked={!selectedKeys.includes(col.key as string)}
+                                onChange={() => onChange(col.key as string)}
+                            />
+                            {col.title as string}
+                        </Space>
+                    ),
+                },
+                ...(("children" in col &&
+                    col.children?.map((child) => ({
+                        key: child.key as React.Key,
+                        label: (
+                            <Space className="ml-4" onClick={(e) => e.stopPropagation()}>
+                                <Checkbox
+                                    value={child.key}
+                                    checked={!selectedKeys.includes(child.key as string)}
+                                    onChange={() => onChange(child.key as string)}
+                                />
+                                {child.title as string}
+                            </Space>
+                        ),
+                    }))) ||
+                    []),
+            ])
+    }
+
+    return (
+        <Dropdown
+            trigger={["click"]}
+            open={open}
+            onOpenChange={handleDropdownChange}
+            menu={{
+                selectedKeys,
+                items: generateEditItems(),
+                className: classes.dropdownMenu,
+            }}
+        >
+            <Button icon={<Columns size={14} />} className={classes.button}>
+                {buttonText}
+            </Button>
+        </Dropdown>
+    )
+}
+
+export default EditColumns
diff --git a/agenta-web/src/components/Filters/Filters.tsx b/agenta-web/src/components/Filters/Filters.tsx
new file mode 100644
index 0000000000..f48313cc5d
--- /dev/null
+++ b/agenta-web/src/components/Filters/Filters.tsx
@@ -0,0 +1,244 @@
+import React, {useState} from "react"
+import {Filter, JSSTheme} from "@/lib/Types"
+import {ArrowCounterClockwise, CaretDown, Funnel, Plus, Trash, X} from "@phosphor-icons/react"
+import {Button, Divider, Input, Popover, Select, Space, Typography} from "antd"
+import {createUseStyles} from "react-jss"
+import {useUpdateEffect} from "usehooks-ts"
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    popover: {
+        "& .ant-popover-inner": {
+            width: "600px !important",
+            padding: `0px ${theme.paddingXS}px ${theme.paddingXS}px ${theme.padding}px`,
+        },
+    },
+    filterHeading: {
+        fontSize: theme.fontSizeHeading5,
+        lineHeight: theme.lineHeightHeading5,
+        fontWeight: theme.fontWeightMedium,
+    },
+    filterContainer: {
+        padding: 8,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "start",
+        borderRadius: theme.borderRadius,
+        backgroundColor: "#f5f7fa",
+        marginTop: 8,
+    },
+}))
+
+type Props = {
+    filterData?: Filter[]
+    columns: {value: string; label: string}[]
+    onApplyFilter: (filters: Filter[]) => void
+    onClearFilter: (filters: Filter[]) => void
+}
+
+const Filters: React.FC<Props> = ({filterData, columns, onApplyFilter, onClearFilter}) => {
+    const classes = useStyles()
+    const emptyFilter = [{key: "", operator: "", value: ""}] as Filter[]
+
+    const [filter, setFilter] = useState<Filter[]>(emptyFilter)
+    const [isFilterOpen, setIsFilterOpen] = useState(false)
+
+    useUpdateEffect(() => {
+        if (filterData && filterData.length > 0) {
+            setFilter(filterData)
+        } else {
+            setFilter(emptyFilter)
+        }
+    }, [filterData])
+
+    const operators = [
+        {value: "contains", lable: "contains"},
+        {value: "matches", lable: "matches"},
+        {value: "like", lable: "like"},
+        {value: "startswith", lable: "startswith"},
+        {value: "endswith", lable: "endswith"},
+        {value: "exists", lable: "exists"},
+        {value: "not_exists", lable: "not exists"},
+        {value: "eq", lable: "="},
+        {value: "neq", lable: "!="},
+        {value: "gt", lable: ">"},
+        {value: "lt", lable: "<"},
+        {value: "gte", lable: ">="},
+        {value: "lte", lable: "<="},
+    ]
+
+    const filteredOptions = columns.filter(
+        (col) => !filter.some((item, i) => item.key === col.value),
+    )
+
+    const onFilterChange = ({
+        columnName,
+        value,
+        idx,
+    }: {
+        columnName: keyof Filter
+        value: any
+        idx: number
+    }) => {
+        const newFilters = [...filter]
+        newFilters[idx][columnName as keyof Filter] = value
+        setFilter(newFilters)
+    }
+
+    const onDeleteFilter = (index: number) => {
+        setFilter(filter.filter((_, idx) => idx !== index))
+    }
+
+    const addNestedFilter = () => {
+        setFilter([...filter, {key: "", operator: "", value: ""}])
+    }
+
+    const clearFilter = () => {
+        setFilter(emptyFilter)
+        onClearFilter(emptyFilter)
+    }
+
+    const applyFilter = () => {
+        const sanitizedFilters = filter.filter(({key, operator}) => key && operator)
+
+        onApplyFilter(sanitizedFilters)
+        setIsFilterOpen(false)
+    }
+
+    return (
+        <Popover
+            title={null}
+            trigger="click"
+            overlayClassName={classes.popover}
+            arrow={false}
+            onOpenChange={() => setIsFilterOpen(false)}
+            open={isFilterOpen}
+            placement="bottomLeft"
+            content={
+                <section>
+                    <div className="h-[44px] flex items-center justify-between">
+                        <Typography.Text className={classes.filterHeading}>Filter</Typography.Text>
+                    </div>
+
+                    <div className="-ml-4 -mr-2">
+                        <Divider className="!m-0" />
+                    </div>
+
+                    <div className={classes.filterContainer}>
+                        {filter.map((item, idx) => (
+                            <Space key={idx}>
+                                <p className={`w-[60px] text-end`}>{idx == 0 ? "Where" : "And"}</p>
+
+                                <Select
+                                    showSearch
+                                    labelRender={(label) => (!label.value ? "Column" : label.label)}
+                                    style={{width: 100}}
+                                    popupMatchSelectWidth={220}
+                                    suffixIcon={<CaretDown size={14} />}
+                                    onChange={(value) =>
+                                        onFilterChange({columnName: "key", value, idx})
+                                    }
+                                    filterSort={(a, b) =>
+                                        (a?.label ?? "")
+                                            .toLowerCase()
+                                            .localeCompare((b?.label ?? "").toLowerCase())
+                                    }
+                                    filterOption={(input, option) =>
+                                        (option?.label ?? "")
+                                            .toLowerCase()
+                                            .includes(input.toLowerCase())
+                                    }
+                                    value={item.key}
+                                    options={filteredOptions.map((col) => ({
+                                        value: col.value,
+                                        label: col.label,
+                                    }))}
+                                />
+                                {item.key && (
+                                    <>
+                                        <Select
+                                            labelRender={(label) =>
+                                                !label.value ? "Condition" : label.label
+                                            }
+                                            style={{width: 95}}
+                                            suffixIcon={<CaretDown size={14} />}
+                                            onChange={(value) =>
+                                                onFilterChange({
+                                                    columnName: "operator",
+                                                    value,
+                                                    idx,
+                                                })
+                                            }
+                                            popupMatchSelectWidth={100}
+                                            value={item.operator}
+                                            options={operators.map((operator) => ({
+                                                value: operator.value,
+                                                label: operator.lable,
+                                            }))}
+                                        />
+
+                                        <Input
+                                            placeholder="Keyword"
+                                            className="w-[270px]"
+                                            value={item.value}
+                                            onChange={(e) =>
+                                                onFilterChange({
+                                                    columnName: "value",
+                                                    value: e.target.value,
+                                                    idx,
+                                                })
+                                            }
+                                        />
+                                    </>
+                                )}
+                                {filter.length > 1 && (
+                                    <Button
+                                        type="link"
+                                        icon={<Trash size={14} />}
+                                        onClick={() => onDeleteFilter(idx)}
+                                    />
+                                )}
+                            </Space>
+                        ))}
+
+                        <Button
+                            type="link"
+                            size="small"
+                            icon={<Plus size={14} />}
+                            onClick={addNestedFilter}
+                            className="mt-2"
+                        >
+                            Add conditions
+                        </Button>
+                    </div>
+
+                    <Space className="flex items-center justify-end mt-2">
+                        <Button type="link">Cancel</Button>
+                        <Button
+                            icon={<ArrowCounterClockwise size={14} className="mt-0.5" />}
+                            onClick={clearFilter}
+                        >
+                            Clear
+                        </Button>
+                        <Button
+                            type="primary"
+                            disabled={!filter[0]?.operator}
+                            onClick={applyFilter}
+                        >
+                            Apply
+                        </Button>
+                    </Space>
+                </section>
+            }
+        >
+            <Button
+                icon={<Funnel size={14} />}
+                onClick={() => setIsFilterOpen(true)}
+                className="flex items-center gap-2"
+            >
+                Filters {filter[0]?.operator && <X size={14} />}
+            </Button>
+        </Popover>
+    )
+}
+
+export default Filters
diff --git a/agenta-web/src/components/Filters/Sort.tsx b/agenta-web/src/components/Filters/Sort.tsx
new file mode 100644
index 0000000000..9dee076576
--- /dev/null
+++ b/agenta-web/src/components/Filters/Sort.tsx
@@ -0,0 +1,286 @@
+import React, {useState} from "react"
+import {CaretRight, Clock, Calendar} from "@phosphor-icons/react"
+import {DatePicker, Button, Typography, Divider, Popover} from "antd"
+import {JSSTheme, SortTypes} from "@/lib/Types"
+import dayjs, {Dayjs} from "dayjs"
+import type {SelectProps} from "antd"
+import {createUseStyles} from "react-jss"
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    title: {
+        fontSize: theme.fontSizeLG,
+        fontWeight: theme.fontWeightMedium,
+        padding: theme.paddingXS,
+    },
+    customDateContainer: {
+        flex: 1,
+        padding: theme.paddingXS,
+        gap: 16,
+        display: "flex",
+        flexDirection: "column",
+    },
+    popover: {
+        "& .ant-popover-inner": {
+            transition: "width 0.3s ease",
+            padding: 4,
+        },
+    },
+    popupItems: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: `5px ${theme.paddingContentHorizontal}px`,
+        gap: theme.marginXS,
+        borderRadius: theme.borderRadiusSM,
+        cursor: "pointer",
+        "&:hover": {
+            backgroundColor: theme.controlItemBgActive,
+        },
+    },
+    popupSelectedItem: {
+        backgroundColor: theme.controlItemBgActive,
+    },
+}))
+
+export type SortResult = {
+    type: "custom" | "standerd"
+    sorted: string
+    customRange?: {startTime: string; endTime: string}
+}
+
+type Props = {
+    onSortApply: ({
+        type,
+        sorted,
+        customRange,
+    }: {
+        type: "custom" | "standerd"
+        sorted: string
+        customRange?: {startTime: string; endTime: string}
+    }) => void
+    defaultSortValue: SortTypes
+}
+export type CustomTimeRange = {
+    startTime: Dayjs | null
+    endTime: Dayjs | null
+}
+
+const Sort: React.FC<Props> = ({onSortApply, defaultSortValue}) => {
+    const classes = useStyles()
+
+    const [sort, setSort] = useState<SortTypes>(defaultSortValue)
+    const [customTime, setCustomTime] = useState<CustomTimeRange>({startTime: null, endTime: null})
+    const [dropdownVisible, setDropdownVisible] = useState(false)
+    const [customOptionSelected, setCustomOptionSelected] = useState(
+        customTime.startTime == null ? false : true,
+    )
+
+    const apply = ({
+        sortData,
+        customRange,
+    }: {
+        sortData: SortTypes
+        customRange?: CustomTimeRange
+    }) => {
+        let sortedTime
+        let customRangeTime
+
+        if (sortData && sortData !== "custom" && sortData !== "all time") {
+            const now = dayjs().utc()
+
+            // Split the value into number and unit (e.g., "30 minutes" becomes ["30", "minutes"])
+            const [amount, unit] = (sortData as SortTypes).split(" ")
+            sortedTime = now
+                .subtract(parseInt(amount), unit as dayjs.ManipulateType)
+                .toISOString()
+                .split(".")[0]
+        } else if (customRange?.startTime && sortData == "custom") {
+            customRangeTime = {
+                startTime: customRange.startTime.toISOString().split(".")[0],
+                endTime: customRange.endTime?.toISOString().split(".")[0] as string,
+            }
+        } else if (sortData === "all time") {
+            sortedTime = "1970-01-01T00:00:00"
+        }
+
+        onSortApply({
+            type: sortData == "custom" ? "custom" : "standerd",
+            sorted: sortedTime as string,
+            customRange: customRangeTime,
+        })
+    }
+
+    const handleApplyCustomRange = () => {
+        if (customTime.startTime && customTime.endTime) {
+            apply({sortData: "custom", customRange: customTime})
+            setDropdownVisible(false)
+        }
+    }
+
+    const onSelectItem = (item: any) => {
+        setDropdownVisible(false)
+        setSort(item.value as SortTypes)
+        apply({sortData: item.value as SortTypes})
+
+        setTimeout(() => {
+            setCustomOptionSelected(false)
+        }, 500)
+
+        if (customTime.startTime) {
+            setCustomTime({startTime: null, endTime: null})
+        }
+    }
+
+    const options: SelectProps["options"] = [
+        {value: "30 minutes", label: "30 mins"},
+        {value: "1 hour", label: "1 hour"},
+        {value: "6 hours", label: "6 hours"},
+        {value: "24 hours", label: "24 hours"},
+        {value: "3 days", label: "3 days"},
+        {value: "7 days", label: "7 days"},
+        {value: "14 days", label: "14 days"},
+        {value: "1 month", label: "1 month"},
+        {value: "3 months", label: "3 months"},
+        {value: "all time", label: "All time"},
+    ]
+
+    return (
+        <>
+            <Popover
+                title={null}
+                trigger="click"
+                overlayClassName={`${classes.popover} ${customOptionSelected ? "!w-[536px]" : "!w-[256px]"} h-[345px]`}
+                arrow={false}
+                afterOpenChange={() => {
+                    if (sort == "custom" && customTime.startTime == null) {
+                        setSort(defaultSortValue)
+                        setCustomOptionSelected(false)
+                    }
+                }}
+                onOpenChange={() => setDropdownVisible(false)}
+                open={dropdownVisible}
+                placement="bottomLeft"
+                content={
+                    <section className="flex gap-2">
+                        <div className="flex-1">
+                            <div>
+                                {options.map((item) => (
+                                    <div
+                                        key={item.value}
+                                        onClick={() => onSelectItem(item)}
+                                        className={`${classes.popupItems} ${sort === item.value && classes.popupSelectedItem}`}
+                                    >
+                                        {item.label}
+                                    </div>
+                                ))}
+
+                                <div className="-ml-1 -mr-1.5">
+                                    <Divider className="!my-1" />
+                                </div>
+
+                                <div
+                                    className={`${classes.popupItems} ${sort === "custom" && classes.popupSelectedItem}`}
+                                    onClick={() => {
+                                        setCustomOptionSelected(true)
+                                        setSort("custom")
+                                    }}
+                                >
+                                    <Typography.Text className="flex items-center gap-2">
+                                        <Clock size={12} /> Define start and end time
+                                    </Typography.Text>
+                                    <CaretRight size={12} />
+                                </div>
+                            </div>
+                        </div>
+
+                        {customOptionSelected && (
+                            <>
+                                <Divider className="!m-0 !h-[340px]" type="vertical" />
+
+                                <div className="flex-1 flex flex-col justify-between">
+                                    <div>
+                                        <Typography.Text className={classes.title}>
+                                            Start and end time
+                                        </Typography.Text>
+
+                                        <div className={classes.customDateContainer}>
+                                            <div className="w-full flex flex-col gap-1">
+                                                <Typography.Text>Start time</Typography.Text>
+                                                <DatePicker
+                                                    showTime
+                                                    value={customTime.startTime}
+                                                    onChange={(date) =>
+                                                        setCustomTime({
+                                                            ...customTime,
+                                                            startTime: date,
+                                                        })
+                                                    }
+                                                    style={{width: "100%"}}
+                                                />
+                                            </div>
+
+                                            <div className="w-full flex flex-col gap-1">
+                                                <Typography.Text>End time</Typography.Text>
+                                                <DatePicker
+                                                    showTime
+                                                    value={customTime.endTime}
+                                                    onChange={(date) =>
+                                                        setCustomTime({
+                                                            ...customTime,
+                                                            endTime: date,
+                                                        })
+                                                    }
+                                                    style={{width: "100%"}}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="flex items-center justify-end gap-2 p-1">
+                                        <Button
+                                            onClick={() => {
+                                                setDropdownVisible(false)
+                                                setCustomTime({startTime: null, endTime: null})
+                                            }}
+                                        >
+                                            Cancel
+                                        </Button>
+                                        <Button
+                                            type="primary"
+                                            onClick={handleApplyCustomRange}
+                                            disabled={!customTime.startTime || !customTime.endTime}
+                                        >
+                                            Apply
+                                        </Button>
+                                    </div>
+                                </div>
+                            </>
+                        )}
+                    </section>
+                }
+            >
+                <Button
+                    icon={<Calendar size={14} className="mt-0.5" />}
+                    onClick={() => setDropdownVisible(true)}
+                    className="flex items-center gap-2"
+                >
+                    {sort ? (
+                        <>
+                            {sort === "custom" ? (
+                                "Custom date"
+                            ) : sort === "all time" ? (
+                                "All time"
+                            ) : (
+                                <>Last {sort}</>
+                            )}
+                        </>
+                    ) : (
+                        "Sort by Date"
+                    )}
+                </Button>
+            </Popover>
+        </>
+    )
+}
+
+export default Sort
diff --git a/agenta-web/src/components/pages/observability/drawer/TraceContent.tsx b/agenta-web/src/components/pages/observability/drawer/TraceContent.tsx
index daafc29f26..5e383af457 100644
--- a/agenta-web/src/components/pages/observability/drawer/TraceContent.tsx
+++ b/agenta-web/src/components/pages/observability/drawer/TraceContent.tsx
@@ -222,10 +222,10 @@ const TraceContent = ({activeTrace}: TraceContentProps) => {
                         </Typography.Text>
 
                         <Space>
-                            {!activeTrace.parent && activeTrace.refs?.application.id && (
+                            {!activeTrace.parent && activeTrace.refs?.application_id && (
                                 <Button
                                     className="flex items-center"
-                                    href={`/apps/${activeTrace.refs.application.id}/playground`}
+                                    href={`/apps/${activeTrace.refs.application_id}/playground`}
                                 >
                                     <Rocket size={14} />
                                     Open in playground
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index df47fd87bf..42224cf8eb 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -662,3 +662,41 @@ export interface HumanEvaluationListTableDataType {
     variant_revision_ids: string[]
     variantNames: string[]
 }
+
+export type Filter = {
+    key: string
+    operator: FilterConditions
+    value: string
+}
+
+export type FilterConditions =
+    | "contains"
+    | "matches"
+    | "like"
+    | "startswith"
+    | "endswith"
+    | "exists"
+    | "not_exists"
+    | "eq"
+    | "neq"
+    | "gt"
+    | "lt"
+    | "gte"
+    | "lte"
+    | "between"
+    | "in"
+    | ""
+
+export type SortTypes =
+    | "30 mins"
+    | "1 hour"
+    | "6 hour"
+    | "24 hour"
+    | "3 days"
+    | "7 days"
+    | "14 days"
+    | "1 month"
+    | "3 month"
+    | "all time"
+    | "custom"
+    | ""
diff --git a/agenta-web/src/lib/hooks/useTraces.ts b/agenta-web/src/lib/hooks/useTraces.ts
index 955ae8052a..f5c5bb72ee 100644
--- a/agenta-web/src/lib/hooks/useTraces.ts
+++ b/agenta-web/src/lib/hooks/useTraces.ts
@@ -54,5 +54,5 @@ export const useTraces = () => {
         fetchTraces()
     }, [])
 
-    return {traces, isLoadingTraces}
+    return {traces, isLoadingTraces, setIsLoadingTraces, setTraces}
 }
diff --git a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
index 4fc78c940a..c5f1972a75 100644
--- a/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/observability/index.tsx
@@ -5,23 +5,46 @@ import StatusRenderer from "@/components/pages/observability/components/StatusRe
 import TraceContent from "@/components/pages/observability/drawer/TraceContent"
 import TraceHeader from "@/components/pages/observability/drawer/TraceHeader"
 import TraceTree from "@/components/pages/observability/drawer/TraceTree"
+import Filters from "@/components/Filters/Filters"
+import Sort, {SortResult} from "@/components/Filters/Sort"
+import EditColumns from "@/components/Filters/EditColumns"
 import ResultTag from "@/components/ResultTag/ResultTag"
 import {ResizableTitle} from "@/components/ServerTable/components"
 import {useAppId} from "@/hooks/useAppId"
 import {useQueryParam} from "@/hooks/useQuery"
 import {formatCurrency, formatLatency, formatTokenUsage} from "@/lib/helpers/formatters"
-import {getNodeById} from "@/lib/helpers/observability_helpers"
-import {getStringOrJson} from "@/lib/helpers/utils"
+import {
+    buildNodeTree,
+    getNodeById,
+    observabilityTransformer,
+} from "@/lib/helpers/observability_helpers"
 import {useTraces} from "@/lib/hooks/useTraces"
-import {JSSTheme} from "@/lib/Types"
-import {_AgentaRootsResponse} from "@/services/observability/types"
+import {Filter, FilterConditions, JSSTheme, SortTypes} from "@/lib/Types"
+import {_AgentaRootsResponse, AgentaNodeDTO, AgentaTreeDTO} from "@/services/observability/types"
 import {SwapOutlined} from "@ant-design/icons"
-import {Space, Table, TableColumnType, Tag, Typography} from "antd"
+import {
+    Button,
+    Input,
+    Pagination,
+    Radio,
+    RadioChangeEvent,
+    Space,
+    Table,
+    TableColumnType,
+    Tag,
+    Typography,
+} from "antd"
 import {ColumnsType} from "antd/es/table"
 import dayjs from "dayjs"
 import {useRouter} from "next/router"
 import React, {useCallback, useEffect, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
+import {Export} from "@phosphor-icons/react"
+import {getAppValues} from "@/contexts/app.context"
+import {convertToCsv, downloadCsv} from "@/lib/helpers/fileManipulations"
+import {useUpdateEffect} from "usehooks-ts"
+import {getAgentaApiUrl, getStringOrJson} from "@/lib/helpers/utils"
+import axios from "axios"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     title: {
@@ -29,16 +52,31 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         fontWeight: theme.fontWeightMedium,
         lineHeight: theme.lineHeightHeading4,
     },
+    pagination: {
+        "& > .ant-pagination-options": {
+            order: -1,
+            marginRight: 8,
+        },
+    },
 }))
 
 interface Props {}
 
+type TraceTabTypes = "tree" | "node" | "chat"
+
 const ObservabilityDashboard = ({}: Props) => {
     const appId = useAppId()
     const router = useRouter()
     const classes = useStyles()
     const [selectedTraceId, setSelectedTraceId] = useQueryParam("trace", "")
-    const {traces, isLoadingTraces} = useTraces()
+    const {traces, isLoadingTraces, setIsLoadingTraces, setTraces} = useTraces()
+    const [searchQuery, setSearchQuery] = useState("")
+    const [traceTabs, setTraceTabs] = useState<TraceTabTypes>("tree")
+    const [editColumns, setEditColumns] = useState<string[]>(["span_type"])
+    const [filters, setFilters] = useState<Filter[]>([])
+    const [sort, setSort] = useState<SortResult>({} as SortResult)
+    const [isFilterColsDropdownOpen, setIsFilterColsDropdownOpen] = useState(false)
+    const [pagination, setPagination] = useState({current: 1, page: 10})
     const [columns, setColumns] = useState<ColumnsType<_AgentaRootsResponse>>([
         {
             title: "ID",
@@ -213,67 +251,370 @@ const ObservabilityDashboard = ({}: Props) => {
         return columns.map((col) => ({
             ...col,
             width: col.width || 200,
+            hidden: editColumns.includes(col.key as string),
             onHeaderCell: (column: TableColumnType<_AgentaRootsResponse>) => ({
                 width: column.width,
                 onResize: handleResize(column.key?.toString()!),
             }),
         }))
-    }, [columns])
+    }, [columns, editColumns])
+
+    const onExport = async () => {
+        try {
+            if (traces.length) {
+                const {currentApp} = getAppValues()
+                const filename = `${currentApp?.app_name}_observability.csv`
+
+                const convertToStringOrJson = (value: any) => {
+                    return typeof value === "string" ? value : JSON.stringify(value)
+                }
+
+                // Helper function to create a trace object
+                const createTraceObject = (trace: any) => ({
+                    "Trace ID": trace.key,
+                    Timestamp: dayjs(trace.time.start).format("HH:mm:ss DD MMM YYYY"),
+                    Inputs: trace?.data?.inputs?.topic || "N/A",
+                    Outputs: convertToStringOrJson(trace?.data?.outputs) || "N/A",
+                    Status: trace.status.code,
+                    Latency: formatLatency(trace.time.span / 1000000),
+                    Usage: formatTokenUsage(trace?.metrics?.acc?.tokens?.total || 0),
+                    "Total cost": formatCurrency(trace?.metrics?.acc?.costs?.total || 0),
+                    "Span ID": trace.node.id,
+                    "Span Type": trace.node.type || "N/A",
+                })
+
+                const csvData = convertToCsv(
+                    traces.flatMap((trace) => {
+                        const parentTrace = createTraceObject(trace)
+                        const childrenTraces = trace.children.map(createTraceObject)
+                        return [parentTrace, ...childrenTraces]
+                    }),
+                    [
+                        ...columns.map((col) =>
+                            col.title === "ID" ? "Trace ID" : (col.title as string),
+                        ),
+                        "Span ID",
+                        "Span Type",
+                    ],
+                )
+
+                downloadCsv(csvData, filename)
+            }
+        } catch (error) {
+            console.error("Export error:", error)
+        }
+    }
+
+    const filterColumns = [
+        {value: "root.id", label: "root.id"},
+        {value: "tree.id", label: "tree.id"},
+        {value: "tree.type", label: "tree.type"},
+        {value: "node.id", label: "node.id"},
+        {value: "node.type", label: "node.type"},
+        {value: "node.name", label: "node.name"},
+        {value: "parent.id", label: "parent.id"},
+        {value: "status.code", label: "status.code"},
+        {value: "status.message", label: "status.message"},
+        {value: "exception.timestamp", label: "exception.timestamp"},
+        {value: "exception.type", label: "exception.type"},
+        {value: "exception.message", label: "exception.message"},
+        {value: "exception.stacktrace", label: "exception.stacktrace"},
+        {value: "data", label: "data"},
+        {value: "metrics.acc.duration.total", label: "metrics.acc.duration.total"},
+        {value: "metrics.acc.cost.total", label: "metrics.acc.cost.total"},
+        {value: "metrics.unit.cost.total", label: "metrics.unit.cost.total"},
+        {value: "metrics.acc.tokens.prompt", label: "metrics.acc.tokens.prompt"},
+        {value: "metrics.acc.tokens.completion", label: "metrics.acc.tokens.completion"},
+        {value: "metrics.acc.tokens.total", label: "metrics.acc.tokens.total"},
+        {value: "metrics.unit.tokens.prompt", label: "metrics.unit.tokens.prompt"},
+        {value: "metrics.unit.tokens.completion", label: "metrics.unit.tokens.completion"},
+        {value: "metrics.unit.tokens.total", label: "metrics.unit.tokens.total"},
+        {value: "refs.variant.id", label: "refs.variant.id"},
+        {value: "refs.variant.slug", label: "refs.variant.slug"},
+        {value: "refs.variant.version", label: "refs.variant.version"},
+        {value: "refs.environment.id", label: "refs.environment.id"},
+        {value: "refs.environment.slug", label: "refs.environment.slug"},
+        {value: "refs.environment.version", label: "refs.environment.version"},
+        {value: "refs.application.id", label: "refs.application.id"},
+        {value: "refs.application.slug", label: "refs.application.slug"},
+        {value: "link.type", label: "link.type"},
+        {value: "link.node.id", label: "link.node.id"},
+        {value: "otel.kind", label: "otel.kind"},
+    ]
+
+    const onSortApply = async ({type, sorted, customRange}: SortResult) => {
+        setSort({type, sorted, customRange})
+    }
+
+    const handleToggleColumnVisibility = (key: string) => {
+        setEditColumns((prev) =>
+            prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key],
+        )
+    }
+
+    // ------------------ search filter ------------------
+    const onSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchQuery(e.target.value)
+
+        // if the data filter is exist in filter then remove it when the input value get empty
+        if (!e.target.value) {
+            const isSearchFilterExist = filters.some((item) => item.key === "data")
+
+            if (isSearchFilterExist) {
+                setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "data"))
+            }
+        }
+    }
+
+    const onSearchQueryApply = () => {
+        if (searchQuery) {
+            updateFilter({key: "data", operator: "contains", value: searchQuery})
+        }
+    }
+
+    const onSearchClear = () => {
+        const isSearchFilterExist = filters.some((item) => item.key === "data")
+
+        if (isSearchFilterExist) {
+            setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "data"))
+        }
+    }
+
+    // Sync searchQuery with filters state
+    useUpdateEffect(() => {
+        const dataFilter = filters.find((f) => f.key === "data")
+        setSearchQuery(dataFilter ? dataFilter.value : "")
+    }, [filters])
+
+    // -------------------- group buttons filter ---------------------
+    const onTraceTabChange = async (e: RadioChangeEvent) => {
+        const selectedTab = e.target.value
+        setTraceTabs(selectedTab)
+
+        if (selectedTab === "chat") {
+            updateFilter({key: "node.type", operator: "eq", value: selectedTab})
+        } else {
+            const isNodeTypeFilterExist = filters.some((item) => item.key === "node.type")
+
+            if (isNodeTypeFilterExist) {
+                setFilters((prevFilters) => prevFilters.filter((f) => f.key !== "node.type"))
+            }
+        }
+    }
+
+    // Sync traceTabs with filters state
+    useUpdateEffect(() => {
+        const nodeTypeFilter = filters.find((f) => f.key === "node.type")
+        setTraceTabs((prev) =>
+            nodeTypeFilter?.value ? (nodeTypeFilter.value as TraceTabTypes) : prev,
+        )
+    }, [filters])
+
+    const updateFilter = ({
+        key,
+        operator,
+        value,
+    }: {
+        key: string
+        operator: FilterConditions
+        value: string
+    }) => {
+        setFilters((prevFilters) => {
+            const otherFilters = prevFilters.filter((f) => f.key !== key)
+
+            return value ? [...otherFilters, {key, operator, value}] : otherFilters
+        })
+    }
+
+    const fetchFilterdTrace = async () => {
+        const focusPoint = traceTabs !== "chat" ? `focus=${traceTabs}` : ""
+        const filterQuery = filters[0]?.operator
+            ? `&filtering={"conditions":${JSON.stringify(filters)}}`
+            : ""
+        const paginationQuery = `&size=${pagination.page}&page=${pagination.current}`
+        let sortQuery
+
+        if (sort && sort.type === "standerd") {
+            sortQuery = `&earliest=${sort.sorted}`
+        } else if (sort && sort.type == "custom" && sort.customRange?.startTime) {
+            sortQuery = `&earliest=${sort.customRange.startTime}&latest=${sort.customRange.endTime}`
+        } else {
+            sortQuery = ""
+        }
+
+        try {
+            const response = await axios.get(
+                `${getAgentaApiUrl()}/api/observability/v1/traces/search?${focusPoint}${paginationQuery}${sortQuery}${filterQuery}`,
+            )
+            return response.data
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    useUpdateEffect(() => {
+        const filterTraceData = async () => {
+            try {
+                setIsLoadingTraces(true)
+
+                const data = await fetchFilterdTrace()
+                const transformedTraces: _AgentaRootsResponse[] = []
+
+                if (data?.trees) {
+                    transformedTraces.push(
+                        ...data.trees.flatMap((item: AgentaTreeDTO) =>
+                            observabilityTransformer(item),
+                        ),
+                    )
+                }
+
+                if (data?.nodes) {
+                    transformedTraces.push(
+                        ...data.nodes
+                            .flatMap((node: AgentaNodeDTO) => buildNodeTree(node))
+                            .flatMap((item: AgentaTreeDTO) => observabilityTransformer(item)),
+                    )
+                }
+
+                setTraces(transformedTraces)
+            } catch (error) {
+                console.log(error)
+            } finally {
+                setIsLoadingTraces(false)
+            }
+        }
+        filterTraceData()
+    }, [filters, traceTabs, sort, pagination])
+
+    const onApplyFilter = async (newFilters: Filter[]) => {
+        setFilters(newFilters)
+    }
+
+    const onClearFilter = async () => {
+        setFilters([])
+        setSearchQuery("")
+
+        if (traceTabs === "chat") {
+            setTraceTabs("tree")
+        }
+    }
+
+    const onPaginationChange = (current: number, pageSize: number) => {
+        setPagination({current, page: pageSize})
+    }
 
     return (
         <div className="flex flex-col gap-6">
             <Typography.Text className={classes.title}>Observability</Typography.Text>
 
-            <Table
-                loading={isLoadingTraces}
-                columns={mergedColumns as TableColumnType<_AgentaRootsResponse>[]}
-                dataSource={traces}
-                bordered
-                style={{cursor: "pointer"}}
-                onRow={(record) => ({
-                    onClick: () => {
-                        setSelected(record.node.id)
-                        setSelectedTraceId(record.root.id)
-                    },
-                })}
-                components={{
-                    header: {
-                        cell: ResizableTitle,
-                    },
-                }}
-                pagination={false}
-                scroll={{x: "max-content"}}
-                locale={{
-                    emptyText: (
-                        <div className="py-16">
-                            <EmptyComponent
-                                image={
-                                    <SwapOutlined
-                                        style={{transform: "rotate(90deg)"}}
-                                        className="text-[32px]"
-                                    />
-                                }
-                                description="Monitor the performance and results of your LLM applications here."
-                                primaryCta={{
-                                    text: "Go to Playground",
-                                    onClick: () => router.push(`/apps/${appId}/playground`),
-                                    tooltip:
-                                        "Run your LLM app in the playground to generate and view insights.",
-                                }}
-                                secondaryCta={{
-                                    text: "Learn More",
-                                    onClick: () =>
-                                        router.push(
-                                            "https://docs.agenta.ai/observability/quickstart",
-                                        ),
-                                    tooltip:
-                                        "Explore more about tracking and analyzing your app's observability data.",
-                                }}
-                            />
-                        </div>
-                    ),
-                }}
-            />
+            <div className="flex justify-between gap-2 flex-col 2xl:flex-row 2xl:items-center">
+                <Space>
+                    <Input.Search
+                        placeholder="Search"
+                        value={searchQuery}
+                        onChange={onSearchChange}
+                        onPressEnter={onSearchQueryApply}
+                        onSearch={onSearchClear}
+                        className="w-[320px]"
+                        allowClear
+                    />
+                    <Filters
+                        filterData={filters}
+                        columns={filterColumns}
+                        onApplyFilter={onApplyFilter}
+                        onClearFilter={onClearFilter}
+                    />
+                    <Sort onSortApply={onSortApply} defaultSortValue="1 month" />
+                </Space>
+                <div className="w-full flex items-center justify-between">
+                    <Space>
+                        <Radio.Group value={traceTabs} onChange={onTraceTabChange}>
+                            <Radio.Button value="tree">Root</Radio.Button>
+                            <Radio.Button value="chat">LLM</Radio.Button>
+                            <Radio.Button value="node">All</Radio.Button>
+                        </Radio.Group>
+                    </Space>
+
+                    <Space>
+                        <Button
+                            type="text"
+                            onClick={onExport}
+                            icon={<Export size={14} className="mt-0.5" />}
+                            disabled={traces.length === 0}
+                        >
+                            Export as CSV
+                        </Button>
+                        <EditColumns
+                            isOpen={isFilterColsDropdownOpen}
+                            handleOpenChange={setIsFilterColsDropdownOpen}
+                            selectedKeys={editColumns}
+                            columns={columns}
+                            onChange={handleToggleColumnVisibility}
+                        />
+                    </Space>
+                </div>
+            </div>
+
+            <div className="flex flex-col gap-2">
+                <Table
+                    loading={isLoadingTraces}
+                    columns={mergedColumns as TableColumnType<_AgentaRootsResponse>[]}
+                    dataSource={traces}
+                    bordered
+                    style={{cursor: "pointer"}}
+                    onRow={(record) => ({
+                        onClick: () => {
+                            setSelected(record.node.id)
+                            setSelectedTraceId(record.root.id)
+                        },
+                    })}
+                    components={{
+                        header: {
+                            cell: ResizableTitle,
+                        },
+                    }}
+                    pagination={false}
+                    scroll={{x: "max-content"}}
+                    locale={{
+                        emptyText: (
+                            <div className="py-16">
+                                <EmptyComponent
+                                    image={
+                                        <SwapOutlined
+                                            style={{transform: "rotate(90deg)"}}
+                                            className="text-[32px]"
+                                        />
+                                    }
+                                    description="Monitor the performance and results of your LLM applications here."
+                                    primaryCta={{
+                                        text: "Go to Playground",
+                                        onClick: () => router.push(`/apps/${appId}/playground`),
+                                        tooltip:
+                                            "Run your LLM app in the playground to generate and view insights.",
+                                    }}
+                                    secondaryCta={{
+                                        text: "Learn More",
+                                        onClick: () =>
+                                            router.push(
+                                                "https://docs.agenta.ai/observability/quickstart",
+                                            ),
+                                        tooltip:
+                                            "Explore more about tracking and analyzing your app's observability data.",
+                                    }}
+                                />
+                            </div>
+                        ),
+                    }}
+                />
+                <Pagination
+                    total={100}
+                    align="end"
+                    className={classes.pagination}
+                    current={pagination.current}
+                    pageSize={pagination.page}
+                    onChange={onPaginationChange}
+                />
+            </div>
 
             {activeTrace && !!traces?.length && (
                 <GenericDrawer
diff --git a/agenta-web/src/services/observability/core/index.ts b/agenta-web/src/services/observability/core/index.ts
index ef456362da..4234fd8cce 100644
--- a/agenta-web/src/services/observability/core/index.ts
+++ b/agenta-web/src/services/observability/core/index.ts
@@ -9,11 +9,7 @@ import axios from "@/lib/helpers/axiosConfig"
 //  - update: PUT data to server
 //  - delete: DELETE data from server
 
-const PROJECT_ID = "019233b0-2967-76c0-bde2-f5b78b3a9a04"
-
 export const fetchAllTraces = async () => {
-    const response = await axios.get(
-        `${getAgentaApiUrl()}/api/observability/v1/traces/search?project_id=${PROJECT_ID}`,
-    )
+    const response = await axios.get(`${getAgentaApiUrl()}/api/observability/v1/traces/search`)
     return response.data
 }