diff --git a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
index ab90134f2..b28f7dbf6 100644
--- a/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
+++ b/agenta-web/src/components/pages/settings/Secrets/Secrets.tsx
@@ -4,42 +4,20 @@ import {
     removeSingleLlmProviderKey,
     getAllProviderLlmKeys,
     LlmProvider,
-    getApikeys,
 } from "@/lib/helpers/llmProviders"
 import {Button, Input, Space, Typography, message} from "antd"
 import {useState} from "react"
-import {createUseStyles} from "react-jss"
 
 const {Title, Text} = Typography
 
-const useStyles = createUseStyles({
-    title: {
-        marginTop: 0,
-    },
-    container: {
-        marginLeft: 0,
-    },
-    apiContainer: {
-        margin: "0px 0",
-    },
-    input: {
-        display: "flex",
-        alignItems: "center",
-        width: 420,
-        marginBottom: 8,
-        marginLeft: 8,
-    },
-})
-
 export default function Secrets() {
-    const classes = useStyles()
     const [llmProviderKeys, setLlmProviderKeys] = useState(getAllProviderLlmKeys())
     const [messageAPI, contextHolder] = message.useMessage()
 
     return (
         <div data-cy="secrets">
             {contextHolder}
-            <Title level={3} className={classes.title}>
+            <Title level={3} className={"mt-0"}>
                 LLM Keys
             </Title>
 
@@ -48,50 +26,50 @@ export default function Secrets() {
                 servers!
             </Text>
 
-            <div className={classes.container}>
+            <div>
                 <Title level={5}>Available Providers</Title>
 
-                <div className={classes.apiContainer}>
+                <div>
                     {llmProviderKeys.map(({title, key}: LlmProvider, i: number) => (
-                        <div key={i}>
-                            <Space direction="horizontal" key={i}>
-                                <Input.Password
-                                    data-cy="openai-api-input"
-                                    value={key}
-                                    onChange={(e) => {
-                                        const newLlmProviderKeys = [...llmProviderKeys]
-                                        newLlmProviderKeys[i].key = e.target.value
-                                        setLlmProviderKeys(newLlmProviderKeys)
-                                    }}
-                                    addonBefore={`${title}`}
-                                    visibilityToggle={false}
-                                    className={classes.input}
-                                />
-                                <Button
-                                    data-cy="openai-api-save"
-                                    disabled={key === getLlmProviderKey(title) || !key}
-                                    onClick={() => {
-                                        saveLlmProviderKey(title, key)
-                                        messageAPI.success("The secret is saved")
-                                    }}
-                                >
-                                    Save
-                                </Button>
-                                <Button
-                                    onClick={() => {
-                                        removeSingleLlmProviderKey(title)
+                        <Space direction="horizontal" key={i} className="mb-2 ml-2">
+                            <Input.Password
+                                data-cy="openai-api-input"
+                                value={key}
+                                onChange={(e) => {
+                                    const newLlmProviderKeys = [...llmProviderKeys]
+                                    newLlmProviderKeys[i].key = e.target.value
+                                    setLlmProviderKeys(newLlmProviderKeys)
+                                }}
+                                addonBefore={`${title}`}
+                                visibilityToggle={false}
+                                className={"w-[420px]"}
+                            />
+                            <Button
+                                data-cy="openai-api-save"
+                                type="primary"
+                                disabled={key === getLlmProviderKey(title) || !key}
+                                onClick={() => {
+                                    saveLlmProviderKey(title, key)
+                                    messageAPI.success("The secret is saved")
+                                }}
+                            >
+                                Save
+                            </Button>
+                            <Button
+                                disabled={!Boolean(key)}
+                                onClick={() => {
+                                    removeSingleLlmProviderKey(title)
 
-                                        const newLlmProviderKeys = [...llmProviderKeys]
-                                        newLlmProviderKeys[i].key = ""
-                                        setLlmProviderKeys(newLlmProviderKeys)
+                                    const newLlmProviderKeys = [...llmProviderKeys]
+                                    newLlmProviderKeys[i].key = ""
+                                    setLlmProviderKeys(newLlmProviderKeys)
 
-                                        messageAPI.warning("The secret is deleted")
-                                    }}
-                                >
-                                    Delete
-                                </Button>
-                            </Space>
-                        </div>
+                                    messageAPI.warning("The secret is deleted")
+                                }}
+                            >
+                                Delete
+                            </Button>
+                        </Space>
                     ))}
                 </div>
             </div>