diff --git a/agenta-web/src/components/pages/observability/drawer/TestsetDrawer.tsx b/agenta-web/src/components/pages/observability/drawer/TestsetDrawer.tsx
index cbcc74ffcc..43e23c6058 100644
--- a/agenta-web/src/components/pages/observability/drawer/TestsetDrawer.tsx
+++ b/agenta-web/src/components/pages/observability/drawer/TestsetDrawer.tsx
@@ -27,6 +27,7 @@ import {
 import {collectKeyPathsFromObject, getStringOrJson} from "@/lib/helpers/utils"
 import yaml from "js-yaml"
 import {useUpdateEffect} from "usehooks-ts"
+import {ResizableTitle} from "@/components/ServerTable/components"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     editor: {
@@ -79,7 +80,10 @@ const TestsetDrawer = ({onClose, data, ...props}: Props) => {
         data: [],
     })
 
-    const isMapColumnExist = mappingData.some((mapping) => Boolean(mapping.column))
+    const isMapColumnExist = mappingData.some((mapping) =>
+        mapping.column === "create" ? !!mapping?.newColumn : !!mapping.column,
+    )
+    const isNewTestset = testset.id === "create"
 
     // predefind options
     const customSelectOptions = useMemo(
@@ -165,6 +169,13 @@ const TestsetDrawer = ({onClose, data, ...props}: Props) => {
         }
     }, [mappingOptions])
 
