diff --git a/agenta-web/package-lock.json b/agenta-web/package-lock.json
index f976553ed22..8bed4f1b79b 100644
--- a/agenta-web/package-lock.json
+++ b/agenta-web/package-lock.json
@@ -14,10 +14,10 @@
                 "@mdx-js/loader": "^2.3.0",
                 "@mdx-js/react": "^2.3.0",
                 "@next/mdx": "^13.4.13",
+                "@types/js-beautify": "^1.14.0",
                 "@types/mdx": "^2.0.6",
-                "@types/node": "18.16.3",
-                "@types/react": "18.2.0",
                 "@types/react-dom": "18.2.1",
+                "@types/react-syntax-highlighter": "^15.5.7",
                 "ag-grid-community": "^30.0.6",
                 "ag-grid-react": "^30.0.3",
                 "antd": "^5.4.7",
@@ -33,6 +33,7 @@
                 "posthog-js": "^1.77.2",
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
+                "react-error-boundary": "^4.0.11",
                 "react-jss": "^10.10.0",
                 "react-markdown": "^8.0.7",
                 "react-syntax-highlighter": "^15.5.0",
@@ -44,8 +45,6 @@
                 "usehooks-ts": "^2.9.1"
             },
             "devDependencies": {
-                "@types/js-beautify": "^1.14.0",
-                "@types/react-syntax-highlighter": "^15.5.7",
                 "cypress": "^12.11.0",
                 "eslint-config-prettier": "^8.8.0",
                 "node-mocks-http": "^1.12.2",
@@ -734,8 +733,7 @@
         "node_modules/@types/js-beautify": {
             "version": "1.14.0",
             "resolved": "https://registry.npmjs.org/@types/js-beautify/-/js-beautify-1.14.0.tgz",
-            "integrity": "sha512-OrJo4dEKd/8YKwGWuRP7qC/NoxNQCVsjAT7aHhgoIrNJaaDudLwX8husFrklktmXKIFbXevxzrLyEhB1842zjg==",
-            "dev": true
+            "integrity": "sha512-OrJo4dEKd/8YKwGWuRP7qC/NoxNQCVsjAT7aHhgoIrNJaaDudLwX8husFrklktmXKIFbXevxzrLyEhB1842zjg=="
         },
         "node_modules/@types/json-schema": {
             "version": "7.0.12",
@@ -798,7 +796,6 @@
             "version": "15.5.7",
             "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.7.tgz",
             "integrity": "sha512-bo5fEO5toQeyCp0zVHBeggclqf5SQ/Z5blfFmjwO5dkMVGPgmiwZsJh9nu/Bo5L7IHTuGWrja6LxJVE2uB5ZrQ==",
-            "dev": true,
             "dependencies": {
                 "@types/react": "*"
             }
@@ -7482,6 +7479,17 @@
                 "react": "^18.2.0"
             }
         },
