diff --git a/agenta-web/src/components/Playground/Playground.tsx b/agenta-web/src/components/Playground/Playground.tsx
index 0377c4cf80..70110249c1 100644
--- a/agenta-web/src/components/Playground/Playground.tsx
+++ b/agenta-web/src/components/Playground/Playground.tsx
@@ -2,7 +2,7 @@ import React, {useState, useEffect, useRef} from "react"
 import {Button, Tabs, message} from "antd"
 import ViewNavigation from "./ViewNavigation"
 import NewVariantModal from "./NewVariantModal"
-import {fetchEnvironments, fetchVariants} from "@/lib/services/api"
+import {fetchEnvironments, fetchVariants, saveNewVariant} from "@/lib/services/api"
 import {Variant, PlaygroundTabsItem, Environment} from "@/lib/Types"
 import {AppstoreOutlined, SyncOutlined} from "@ant-design/icons"
 import {useRouter} from "next/router"
@@ -35,7 +35,7 @@ const Playground: React.FC = () => {
     const [compareMode, setCompareMode] = useLocalStorage("compareMode", false)
     const tabID = useRef("")
 
-    const addTab = () => {
+    const addTab = async () => {
         // Find the template variant
         const templateVariant = variants.find(
             (variant) => variant.variantName === templateVariantName,
@@ -77,8 +77,20 @@ const Playground: React.FC = () => {
             configName: newVariantName,
         }
 
-        setVariants((prevState: any) => [...prevState, newVariant])
-        setActiveKey(updateNewVariantName)
+        try {
+            await saveNewVariant(
+                newVariant.baseId!,
+                newVariant.variantName!,
+                newVariant.configName!,
+                [],
+            )
+            setVariants((prevState: any) => [...prevState, newVariant])
+            setActiveKey(updateNewVariantName)
+            setUnsavedVariants((prev) => ({...prev, [newVariant.variantName!]: false}))
+        } catch (error) {
+            message.error("Failed to add new variant. Please try again later.")
+            console.error("Error adding new variant:", error)
+        }
     }
 
     const removeTab = () => {
@@ -120,7 +132,7 @@ const Playground: React.FC = () => {
 
     useEffect(() => {
         fetchData()
-    }, [appId])
+    }, [appId, activeKey])
 
     // Load environments
     const [environments, setEnvironments] = useState<Environment[]>([])
diff --git a/agenta-web/src/components/Playground/Views/ParametersView.tsx b/agenta-web/src/components/Playground/Views/ParametersView.tsx
index 397dbeeaf7..04c3899f14 100644
--- a/agenta-web/src/components/Playground/Views/ParametersView.tsx
+++ b/agenta-web/src/components/Playground/Views/ParametersView.tsx
@@ -99,10 +99,6 @@ const ParametersView: React.FC<Props> = ({
     const [revisionNum, setRevisionNum] = useQueryParam("revision")
     const [promptRevisions, setPromptRevisions] = useState<IPromptRevisions[]>([])
 
-    useEffect(() => {
-        onStateChange(variant.persistent === false)
-    }, [])
-
     const onChange = (param: Parameter, newValue: number | string) => {
         handleParamChange(param.name, newValue)
     }