+    const filteredColumnOptions = useMemo(() => {
+        const selectedColumns = mappingData
+            .map((item) => item.column)
+            .filter((col) => col !== "create")
+        return tableColumns.filter((column) => !selectedColumns.includes(column))
+    }, [mappingData, tableColumns])
+
     const onMappingOptionChange = ({
         pathName,
         value,
@@ -220,7 +231,7 @@ const TestsetDrawer = ({onClose, data, ...props}: Props) => {
 
             const newTestsetData = mapAndConvertDataInCsvFormat(traceData)
 
-            if (testset.id === "create") {
+            if (isNewTestset) {
                 if (!testsetName) {
                     message.error("Please add a Test set name before saving it")
                     return
@@ -245,273 +256,306 @@ const TestsetDrawer = ({onClose, data, ...props}: Props) => {
         }
     }
 
-    const Content = () => {
-        return (
-            <section className="w-full flex flex-col gap-6">
-                <Typography.Text className={classes.drawerHeading}>
-                    Spans selected {traceData.length}
-                </Typography.Text>
-
-                {/******* testset completed ✅ *******/}
-                <div className={classes.container}>
-                    <Typography.Text className={classes.label}>Test set</Typography.Text>
-                    <div className="flex gap-2">
-                        <Select
-                            showSearch
-                            labelInValue
-                            style={{width: 200}}
-                            placeholder="Select Test set"
-                            value={
-                                testset.id ? {label: testset.name, value: testset.id} : undefined
-                            }
-                            onChange={onTestsetOptionChange}
-                            options={[
-                                ...customSelectOptions,
-                                ...listOfTestsets.map((item: testset) => ({
-                                    value: item._id,
-                                    label: item.name,
-                                })),
-                            ]}
-                            filterOption={(input, option) =>
-                                (option?.label ?? "")
-                                    .toString()
-                                    .toLowerCase()
-                                    .includes(input.toLowerCase())
-                            }
-                            loading={isTestsetsLoading}
-                        />
-
-                        {testset.id === "create" && (
-                            <div className="relative">
-                                <Input
+    return (
+        <>
+            <GenericDrawer
+                {...props}
+                destroyOnClose
+                onClose={onClose}
+                expandable
+                drawerWidth={640}
+                headerExtra="Add to test set"
+                footer={
+                    <div className="flex justify-end items-center gap-2 py-2 px-3">
+                        <Button onClick={onClose}>Cancel</Button>
+                        <Button
+                            type="primary"
+                            loading={isLoading || isTestsetsLoading}
+                            onClick={onSaveTestset}
+                            disabled={!testset.name || !isMapColumnExist}
+                        >
+                            Save
+                        </Button>
+                    </div>
+                }
+                mainContent={
+                    <section className="w-full flex flex-col gap-6">
+                        <Typography.Text className={classes.drawerHeading}>
+                            Spans selected {traceData.length}
+                        </Typography.Text>
+
+                        {/******* testset completed ✅ *******/}
+                        <div className={classes.container}>
+                            <Typography.Text className={classes.label}>Test set</Typography.Text>
+                            <div className="flex gap-2">
+                                <Select
+                                    showSearch
+                                    labelInValue
                                     style={{width: 200}}
-                                    value={testsetName}
-                                    onChange={(e) => setTestsetName(e.target.value)}
-                                    placeholder="Test set name"
+                                    placeholder="Select Test set"
+                                    value={
+                                        testset.id
+                                            ? {label: testset.name, value: testset.id}
+                                            : undefined
+                                    }
+                                    onChange={onTestsetOptionChange}
+                                    options={[
+                                        ...customSelectOptions,
+                                        ...listOfTestsets.map((item: testset) => ({
+                                            value: item._id,
+                                            label: item.name,
+                                        })),
+                                    ]}
+                                    filterOption={(input, option) =>
+                                        (option?.label ?? "")
+                                            .toString()
+                                            .toLowerCase()
+                                            .includes(input.toLowerCase())
+                                    }
+                                    loading={isTestsetsLoading}
                                 />
-                                <PencilSimple size={14} className="absolute top-[8px] right-2" />
+
+                                {isNewTestset && (
+                                    <div className="relative">
+                                        <Input
+                                            style={{width: 200}}
+                                            value={testsetName}
+                                            onChange={(e) => setTestsetName(e.target.value)}
+                                            placeholder="Test set name"
+                                        />
+                                        <PencilSimple
+                                            size={14}
+                                            className="absolute top-[8px] right-2"
+                                        />
+                                    </div>
+                                )}
                             </div>
-                        )}
-                    </div>
-                </div>
-
-                {/******* data-preview completed ✅ *******/}
-                <div className={classes.container}>
-                    <Typography.Text className={classes.label}>Data preview</Typography.Text>
-
-                    <div className="flex justify-between items-center mb-2">
-                        <Select
-                            style={{width: 200}}
-                            value={dataPreview}
-                            onChange={(value) => setDataPreview(value)}
-                            options={traceData.map((trace, idx) => ({
-                                value: trace?.key,
-                                label: `Span ${idx + 1}`,
-                            }))}
-                        />
-                        <div className="flex justify-between items-center gap-2">
-                            <Button
-                                variant="text"
-                                color="danger"
-                                icon={<Trash size={14} />}
-                                onClick={onRemoveTraceData}
-                            >
-                                Remove span{" "}
-                                {traceData.findIndex((trace) => trace.key === dataPreview) + 1}
-                            </Button>
-                            <Radio.Group
-                                options={[
-                                    {label: "JSON", value: "JSON"},
-                                    {label: "YAML", value: "YAML"},
-                                ]}
-                                onChange={(e) => setEditorFormat(e.target.value)}
-                                value={editorFormat}
-                                optionType="button"
-                            />
-                            <CopyButton buttonText="" icon={true} text={formatDataPreview} />
                         </div>
-                    </div>
 
-                    <Editor
-                        className={classes.editor}
-                        height={210}
-                        language={editorFormat.toLowerCase()}
-                        theme={`vs-${appTheme}`}
-                        value={formatDataPreview}
-                        options={{
-                            wordWrap: "on",
-                            minimap: {enabled: false},
-                            scrollBeyondLastLine: false,
-                            readOnly: true,
-                            lineNumbers: "off",
-                            lineDecorationsWidth: 0,
-                            scrollbar: {
-                                verticalScrollbarSize: 8,
-                                horizontalScrollbarSize: 8,
-                            },
-                        }}
-                    />
-                </div>
-
-                {/******* mapping almost completed ✅ *******/}
-                <div className={classes.container}>
-                    <Typography.Text className={classes.label}>Mapping</Typography.Text>
-                    <div className="flex flex-col gap-2">
-                        {mappingData.map((data, idx) => (
-                            <div
-                                key={`mapping-item-${idx}`}
-                                className="flex items-center justify-between gap-2"
-                            >
+                        {/******* data-preview completed ✅ *******/}
+                        <div className={classes.container}>
+                            <Typography.Text className={classes.label}>
+                                Data preview
+                            </Typography.Text>
+
+                            <div className="flex justify-between items-center mb-2">
                                 <Select
                                     style={{width: 200}}
-                                    value={data.data}
-                                    onChange={(value) =>
-                                        onMappingOptionChange({pathName: "data", value, idx})
-                                    }
-                                    options={mappingOptions}
+                                    value={dataPreview}
+                                    onChange={(value) => setDataPreview(value)}
+                                    options={traceData.map((trace, idx) => ({
+                                        value: trace?.key,
+                                        label: `Span ${idx + 1}`,
+                                    }))}
                                 />
-                                <ArrowRight size={16} />
-                                <div className="flex-1 flex gap-2 items-center">
-                                    <Select
-                                        style={{flex: 1}}
-                                        value={data.column}
-                                        onChange={(value) =>
-                                            onMappingOptionChange({
-                                                pathName: "column",
-                                                value,
-                                                idx,
-                                            })
-                                        }
+                                <div className="flex justify-between items-center gap-2">
+                                    <Button
+                                        variant="text"
+                                        color="danger"
+                                        icon={<Trash size={14} />}
+                                        onClick={onRemoveTraceData}
+                                    >
+                                        Remove span{" "}
+                                        {traceData.findIndex((trace) => trace.key === dataPreview) +
+                                            1}
+                                    </Button>
+                                    <Radio.Group
                                         options={[
-                                            ...(testset.id === "create" ? customSelectOptions : []),
-                                            ...tableColumns?.map((column) => ({
-                                                value: column,
-                                                lable: column,
-                                            })),
+                                            {label: "JSON", value: "JSON"},
+                                            {label: "YAML", value: "YAML"},
                                         ]}
+                                        onChange={(e) => setEditorFormat(e.target.value)}
+                                        value={editorFormat}
+                                        optionType="button"
                                     />
-                                    {data.column === "create" && (
-                                        <div className="relative">
-                                            <Input
+                                    <CopyButton
+                                        buttonText=""
+                                        icon={true}
+                                        text={formatDataPreview}
+                                    />
+                                </div>
+                            </div>
+
+                            <Editor
+                                className={classes.editor}
+                                height={210}
+                                language={editorFormat.toLowerCase()}
+                                theme={`vs-${appTheme}`}
+                                value={formatDataPreview}
+                                options={{
+                                    wordWrap: "on",
+                                    minimap: {enabled: false},
+                                    scrollBeyondLastLine: false,
+                                    readOnly: true,
+                                    lineNumbers: "off",
+                                    lineDecorationsWidth: 0,
+                                    scrollbar: {
+                                        verticalScrollbarSize: 8,
+                                        horizontalScrollbarSize: 8,
+                                    },
+                                }}
+                            />
+                        </div>
+
+                        {/******* mapping almost completed ✔️ *******/}
+                        <div className={classes.container}>
+                            <Typography.Text className={classes.label}>Mapping</Typography.Text>
+                            <div className="flex flex-col gap-2">
+                                {mappingData.map((data, idx) => (
+                                    <div
+                                        key={`mapping-item-${idx}`}
+                                        className="flex items-center justify-between gap-2"
+                                    >
+                                        <Select
+                                            style={{width: 200}}
+                                            value={data.data}
+                                            onChange={(value) =>
+                                                onMappingOptionChange({
+                                                    pathName: "data",
+                                                    value,
+                                                    idx,
+                                                })
+                                            }
+                                            options={mappingOptions}
+                                        />
+                                        <ArrowRight size={16} />
+                                        <div className="flex-1 flex gap-2 items-center">
+                                            <Select
                                                 style={{flex: 1}}
-                                                autoFocus
-                                                value={data.newColumn || ""}
-                                                onChange={(e) =>
+                                                value={data.column}
+                                                onChange={(value) =>
                                                     onMappingOptionChange({
-                                                        pathName: "newColumn",
-                                                        value: e.target.value,
+                                                        pathName: "column",
+                                                        value,
                                                         idx,
                                                     })
                                                 }
-                                                placeholder="Test set name"
-                                            />
-                                            <PencilSimple
-                                                size={14}
-                                                className="absolute top-[8px] right-2"
+                                                options={[
+                                                    ...(isNewTestset
+                                                        ? [customSelectOptions[0]]
+                                                        : testset.id
+                                                          ? customSelectOptions
+                                                          : []),
+                                                    ...filteredColumnOptions?.map((column) => ({
+                                                        value: column,
+                                                        lable: column,
+                                                    })),
+                                                ]}
                                             />
+                                            {data.column === "create" && (
+                                                <div className="relative">
+                                                    <Input
+                                                        style={{flex: 1}}
+                                                        value={data.newColumn || ""}
+                                                        onChange={(e) =>
+                                                            onMappingOptionChange({
+                                                                pathName: "newColumn",
+                                                                value: e.target.value,
+                                                                idx,
+                                                            })
+                                                        }
+                                                        placeholder="Test set name"
+                                                    />
+                                                    <PencilSimple
+                                                        size={14}
+                                                        className="absolute top-[8px] right-2"
+                                                    />
+                                                </div>
+                                            )}
                                         </div>
-                                    )}
-                                </div>
 
-                                <Button
-                                    icon={<Trash />}
-                                    onClick={() =>
-                                        setMappingData(
-                                            mappingData.filter((_, index) => index !== idx),
-                                        )
-                                    }
-                                />
+                                        <Button
+                                            icon={<Trash />}
+                                            onClick={() =>
+                                                setMappingData(
+                                                    mappingData.filter((_, index) => index !== idx),
+                                                )
+                                            }
+                                        />
+                                    </div>
+                                ))}
                             </div>
-                        ))}
-                    </div>
 
-                    <Button
-                        type="dashed"
-                        className="mt-1"
-                        style={{width: 200}}
-                        icon={<Plus />}
-                        onClick={() => setMappingData([...mappingData, {data: "", column: ""}])}
-                    >
-                        Add field
-                    </Button>
-                </div>
-
-                <div className={classes.container}>
-                    <Typography.Text className={classes.label}>Preview</Typography.Text>
-                    {isMapColumnExist ? (
-                        <>
-                            <div className="flex items-center gap-4 mb-2">
-                                <Select
-                                    style={{width: 200}}
-                                    value={preview.key}
-                                    onChange={onPreviewOptionChange}
-                                    options={traceData.map((trace, idx) => ({
-                                        value: trace?.key,
-                                        label: `Span ${idx + 1}`,
-                                    }))}
-                                />
-
-                                <Checkbox
-                                    onChange={() => setShowLastFiveRows(!showLastFiveRows)}
-                                    checked={showLastFiveRows}
-                                >
-                                    Show last 5 test set entries
-                                </Checkbox>
-                            </div>
-
-                            <div>
-                                <Table
-                                    className="ph-no-capture"
-                                    columns={mappingData.map((data, idx) => ({
-                                        title: data.column,
-                                        dataIndex: data.column,
-                                        key: idx,
-                                        onHeaderCell: () => ({
-                                            style: {minWidth: 160},
-                                        }),
-                                    }))}
-                                    dataSource={[
-                                        ...preview.data,
-                                        ...(showLastFiveRows ? tableRows.slice(-5) : []),
-                                    ]}
-                                    scroll={{x: true}}
-                                    bordered
-                                    pagination={false}
-                                />
-                            </div>
-                        </>
-                    ) : (
-                        <Typography.Text>
-                            Please select test set to view test set preview.
-                        </Typography.Text>
-                    )}
-                </div>
-            </section>
-        )
-    }
+                            <Button
+                                type="dashed"
+                                className="mt-1"
+                                style={{width: 200}}
+                                icon={<Plus />}
+                                onClick={() =>
+                                    setMappingData([...mappingData, {data: "", column: ""}])
+                                }
+                            >
+                                Add field
+                            </Button>
+                        </div>
 
-    return (
-        <>
-            <GenericDrawer
-                {...props}
-                destroyOnClose
-                onClose={onClose}
-                expandable
-                drawerWidth={640}
-                headerExtra="Add to test set"
-                mainContent={<Content />}
-                footer={
-                    <div className="flex justify-end items-center gap-2 py-2 px-3">
-                        <Button onClick={onClose}>Cancel</Button>
-                        <Button
-                            type="primary"
-                            loading={isLoading || isTestsetsLoading}
-                            onClick={onSaveTestset}
-                            disabled={!testset.name || !isMapColumnExist}
-                        >
-                            Save
-                        </Button>
-                    </div>
+                        {/******* preview almost completed ✔️ *******/}
+                        <div className={classes.container}>
+                            <Typography.Text className={classes.label}>Preview</Typography.Text>
+                            {isMapColumnExist ? (
+                                <>
+                                    <div className="flex items-center gap-4 mb-2">
+                                        <Select
+                                            style={{width: 200}}
+                                            value={preview.key}
+                                            onChange={onPreviewOptionChange}
+                                            options={traceData.map((trace, idx) => ({
+                                                value: trace?.key,
+                                                label: `Span ${idx + 1}`,
+                                            }))}
+                                        />
+
+                                        {!isNewTestset && (
+                                            <Checkbox
+                                                onChange={() =>
+                                                    setShowLastFiveRows(!showLastFiveRows)
+                                                }
+                                                checked={showLastFiveRows}
+                                            >
+                                                Show last 5 test set entries
+                                            </Checkbox>
+                                        )}
+                                    </div>
+
+                                    <div>
+                                        <Table
+                                            className="ph-no-capture"
+                                            columns={mappingData.map((data, idx) => ({
+                                                title:
+                                                    data.column === "create"
+                                                        ? data.newColumn
+                                                        : data.column,
+                                                dataIndex:
+                                                    data.column === "create"
+                                                        ? data.newColumn
+                                                        : data.column,
+                                                key: idx,
+                                                onHeaderCell: () => ({
+                                                    style: {minWidth: 160},
+                                                }),
+                                            }))}
+                                            dataSource={[
+                                                ...preview.data,
+                                                ...(showLastFiveRows ? tableRows.slice(-5) : []),
+                                            ]}
+                                            components={{
+                                                header: {
+                                                    cell: ResizableTitle,
+                                                },
+                                            }}
+                                            scroll={{x: true}}
+                                            bordered
+                                            pagination={false}
+                                        />
+                                    </div>
+                                </>
+                            ) : (
+                                <Typography.Text>
+                                    Please select test set to view test set preview.
+                                </Typography.Text>
+                            )}
+                        </div>
+                    </section>
                 }
             />
         </>