diff --git a/skyvern-frontend/src/components/ui/accordion.tsx b/skyvern-frontend/src/components/ui/accordion.tsx
index 1d8d2478..4b63b250 100644
--- a/skyvern-frontend/src/components/ui/accordion.tsx
+++ b/skyvern-frontend/src/components/ui/accordion.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { ChevronRightIcon } from "@radix-ui/react-icons";
import { cn } from "@/util/utils";
@@ -26,13 +26,13 @@ const AccordionTrigger = React.forwardRef<
svg]:rotate-180",
+ "flex flex-1 items-center gap-2 py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-90",
className,
)}
{...props}
>
+
{children}
-
));
diff --git a/skyvern-frontend/src/components/ui/hidden-copyable-input.tsx b/skyvern-frontend/src/components/ui/hidden-copyable-input.tsx
new file mode 100644
index 00000000..78b7a25d
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/hidden-copyable-input.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Button } from "./button";
+import { Input } from "./input";
+import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
+
+type Props = {
+ value: string;
+};
+
+function HiddenCopyableInput({ value }: Props) {
+ const [hidden, setHidden] = useState(true);
+ const [copied, setCopied] = useState(false);
+
+ const buttonText = hidden ? "Reveal" : copied ? "Copied" : "Copy";
+ const inputValue = hidden ? "**** **** **** ****" : value;
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+export { HiddenCopyableInput };
diff --git a/skyvern-frontend/src/routes/root/RootLayout.tsx b/skyvern-frontend/src/routes/root/RootLayout.tsx
index 24fa3c21..01ca6241 100644
--- a/skyvern-frontend/src/routes/root/RootLayout.tsx
+++ b/skyvern-frontend/src/routes/root/RootLayout.tsx
@@ -18,7 +18,7 @@ function RootLayout({ onLogout }: Props) {
return (
<>