diff --git a/agenta-web/src/components/ResultComponent/ResultComponent.tsx b/agenta-web/src/components/ResultComponent/ResultComponent.tsx
index 16f522ac9..e3c7961c6 100644
--- a/agenta-web/src/components/ResultComponent/ResultComponent.tsx
+++ b/agenta-web/src/components/ResultComponent/ResultComponent.tsx
@@ -1,6 +1,8 @@
+import {JSSTheme} from "@/lib/Types"
 import {CloseCircleFilled} from "@ant-design/icons"
 import {Result, Spin, Typography} from "antd"
 import React, {ReactNode} from "react"
+import {createUseStyles} from "react-jss"
 const {Title} = Typography
 
 interface ResultComponentProps {
@@ -10,17 +12,28 @@ interface ResultComponentProps {
     spinner?: boolean
 }
 
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    closeCircleIcon: {
+        color: "#ff4d4f",
+    },
+    title: {
+        textTransform: "capitalize",
+    },
+}))
+
 const ResultComponent: React.FC<ResultComponentProps> = ({status, title, subtitle, spinner}) => {
+    const classes = useStyles()
+
     return (
         <Result
-            icon={status === "error" && <CloseCircleFilled style={{color: "#ff4d4f"}} />}
+            icon={status === "error" && <CloseCircleFilled className={classes.closeCircleIcon} />}
             title={
-                <Title level={3} style={{textTransform: "capitalize"}}>
+                <Title level={3} className={classes.title}>
                     {title}
                 </Title>
             }
             subTitle={subtitle}
-            extra={spinner && <Spin size="large" />}
+            extra={spinner && <Spin />}
         />
     )
 }