+        "node_modules/react-error-boundary": {
+            "version": "4.0.11",
+            "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.11.tgz",
+            "integrity": "sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5"
+            },
+            "peerDependencies": {
+                "react": ">=16.13.1"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/agenta-web/package.json b/agenta-web/package.json
index c723992875a..c1b6383d3b2 100644
--- a/agenta-web/package.json
+++ b/agenta-web/package.json
@@ -24,8 +24,6 @@
         "@next/mdx": "^13.4.13",
         "@types/js-beautify": "^1.14.0",
         "@types/mdx": "^2.0.6",
-        "@types/node": "18.16.3",
-        "@types/react": "18.2.0",
         "@types/react-dom": "18.2.1",
         "@types/react-syntax-highlighter": "^15.5.7",
         "ag-grid-community": "^30.0.6",
@@ -43,6 +41,7 @@
         "posthog-js": "^1.77.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-error-boundary": "^4.0.11",
         "react-jss": "^10.10.0",
         "react-markdown": "^8.0.7",
         "react-syntax-highlighter": "^15.5.0",
diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 8936ba5a89d..f0e3eb86345 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -69,8 +69,6 @@ const AppCard: React.FC<{
             await removeApp(appName)
             // Refresh the data (if you're using SWR or a similar library)
             mutate(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/list_apps/`)
-        } catch (error: any) {
-            message.error(`Failed to remove app: ${error?.message}`)
         } finally {
             setVisibleDelete(false)
             setConfirmLoading(false)
diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index bf1b9d242c3..0966a2d0cff 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -176,9 +176,6 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 }
             } catch (e) {
                 setRowValue(rowIndex, columnName, "")
-                if (rowIndex === rows.length - 1) {
-                    message.error("Oops! Something went wrong")
-                }
             }
         })
     }
diff --git a/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
index ab3fddf3618..5ca292f7e58 100644
--- a/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/AICritiqueEvaluationTable.tsx
@@ -213,25 +213,19 @@ Answer ONLY with one of the given grading or evaluation options.
         const columnsDataNames = ["columnData0"]
         let idx = 0
         for (const columnName of columnsDataNames) {
-            try {
-                setRowValue(rowIndex, "evaluationFlow", EvaluationFlow.COMPARISON_RUN_STARTED)
+            setRowValue(rowIndex, "evaluationFlow", EvaluationFlow.COMPARISON_RUN_STARTED)
 
-                let result = await callVariant(
-                    inputParamsDict,
-                    variantData[idx].inputParams!,
-                    variantData[idx].optParams!,
-                    variantData[idx].URIPath!,
-                )
-                setRowValue(rowIndex, columnName as any, result)
-                await evaluate(rowIndex)
-                setShouldFetchResults(true)
-                if (rowIndex === rows.length - 1) {
-                    message.success("Evaluation Results Saved")
-                }
-            } catch (e) {
-                if (rowIndex === rows.length - 1) {
-                    message.error("Oops! Something went wrong")
-                }
+            let result = await callVariant(
+                inputParamsDict,
+                variantData[idx].inputParams!,
+                variantData[idx].optParams!,
+                variantData[idx].URIPath!,
+            )
+            setRowValue(rowIndex, columnName as any, result)
+            await evaluate(rowIndex)
+            setShouldFetchResults(true)
+            if (rowIndex === rows.length - 1) {
+                message.success("Evaluation Results Saved")
             }
             idx++
         }
diff --git a/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
index 33659147fb9..ab6011b7acb 100644
--- a/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ExactMatchEvaluationTable.tsx
@@ -180,11 +180,8 @@ const ExactMatchEvaluationTable: React.FC<ExactMatchEvaluationTableProps> = ({
                 if (rowIndex === rows.length - 1) {
                     message.success("Evaluation Results Saved")
                 }
-            } catch (e) {
+            } catch {
                 setRowValue(rowIndex, columnName, "")
-                if (rowIndex === rows.length - 1) {
-                    message.error("Oops! Something went wrong")
-                }
             }
         })
     }
diff --git a/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
index e115d3f7ce6..b6cff3def2b 100644
--- a/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx
@@ -175,12 +175,11 @@ const SimilarityMatchEvaluationTable: React.FC<SimilarityMatchEvaluationTablePro
                 evaluate(rowIndex)
                 if (rowIndex === rows.length - 1) {
                     message.success("Evaluation Results Saved")
-                    setLoadingSpinners(false)
                 }
-            } catch (e) {
+            } catch {
                 setRowValue(rowIndex, columnName, "")
+            } finally {
                 if (rowIndex === rows.length - 1) {
-                    message.error("Oops! Something went wrong")
                     setLoadingSpinners(false)
                 }
             }
diff --git a/agenta-web/src/components/Evaluations/Evaluations.tsx b/agenta-web/src/components/Evaluations/Evaluations.tsx
index 0cb025f621e..f81ee04fa62 100644
--- a/agenta-web/src/components/Evaluations/Evaluations.tsx
+++ b/agenta-web/src/components/Evaluations/Evaluations.tsx
@@ -32,6 +32,7 @@ import exactMatch from "@/media/target.png"
 import similarity from "@/media/transparency.png"
 import ai from "@/media/artificial-intelligence.png"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
+import axios from "@/lib/helpers/axiosConfig"
 import {createUseStyles} from "react-jss"
 import AutomaticEvaluationResult from "./AutomaticEvaluationResult"
 import HumanEvaluationResult from "./HumanEvaluationResult"
@@ -193,23 +194,8 @@ export default function Evaluations() {
         llmAppPromptTemplate?: string,
     ) => {
         const postData = async (url = "", data = {}) => {
-            const response = await fetch(url, {
-                method: "POST",
-                cache: "no-cache",
-                credentials: "same-origin",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                redirect: "follow",
-                referrerPolicy: "no-referrer",
-                body: JSON.stringify(data),
-            })
-
-            if (!response.ok) {
-                throw new Error((await response.json())?.detail ?? "Failed to create evaluation")
-            }
-
-            return response.json()
+            const response = await axios.post(url, data)
+            return response.data
         }
 
         const data = {
diff --git a/agenta-web/src/components/Layout/ErrorFallback.tsx b/agenta-web/src/components/Layout/ErrorFallback.tsx
new file mode 100644
index 00000000000..a5c87cc993e
--- /dev/null
+++ b/agenta-web/src/components/Layout/ErrorFallback.tsx
@@ -0,0 +1,23 @@
+import {getErrorMessage} from "@/lib/helpers/errorHandler"
+import {Button, Result} from "antd"
+
+interface Props {
+    error: any
+}
+
+const ErrorFallback: React.FC<Props> = ({error}) => {
+    return (
+        <Result
+            status="error"
+            title="An Error Occurred"
+            subTitle={getErrorMessage(error)}
+            extra={[
+                <Button key="home" href="/apps" type="primary">
+                    Go to home screen
+                </Button>,
+            ]}
+        />
+    )
+}
+
+export default ErrorFallback
diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index f71e10eeff6..b16cda4344c 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -9,6 +9,8 @@ import {useAppTheme} from "./ThemeContextProvider"
 import {useElementSize} from "usehooks-ts"
 import {createUseStyles} from "react-jss"
 import NoSSRWrapper from "../NoSSRWrapper/NoSSRWrapper"
+import {ErrorBoundary} from "react-error-boundary"
+import ErrorFallback from "./ErrorFallback"
 
 const {Content, Footer} = Layout
 
@@ -86,7 +88,9 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                     {title: capitalizedAppName},
                                 ]}
                             />
-                            {children}
+                            <ErrorBoundary FallbackComponent={ErrorFallback}>
+                                {children}
+                            </ErrorBoundary>
                         </Content>
                         <Footer ref={footerRef} className={classes.footer}>
                             <Space className={classes.footerLeft} size={10}>
diff --git a/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx b/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx
index 09ab9647f7f..0f5803d4473 100644
--- a/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx
+++ b/agenta-web/src/components/Playground/AddToTestSetDrawer/AddToTestSetDrawer.tsx
@@ -1,7 +1,6 @@
 import AlertPopup from "@/components/AlertPopup/AlertPopup"
 import {useAppTheme} from "../../Layout/ThemeContextProvider"
 import {testset} from "@/lib/Types"
-import {globalErrorHandler} from "@/lib/helpers/errorHandler"
 import {renameVariables} from "@/lib/helpers/utils"
 import {createNewTestset, loadTestset, updateTestset, useLoadTestsetsList} from "@/lib/services/api"
 import {Button, Drawer, Form, Input, Modal, Select, Typography, message} from "antd"
@@ -56,10 +55,6 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, ...props}) => {
         } else dirty.current = false
     }, [props.open])
 
-    useUpdateEffect(() => {
-        if (isTestsetsLoadingError) globalErrorHandler(isTestsetsLoadingError)
-    }, [isTestsetsLoadingError])
-
     const onClose = useCallback(() => {
         if (dirty.current) {
             AlertPopup({
@@ -92,7 +87,6 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, ...props}) => {
                     message.success(`Row added to the "${name}" test set!`)
                     props.onClose?.({} as any)
                 })
-                .catch(globalErrorHandler)
                 .finally(() => setLoading(false))
         },
         [selectedTestset, props.onClose],
@@ -103,64 +97,62 @@ const AddToTestSetDrawer: React.FC<Props> = ({params, ...props}) => {
             if (isNew) {
                 setNewTestsetModalOpen(true)
             } else {
-                loadTestset(selectedTestset!)
-                    .then((data) => {
-                        const testsetCols = Object.keys(data.csvdata?.[0] || {})
-                        const playgroundCols = Object.keys(values)
-                        const missingColsTestset = testsetCols.filter(
-                            (col) => !playgroundCols.includes(col),
-                        )
-                        const missingColsPlayground = playgroundCols.filter(
-                            (col) => !testsetCols.includes(col),
-                        )
-
-                        // if cols mismatch (playground cols not a superset of testset cols)
-                        if (missingColsTestset.length) {
-                            AlertPopup({
-                                type: "error",
-                                title: "Columns mismatch",
-                                message: (
-                                    <span>
-                                        Can't add to the selected test set, because its column(s)
-                                        don't match with the playground parameters.
-                                        <br />
-                                        <br />
-                                        <b>Test set Columns:</b> {testsetCols.join(", ")}
-                                        <br />
-                                        <br />
-                                        <b>Playground Parameters:</b> {playgroundCols.join(", ")}
-                                    </span>
-                                ),
-                                cancelText: null,
-                                okText: "Ok",
-                            })
-                        }
-                        // if unmapped cols (playground has cols that don't map to testset cols)
-                        else if (missingColsPlayground.length) {
-                            AlertPopup({
-                                type: "confirm",
-                                title: "Unmapped parameters",
-                                message: (
-                                    <span>
-                                        Following parameters from the playground can't map to any
-                                        columns of the selected test set:{" "}
-                                        <strong>{missingColsPlayground.join(", ")}</strong>
-                                        <br />
-                                        <br />
-                                        Do you want to ignore these unmapped parameters and continue
-                                        adding to the test set?
-                                    </span>
-                                ),
-                                okText: "Add",
-                                onOk: () => addToTestSet(data.name, data.csvdata, values),
-                            })
-                        }
-                        // exact match b/w playground cols and testset cols
-                        else {
-                            addToTestSet(data.name, data.csvdata, values)
-                        }
-                    })
-                    .catch(globalErrorHandler)
+                loadTestset(selectedTestset!).then((data) => {
+                    const testsetCols = Object.keys(data.csvdata?.[0] || {})
+                    const playgroundCols = Object.keys(values)
+                    const missingColsTestset = testsetCols.filter(
+                        (col) => !playgroundCols.includes(col),
+                    )
+                    const missingColsPlayground = playgroundCols.filter(
+                        (col) => !testsetCols.includes(col),
+                    )
+
+                    // if cols mismatch (playground cols not a superset of testset cols)
+                    if (missingColsTestset.length) {
+                        AlertPopup({
+                            type: "error",
+                            title: "Columns mismatch",
+                            message: (
+                                <span>
+                                    Can't add to the selected test set, because its column(s) don't
+                                    match with the playground parameters.
+                                    <br />
+                                    <br />
+                                    <b>Test set Columns:</b> {testsetCols.join(", ")}
+                                    <br />
+                                    <br />
+                                    <b>Playground Parameters:</b> {playgroundCols.join(", ")}
+                                </span>
+                            ),
+                            cancelText: null,
+                            okText: "Ok",
+                        })
+                    }
+                    // if unmapped cols (playground has cols that don't map to testset cols)
+                    else if (missingColsPlayground.length) {
+                        AlertPopup({
+                            type: "confirm",
+                            title: "Unmapped parameters",
+                            message: (
+                                <span>
+                                    Following parameters from the playground can't map to any
+                                    columns of the selected test set:{" "}
+                                    <strong>{missingColsPlayground.join(", ")}</strong>
+                                    <br />
+                                    <br />
+                                    Do you want to ignore these unmapped parameters and continue
+                                    adding to the test set?
+                                </span>
+                            ),
+                            okText: "Add",
+                            onOk: () => addToTestSet(data.name, data.csvdata, values),
+                        })
+                    }
+                    // exact match b/w playground cols and testset cols
+                    else {
+                        addToTestSet(data.name, data.csvdata, values)
+                    }
+                })
             }
         },
         [selectedTestset],
diff --git a/agenta-web/src/components/Playground/Views/ParametersView.tsx b/agenta-web/src/components/Playground/Views/ParametersView.tsx
index 434b79dbe96..78387b8aa1b 100644
--- a/agenta-web/src/components/Playground/Views/ParametersView.tsx
+++ b/agenta-web/src/components/Playground/Views/ParametersView.tsx
@@ -1,7 +1,7 @@
 import {useState} from "react"
 import React from "react"
 import {Parameter} from "@/lib/Types"
-import {Input, Row, Col, Button, Tooltip, message, Space, Card, Collapse} from "antd"
+import {Row, Col, Button, Tooltip, message, Space, Collapse} from "antd"
 import type {CollapseProps} from "antd"
 import {ModelParameters, StringParameters, ObjectParameters} from "./ParametersCards"
 import {createUseStyles} from "react-jss"
@@ -140,6 +140,7 @@ const ParametersView: React.FC<Props> = ({
             showArrow: true,
         },
     ]
+
     return (
         <div>
             {contextHolder}
diff --git a/agenta-web/src/components/Playground/Views/TestView.tsx b/agenta-web/src/components/Playground/Views/TestView.tsx
index cd85fcc4f26..3696d2acd83 100644
--- a/agenta-web/src/components/Playground/Views/TestView.tsx
+++ b/agenta-web/src/components/Playground/Views/TestView.tsx
@@ -7,6 +7,7 @@ import {randString, renameVariables} from "@/lib/helpers/utils"
 import LoadTestsModal from "../LoadTestsModal"
 import AddToTestSetDrawer from "../AddToTestSetDrawer/AddToTestSetDrawer"
 import {DeleteOutlined} from "@ant-design/icons"
+import {getErrorMessage} from "@/lib/helpers/errorHandler"
 import {createUseStyles} from "react-jss"
 
 const useStylesBox = createUseStyles({
@@ -200,7 +201,7 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, URIPath}) => {
         } catch (e) {
             setResultForIndex(
                 "The code has resulted in the following error: \n\n --------------------- \n" +
-                    e +
+                    getErrorMessage(e) +
                     "\n---------------------\n\nPlease update your code, and re-serve it using cli and try again.\n\nFor more information please read https://docs.agenta.ai/howto/how-to-debug\n\nIf you believe this is a bug, please create a new issue here: https://github.com/Agenta-AI/agenta/issues/new?title=Issue%20in%20playground",
                 index,
             )
diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index cd993526e67..c5eca13d2f0 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -16,6 +16,7 @@ import {Layout, Menu, Space, Tooltip, theme} from "antd"
 import Logo from "../Logo/Logo"
 import Link from "next/link"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
+import {ErrorBoundary} from "react-error-boundary"
 import {createUseStyles} from "react-jss"
 
 type StyleProps = {
@@ -115,160 +116,169 @@ const Sidebar: React.FC = () => {
                         <Logo />
                     </Link>
                 </div>
-
-                <div>
-                    <Menu
-                        mode="inline"
-                        selectedKeys={initialSelectedKeys}
-                        className={classes.menuContainer}
-                    >
-                        <Tooltip
-                            placement="right"
-                            title="Create new applications or switch between your existing projects."
+                <ErrorBoundary fallback={<div />}>
+                    <div>
+                        <Menu
+                            mode="inline"
+                            selectedKeys={initialSelectedKeys}
+                            className={classes.menuContainer}
                         >
-                            <Menu.Item
-                                key="apps"
-                                icon={<AppstoreOutlined className={classes.sideIcons} />}
+                            <Tooltip
+                                placement="right"
+                                title="Create new applications or switch between your existing projects."
                             >
-                                <Link
-                                    data-cy="app-management-link"
-                                    href={getNavigationPath("apps")}
-                                    className={classes.menuLinks}
+                                <Menu.Item
+                                    key="apps"
+                                    icon={<AppstoreOutlined className={classes.sideIcons} />}
                                 >
-                                    App Management
-                                </Link>
-                            </Menu.Item>
-                        </Tooltip>
-                        {page_name && (
-                            <>
-                                <Tooltip
-                                    placement="right"
-                                    key="playground"
-                                    title="Experiment with real data and optimize your parameters including prompts, methods, and configuration settings."
-                                >
-                                    <Menu.Item
-                                        icon={<RocketOutlined className={classes.optionSideIcon} />}
+                                    <Link
+                                        data-cy="app-management-link"
+                                        href={getNavigationPath("apps")}
+                                        className={classes.menuLinks}
+                                    >
+                                        App Management
+                                    </Link>
+                                </Menu.Item>
+                            </Tooltip>
+                            {page_name && (
+                                <>
+                                    <Tooltip
+                                        placement="right"
+                                        key="playground"
+                                        title="Experiment with real data and optimize your parameters including prompts, methods, and configuration settings."
                                     >
-                                        <Link
-                                            data-cy="app-playground-link"
-                                            href={getNavigationPath("playground")}
-                                            className={classes.menuLinks}
+                                        <Menu.Item
+                                            icon={
+                                                <RocketOutlined
+                                                    className={classes.optionSideIcon}
+                                                />
+                                            }
                                         >
-                                            Playground
-                                        </Link>
-                                    </Menu.Item>
-                                </Tooltip>
+                                            <Link
+                                                data-cy="app-playground-link"
+                                                href={getNavigationPath("playground")}
+                                                className={classes.menuLinks}
+                                            >
+                                                Playground
+                                            </Link>
+                                        </Menu.Item>
+                                    </Tooltip>
 
-                                <Tooltip
-                                    placement="right"
-                                    title="Create and manage testsets for evaluation purposes."
-                                >
-                                    <Menu.Item
-                                        key="testsets"
-                                        icon={
-                                            <DatabaseOutlined className={classes.optionSideIcon} />
-                                        }
+                                    <Tooltip
+                                        placement="right"
+                                        title="Create and manage testsets for evaluation purposes."
                                     >
-                                        <Link
-                                            data-cy="app-testsets-link"
-                                            href={getNavigationPath("testsets")}
-                                            className={classes.menuLinks}
+                                        <Menu.Item
+                                            key="testsets"
+                                            icon={
+                                                <DatabaseOutlined
+                                                    className={classes.optionSideIcon}
+                                                />
+                                            }
                                         >
-                                            Test Sets
-                                        </Link>
-                                    </Menu.Item>
-                                </Tooltip>
+                                            <Link
+                                                data-cy="app-testsets-link"
+                                                href={getNavigationPath("testsets")}
+                                                className={classes.menuLinks}
+                                            >
+                                                Test Sets
+                                            </Link>
+                                        </Menu.Item>
+                                    </Tooltip>
 
-                                <Tooltip
-                                    placement="right"
-                                    title="Perform 1-to-1 variant comparisons on testsets to identify superior options."
-                                >
-                                    <Menu.Item
-                                        key="evaluations"
-                                        icon={
-                                            <LineChartOutlined className={classes.optionSideIcon} />
-                                        }
+                                    <Tooltip
+                                        placement="right"
+                                        title="Perform 1-to-1 variant comparisons on testsets to identify superior options."
                                     >
-                                        <Link
-                                            data-cy="app-evaluations-link"
-                                            href={getNavigationPath("evaluations")}
-                                            className={classes.menuLinks}
+                                        <Menu.Item
+                                            key="evaluations"
+                                            icon={
+                                                <LineChartOutlined
+                                                    className={classes.optionSideIcon}
+                                                />
+                                            }
                                         >
-                                            Evaluate
-                                        </Link>
-                                    </Menu.Item>
-                                </Tooltip>
+                                            <Link
+                                                data-cy="app-evaluations-link"
+                                                href={getNavigationPath("evaluations")}
+                                                className={classes.menuLinks}
+                                            >
+                                                Evaluate
+                                            </Link>
+                                        </Menu.Item>
+                                    </Tooltip>
 
-                                <Tooltip
-                                    placement="right"
-                                    title="Monitor production logs to ensure seamless operations."
-                                >
-                                    <Menu.Item
-                                        key="endpoints"
-                                        icon={
-                                            <CloudUploadOutlined
-                                                className={classes.optionSideIcon}
-                                            />
-                                        }
+                                    <Tooltip
+                                        placement="right"
+                                        title="Monitor production logs to ensure seamless operations."
                                     >
-                                        <Link
-                                            data-cy="app-endpoints-link"
-                                            href={getNavigationPath("endpoints")}
-                                            className={classes.menuLinks}
+                                        <Menu.Item
+                                            key="endpoints"
+                                            icon={
+                                                <CloudUploadOutlined
+                                                    className={classes.optionSideIcon}
+                                                />
+                                            }
                                         >
-                                            <Space>
-                                                <span>Endpoints</span>
-                                            </Space>
-                                        </Link>
-                                    </Menu.Item>
-                                </Tooltip>
-                            </>
-                        )}
-                    </Menu>
+                                            <Link
+                                                data-cy="app-endpoints-link"
+                                                href={getNavigationPath("endpoints")}
+                                                className={classes.menuLinks}
+                                            >
+                                                <Space>
+                                                    <span>Endpoints</span>
+                                                </Space>
+                                            </Link>
+                                        </Menu.Item>
+                                    </Tooltip>
+                                </>
+                            )}
+                        </Menu>
 
-                    <Menu
-                        mode="vertical"
-                        className={classes.menuContainer2}
-                        selectedKeys={selectedKeys}
-                    >
-                        <Tooltip
-                            placement="right"
-                            key="apikeys"
-                            title="Your api keys that are used in applications"
+                        <Menu
+                            mode="vertical"
+                            className={classes.menuContainer2}
+                            selectedKeys={selectedKeys}
                         >
-                            <Menu.Item icon={<LockOutlined />}>
-                                <Link
-                                    data-cy="apikeys-link"
-                                    href={getNavigationPath("keys")}
-                                    className={classes.menuLinks}
-                                >
-                                    <Space>
-                                        <span>API keys</span>
-                                    </Space>
+                            <Tooltip
+                                placement="right"
+                                key="apikeys"
+                                title="Your api keys that are used in applications"
+                            >
+                                <Menu.Item icon={<LockOutlined />}>
+                                    <Link
+                                        data-cy="apikeys-link"
+                                        href={getNavigationPath("keys")}
+                                        className={classes.menuLinks}
+                                    >
+                                        <Space>
+                                            <span>API keys</span>
+                                        </Space>
+                                    </Link>
+                                </Menu.Item>
+                            </Tooltip>
+                            <Menu.Item
+                                key="theme"
+                                icon={<DashboardOutlined />}
+                                onClick={toggleAppTheme}
+                            >
+                                <span>{appTheme === "light" ? "Dark mode" : "Light mode"}</span>
+                            </Menu.Item>
+                            <Menu.Item key="help" icon={<QuestionOutlined />}>
+                                <Link href="https://docs.agenta.ai" target="_blank">
+                                    Help
                                 </Link>
                             </Menu.Item>
-                        </Tooltip>
-                        <Menu.Item
-                            key="theme"
-                            icon={<DashboardOutlined />}
-                            onClick={toggleAppTheme}
-                        >
-                            <span>{appTheme === "light" ? "Dark mode" : "Light mode"}</span>
-                        </Menu.Item>
-                        <Menu.Item key="help" icon={<QuestionOutlined />}>
-                            <Link href="https://docs.agenta.ai" target="_blank">
-                                Help
-                            </Link>
-                        </Menu.Item>
-                        {/* <Menu.Item key="user">
+                            {/* <Menu.Item key="user">
                         <Space>
                             <Avatar size="small" style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
                             <span>Foulen</span>
                         </Space>
 
                     </Menu.Item> */}
-                    </Menu>
-                </div>
+                        </Menu>
+                    </div>
+                </ErrorBoundary>
             </div>
         </Sider>
     )
diff --git a/agenta-web/src/components/TestSetTable/TestsetTable.tsx b/agenta-web/src/components/TestSetTable/TestsetTable.tsx
index 2443878c593..b5a474eb0e1 100644
--- a/agenta-web/src/components/TestSetTable/TestsetTable.tsx
+++ b/agenta-web/src/components/TestSetTable/TestsetTable.tsx
@@ -15,7 +15,6 @@ import useStateCallback from "@/hooks/useStateCallback"
 import {AxiosResponse} from "axios"
 import EditRowModal from "./EditRowModal"
 import {getVariantInputParameters} from "@/lib/helpers/variantHelper"
-import {globalErrorHandler} from "@/lib/helpers/errorHandler"
 import {convertToCsv, downloadCsv} from "../../lib/helpers/utils"
 import {NoticeType} from "antd/es/message/interface"
 import {GenericObject, KeyValuePair} from "@/lib/Types"
@@ -237,9 +236,8 @@ const TestsetTable: React.FC<testsetTableProps> = ({mode}) => {
                 colData.push({field: "correct_answer"})
 
                 applyColData(colData)
-            })().catch((e) => {
+            })().catch(() => {
                 applyColData([])
-                globalErrorHandler(e)
             })
         }
     }, [mode, testset_id, appName])
@@ -452,9 +450,7 @@ const TestsetTable: React.FC<testsetTableProps> = ({mode}) => {
                 }
             }
         } catch (error) {
-            mssgModal("error", "Error saving test set")
             console.error("Error saving test set:", error)
-            throw error
         }
     }
 
diff --git a/agenta-web/src/lib/helpers/axiosConfig.ts b/agenta-web/src/lib/helpers/axiosConfig.ts
new file mode 100644
index 00000000000..cb4a7d4631f
--- /dev/null
+++ b/agenta-web/src/lib/helpers/axiosConfig.ts
@@ -0,0 +1,25 @@
+import axiosApi from "axios"
+import {getErrorMessage, globalErrorHandler} from "./errorHandler"
+
+const axios = axiosApi.create({
+    headers: {
+        "Content-Type": "application/json",
+    },
+})
+
+axios.interceptors.response.use(
+    (response) => response,
+    (error) => {
+        let msg = getErrorMessage(error.response?.data?.error || error.response?.data, "")
+        if (!msg)
+            msg = `${error.response?.statusText ? error.response.statusText + "! " : ""}${
+                error.message
+            }`
+        error.message = msg
+
+        globalErrorHandler(error)
+        throw error
+    },
+)
+
+export default axios
diff --git a/agenta-web/src/lib/helpers/errorHandler.ts b/agenta-web/src/lib/helpers/errorHandler.ts
index 382994957ec..8389005f041 100644
--- a/agenta-web/src/lib/helpers/errorHandler.ts
+++ b/agenta-web/src/lib/helpers/errorHandler.ts
@@ -1,11 +1,21 @@
 import {message} from "antd"
 
-export const globalErrorHandler = (error: any) => {
-    error?.preventDefault && error.preventDefault()
+export const getErrorMessage = (error: any, fallback = "An unknown error occurred!") => {
+    let message = fallback
+    try {
+        error?.preventDefault && error.preventDefault()
+        if (typeof error === "string") message = error
+        else if (error.message) message = error.message
+        else if (error && typeof error === "object")
+            message = getErrorMessage(Object.values(error)[0])
+        else message = JSON.stringify(error)
+    } catch {}
 
-    if (typeof error === "string") error = {message: error}
+    return message
+}
 
-    error.message = error.message || "An unknown error occurred!"
-    console.error(error.message, error)
-    message.error(error.message)
+export const globalErrorHandler = (error: any) => {
+    const errorMsg = getErrorMessage(error)
+    console.error(errorMsg, error)
+    message.error(errorMsg)
 }
diff --git a/agenta-web/src/lib/services/api.ts b/agenta-web/src/lib/services/api.ts
index 269b929c920..94b478dddf0 100644
--- a/agenta-web/src/lib/services/api.ts
+++ b/agenta-web/src/lib/services/api.ts
@@ -1,5 +1,5 @@
 import useSWR from "swr"
-import axios from "axios"
+import axios from "@/lib//helpers/axiosConfig"
 import {parseOpenApiSchema} from "@/lib/helpers/openapi_parser"
 import {
     Variant,
@@ -18,7 +18,7 @@ import {EvaluationType} from "../enums"
  * Raw interface for the parameters parsed from the openapi.json
  */
 
-const fetcher = (...args: Parameters<typeof fetch>) => fetch(...args).then((res) => res.json())
+const fetcher = (url: string) => axios.get(url).then((res) => res.data)
 
 export async function fetchVariants(app: string): Promise<Variant[]> {
     const response = await axios.get(
@@ -92,30 +92,10 @@ export async function callVariant(
         .post(
             `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${appContainerURIPath}/generate`,
             requestBody,
-            {
-                headers: {
-                    accept: "application/json",
-                    "Content-Type": "application/json",
-                },
-            },
         )
         .then((res) => {
             return res.data
         })
-        .catch((error) => {
-            if (error.response && error.response.status === 500) {
-                throw new Error(error.response.data.error + " " + error.response.data.traceback, {
-                    cause: error.response.data.error,
-                })
-            }
-            if (error.response && error.response.status === 422) {
-                let cause = `Unprocessable Entity: The server understands the content type of the request, and the syntax of the request is correct, but it was unable to process the contained instructions.`
-                throw new Error(`${cause} Data: ${JSON.stringify(error.response.data, null, 2)}`, {
-                    cause,
-                })
-            }
-            throw error // If it's not a 500 status, or if error.response is undefined, rethrow the error so it can be handled elsewhere.
-        })
 }
 
 /**
@@ -125,34 +105,30 @@ export async function callVariant(
  * @returns
  */
 export const getVariantParametersFromOpenAPI = async (app: string, variant: Variant) => {
-    try {
-        const sourceName = variant.templateVariantName
-            ? variant.templateVariantName
-            : variant.variantName
-        const appContainerURIPath = await getAppContainerURL(app, sourceName)
-        const url = `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${appContainerURIPath}/openapi.json`
-        const response = await axios.get(url)
-        let APIParams = parseOpenApiSchema(response.data)
-        // we create a new param for DictInput that will contain the name of the inputs
-        APIParams = APIParams.map((param) => {
-            if (param.type === "object") {
-                // if param.default is defined
-                if (param?.default) {
-                    param.default = param.default.map((item: string) => {
-                        return {name: item}
-                    })
-                } else {
-                    param.default = []
-                }
+    const sourceName = variant.templateVariantName
+        ? variant.templateVariantName
+        : variant.variantName
+    const appContainerURIPath = await getAppContainerURL(app, sourceName)
+    const url = `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/${appContainerURIPath}/openapi.json`
+    const response = await axios.get(url)
+    let APIParams = parseOpenApiSchema(response.data)
+    // we create a new param for DictInput that will contain the name of the inputs
+    APIParams = APIParams.map((param) => {
+        if (param.type === "object") {
+            // if param.default is defined
+            if (param?.default) {
+                param.default = param.default.map((item: string) => {
+                    return {name: item}
+                })
+            } else {
+                param.default = []
             }
-            return param
-        })
-        const initOptParams = APIParams.filter((param) => !param.input) // contains the default values too!
-        const inputParams = APIParams.filter((param) => param.input) // don't have input values
-        return {initOptParams, inputParams}
-    } catch (error) {
-        throw error
-    }
+        }
+        return param
+    })
+    const initOptParams = APIParams.filter((param) => !param.input) // contains the default values too!
+    const inputParams = APIParams.filter((param) => param.input) // don't have input values
+    return {initOptParams, inputParams}
 }
 
 // Define a type for our cache
@@ -209,24 +185,16 @@ export async function saveNewVariant(appName: string, variant: Variant, paramete
         app_name: appName,
         variant_name: variant.templateVariantName,
     }
-    try {
-        const response = await axios.post(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/add/from_previous/`,
-            {
-                previous_app_variant: appVariant,
-                new_variant_name: variant.variantName,
-                parameters: parameters.reduce((acc, param) => {
-                    return {...acc, [param.name]: param.default}
-                }, {}),
-            },
-        )
-
-        // You can use the response here if needed
-    } catch (error) {
-        console.error(error)
-        // Handle error here
-        throw error
-    }
+    await axios.post(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/add/from_previous/`,
+        {
+            previous_app_variant: appVariant,
+            new_variant_name: variant.variantName,
+            parameters: parameters.reduce((acc, param) => {
+                return {...acc, [param.name]: param.default}
+            }, {}),
+        },
+    )
 }
 
 export async function updateVariantParams(
@@ -234,47 +202,29 @@ export async function updateVariantParams(
     variant: Variant,
     parameters: Parameter[],
 ) {
-    try {
-        const response = await axios.put(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/update_variant_parameters/`,
-            {
-                app_name: appName,
-                variant_name: variant.variantName,
-                parameters: parameters.reduce((acc, param) => {
-                    return {...acc, [param.name]: param.default}
-                }, {}),
-            },
-        )
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
+    await axios.put(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/update_variant_parameters/`,
+        {
+            app_name: appName,
+            variant_name: variant.variantName,
+            parameters: parameters.reduce((acc, param) => {
+                return {...acc, [param.name]: param.default}
+            }, {}),
+        },
+    )
 }
 
 export async function removeApp(appName: string) {
-    try {
-        await axios.delete(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/remove_app/`,
-            {data: {app_name: appName}},
-        )
-        console.log("App removed: " + appName)
-    } catch (error) {
-        console.error("Error removing " + appName + " " + error)
-        throw error
-    }
+    await axios.delete(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/remove_app/`, {
+        data: {app_name: appName},
+    })
 }
 
 export async function removeVariant(appName: string, variantName: string) {
-    try {
-        await axios.delete(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/remove_variant/`,
-            {data: {app_name: appName, variant_name: variantName}},
-        )
-        console.log("Variant removed: " + variantName)
-    } catch (error) {
-        console.error("Error removing " + variantName + " " + error)
-        throw error
-    }
+    await axios.delete(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/remove_variant/`,
+        {data: {app_name: appName, variant_name: variantName}},
+    )
 }
 /**
  * Loads the list of testsets
@@ -295,136 +245,94 @@ export const useLoadTestsetsList = (app_name: string) => {
 }
 
 export async function createNewTestset(appName: string, testsetName: string, testsetData: any) {
-    try {
-        const response = await axios.post(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${appName}`,
-            {
-                name: testsetName,
-                csvdata: testsetData,
-            },
-        )
-        return response
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
+    const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${appName}`,
+        {
+            name: testsetName,
+            csvdata: testsetData,
+        },
+    )
+    return response
 }
 
 export async function updateTestset(testsetId: String, testsetName: string, testsetData: any) {
-    try {
-        const response = await axios.put(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${testsetId}`,
-            {
-                name: testsetName,
-                csvdata: testsetData,
-            },
-        )
-        return response
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
+    const response = await axios.put(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${testsetId}`,
+        {
+            name: testsetName,
+            csvdata: testsetData,
+        },
+    )
+    return response
 }
 
 export const loadTestset = async (testsetId: string) => {
-    return fetch(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${testsetId}`, {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    })
-        .then((res) => res.json())
-        .then((data) => {
-            return data
-        })
-        .catch((err) => {
-            console.error(err)
-        })
+    const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/${testsetId}`,
+    )
+    return response.data
 }
 
 export const deleteTestsets = async (ids: string[]) => {
-    try {
-        const response = await axios({
-            method: "delete",
-            url: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/`,
-            data: {testset_ids: ids},
-        })
-        if (response.status === 200) {
-            return response.data
-        }
-    } catch (error) {
-        console.error(`Error deleting entity: ${error}`)
-        throw error
-    }
+    const response = await axios({
+        method: "delete",
+        url: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets`,
+        data: {testset_ids: ids},
+    })
+    return response.data
 }
 
-const eval_endpoint = axios.create({
-    baseURL: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations`,
-})
-
 export const loadEvaluations = async (app_name: string) => {
-    try {
-        return await eval_endpoint.get(`?app_name=${app_name}`).then((responseData) => {
+    return await axios
+        .get(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations?app_name=${app_name}`)
+        .then((responseData) => {
             const evaluations = responseData.data.map((item: EvaluationResponseType) => {
                 return fromEvaluationResponseToEvaluation(item)
             })
 
             return evaluations
         })
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
 }
 
 export const loadEvaluation = async (evaluationId: string) => {
-    try {
-        return await eval_endpoint.get(evaluationId).then((responseData) => {
+    return await axios
+        .get(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationId}`)
+        .then((responseData) => {
             return fromEvaluationResponseToEvaluation(responseData.data)
         })
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
 }
 
 export const deleteEvaluations = async (ids: string[]) => {
-    try {
-        const response = await axios({
-            method: "delete",
-            url: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/`,
-            data: {evaluations_ids: ids},
-        })
-        if (response.status === 200) {
-            return response.data
-        }
-    } catch (error) {
-        console.error(`Error deleting entity: ${error}`)
-        throw error
-    }
+    const response = await axios({
+        method: "delete",
+        url: `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations`,
+        data: {evaluations_ids: ids},
+    })
+    return response.data
 }
 
 export const loadEvaluationsScenarios = async (
     evaluationTableId: string,
     evaluation: Evaluation,
 ) => {
-    try {
-        return await eval_endpoint
-            .get(`${evaluationTableId}/evaluation_scenarios`)
-            .then((responseData) => {
-                const evaluationsRows = responseData.data.map((item: any) => {
-                    return fromEvaluationScenarioResponseToEvaluationScenario(item, evaluation)
-                })
-
-                return evaluationsRows
+    return await axios
+        .get(
+            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationTableId}/evaluation_scenarios`,
+        )
+        .then((responseData) => {
+            const evaluationsRows = responseData.data.map((item: any) => {
+                return fromEvaluationScenarioResponseToEvaluationScenario(item, evaluation)
             })
-    } catch (error) {
-        console.error(error)
-        throw error
-    }
+
+            return evaluationsRows
+        })
 }
 
 export const updateEvaluation = async (evaluationId: string, data: GenericObject) => {
-    const response = await eval_endpoint.put(`${evaluationId}`, data)
+    const response = await axios.put(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationId}`,
+        data,
+    )
     return response.data
 }
 
@@ -434,33 +342,26 @@ export const updateEvaluationScenario = async (
     data: GenericObject,
     evaluationType: EvaluationType,
 ) => {
-    const response = await eval_endpoint.put(
-        `${evaluationTableId}/evaluation_scenario/${evaluationScenarioId}/${evaluationType}`,
+    const response = await axios.put(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationTableId}/evaluation_scenario/${evaluationScenarioId}/${evaluationType}`,
         data,
     )
     return response.data
 }
 
 export const postEvaluationScenario = async (evaluationTableId: string, data: GenericObject) => {
-    const response = await eval_endpoint.post(`${evaluationTableId}/evaluation_scenario`, data)
+    const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationTableId}/evaluation_scenario`,
+        data,
+    )
     return response.data
 }
 
 export const fetchEvaluationResults = async (evaluationId: string) => {
-    try {
-        const response = await fetch(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationId}/results`,
-        )
-        if (response.ok) {
-            const data = await response.json()
-            return data
-        } else {
-            throw new Error("Failed to fetch results.")
-        }
-    } catch (error) {
-        console.error("Error fetching results:", error)
-        throw error
-    }
+    const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/evaluations/${evaluationId}/results`,
+    )
+    return response.data
 }
 
 export const fetchApps = () => {
@@ -476,56 +377,25 @@ export const fetchApps = () => {
 }
 
 export const getTemplates = async () => {
-    return fetch(`${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/containers/templates/`, {
-        headers: {
-            "Content-Type": "application/json",
-        },
-    })
-        .then((response) => response.json())
-        .then((data) => {
-            return data
-        })
-        .catch((error) => {
-            console.error("Error fetching templates:", error)
-        })
+    const response = await axios.get(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/containers/templates/`,
+    )
+    return response.data
 }
 
 export const pullTemplateImage = async (image_name: string) => {
-    return fetch(
+    const response = await axios.get(
         `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/containers/templates/${image_name}/images/`,
-        {
-            headers: {
-                "Content-Type": "application/json",
-            },
-        },
     )
-        .then((response) => response.json())
-        .then((data) => {
-            return data
-        })
-        .catch((error) => {
-            console.error("Error fetching template image:", error)
-            throw error
-        })
+    return response.data
 }
 
 export const startTemplate = async (templateObj: AppTemplate) => {
-    try {
-        const response = await axios.post(
-            `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/add/from_template/`,
-            templateObj,
-            {
-                headers: {
-                    accept: "application/json",
-                    "Content-Type": "application/json",
-                },
-            },
-        )
-        return response
-    } catch (error) {
-        console.error("Start Template Error => ", error)
-        throw error
-    }
+    const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/app_variant/add/from_template/`,
+        templateObj,
+    )
+    return response
 }
 
 export const fetchData = async (url: string): Promise<any> => {
diff --git a/agenta-web/src/pages/apps/[app_name]/testsets/index.tsx b/agenta-web/src/pages/apps/[app_name]/testsets/index.tsx
index 86a502a7d40..366267f862f 100644
--- a/agenta-web/src/pages/apps/[app_name]/testsets/index.tsx
+++ b/agenta-web/src/pages/apps/[app_name]/testsets/index.tsx
@@ -8,6 +8,7 @@ import {useState, useEffect} from "react"
 import {formatDate} from "@/lib/helpers/dateTimeHelper"
 import {DeleteOutlined} from "@ant-design/icons"
 import {deleteTestsets} from "@/lib/services/api"
+import axios from "@/lib/helpers/axiosConfig"
 import {createUseStyles} from "react-jss"
 
 type testsetTableDatatype = {
@@ -42,8 +43,8 @@ const useStyles = createUseStyles({
 })
 
 const fetchData = async (url: string): Promise<any> => {
-    const response = await fetch(url)
-    return response.json()
+    const response = await axios.get(url)
+    return response.data
 }
 
 export default function testsets() {
diff --git a/agenta-web/src/pages/apps/[app_name]/testsets/new/upload/index.tsx b/agenta-web/src/pages/apps/[app_name]/testsets/new/upload/index.tsx
index f71c3aac784..03b257bfeab 100644
--- a/agenta-web/src/pages/apps/[app_name]/testsets/new/upload/index.tsx
+++ b/agenta-web/src/pages/apps/[app_name]/testsets/new/upload/index.tsx
@@ -1,7 +1,7 @@
 import {UploadOutlined} from "@ant-design/icons"
 import {Alert, Button, Form, Input, Space, Spin, Upload, message} from "antd"
 import {useState} from "react"
-import axios from "axios"
+import axios from "@/lib/helpers/axiosConfig"
 import {useRouter} from "next/router"
 import {createUseStyles} from "react-jss"
 
@@ -50,7 +50,7 @@ export default function AddANewTestset() {
             try {
                 setUploadLoading(true)
                 // TODO: move to api.ts
-                const response = await axios.post(
+                await axios.post(
                     `${process.env.NEXT_PUBLIC_AGENTA_API_URL}/api/testsets/upload`,
                     formData,
                     {
@@ -59,22 +59,10 @@ export default function AddANewTestset() {
                         },
                     },
                 )
-
-                if (response.status === 200) {
-                    // File uploaded successfully
-                    const data = response.data
-
-                    setUploadLoading(false)
-                    form.resetFields()
-
-                    router.push(`/apps/${app_name}/testsets`)
-                } else {
-                    // Handle error
-                    console.error("Failed to upload file:", response.status)
-                    setUploadLoading(false) // Set loading state to false after failed upload
-                }
-            } catch (error) {
-                console.error("Error uploading file", error)
+                form.resetFields()
+                router.push(`/apps/${app_name}/testsets`)
+            } finally {
+                setUploadLoading(false)
             }
         }
     }