diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index aee1dbd33..cfc67bdb4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -114,7 +114,7 @@ export default function ParameterComponent({
     const logs = (data?.logs[outputName] ?? [])[0];
     if (Array.isArray(logs) && logs.length > 1) {
       return logs.some(
-        (log) => log.type === "error" || log.type === "ValueError"
+        (log) => log.type === "error" || log.type === "ValueError",
       );
     } else {
       return logs?.type === "error" || logs?.type === "ValueError";
@@ -156,7 +156,7 @@ export default function ParameterComponent({
     handleUpdateValues,
     debouncedHandleUpdateValues,
     setNode,
-    setIsLoading
+    setIsLoading,
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -164,7 +164,7 @@ export default function ParameterComponent({
     name,
     takeSnapshot,
     setNode,
-    updateNodeInternals
+    updateNodeInternals,
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -173,13 +173,13 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
     ) ?? false;
 
   let disabledOutput =
     edges.some(
       (edge) =>
-        edge.sourceHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
+        edge.sourceHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -190,7 +190,7 @@ export default function ParameterComponent({
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false
+    skipSnapshot: boolean | undefined = false,
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -304,14 +304,14 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5" : "my-12 -mr-0.5",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : ""
+                !showNode ? "mt-0" : "",
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
               }}
               onClick={() => {
                 setFilterEdge(
-                  groupByFamily(myData, tooltipTitle!, left, nodes!)
+                  groupByFamily(myData, tooltipTitle!, left, nodes!),
                 );
               }}
             ></Handle>
@@ -341,8 +341,7 @@ export default function ParameterComponent({
             <div className="flex-1">
               <Button
                 disabled={disabledOutput}
-                variant="none"
-                size="none"
+                unstyled
                 onClick={() => handleUpdateOutputHide()}
                 data-testid={`output-inspection-${title.toLowerCase()}`}
               >
@@ -366,7 +365,7 @@ export default function ParameterComponent({
             </ShadTooltip>
           ) : (
             <div className="flex gap-2">
-              <span className={!left && data.node?.frozen ? " text-ice" : ""}>
+              <span className={!left && data.node?.frozen ? "text-ice" : ""}>
                 {renderTitle()}
               </span>
               {!left && (
@@ -380,8 +379,7 @@ export default function ParameterComponent({
                   }
                 >
                   <Button
-                    variant="none"
-                    size="none"
+                    unstyled
                     disabled={!displayOutputPreview || unknownOutput}
                     onClick={() => setOpenOutputModal(true)}
                     data-testid={`output-inspection-${title.toLowerCase()}`}
@@ -389,7 +387,7 @@ export default function ParameterComponent({
                     {errorOutput ? (
                       <IconComponent
                         className={classNames(
-                          "h-5 w-5 rounded-md text-status-red"
+                          "h-5 w-5 rounded-md text-status-red",
                         )}
                         name={"X"}
                       />
@@ -398,8 +396,8 @@ export default function ParameterComponent({
                         className={classNames(
                           "h-5 w-5 rounded-md",
                           displayOutputPreview && !unknownOutput
-                            ? " hover:text-medium-indigo"
-                            : " cursor-not-allowed text-muted-foreground"
+                            ? "hover:text-medium-indigo"
+                            : "cursor-not-allowed text-muted-foreground",
                         )}
                         name={"ScanEye"}
                       />
@@ -430,7 +428,10 @@ export default function ParameterComponent({
         {left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? (
           <></>
         ) : (
-          <Button className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted">
+          <Button
+            unstyled
+            className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"
+          >
             <div className="flex">
               <ShadTooltip
                 styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
@@ -457,12 +458,12 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background"
+                    "h-3 w-3 rounded-full border-2 bg-background",
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => {
                     setFilterEdge(
-                      groupByFamily(myData, tooltipTitle!, left, nodes!)
+                      groupByFamily(myData, tooltipTitle!, left, nodes!),
                     );
                   }}
                 />
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 50beb268e..ba1b6d77a 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -440,8 +440,7 @@ export default function GenericNode({
                         <ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
                           <Button
                             onClick={handleUpdateCode}
-                            variant="none"
-                            size="none"
+                            unstyled
                             className={"group p-1"}
                             loading={loadingUpdate}
                           >
@@ -615,8 +614,7 @@ export default function GenericNode({
                       setValidationStatus(null);
                       buildFlow({ stopNodeId: data.id });
                     }}
-                    variant="none"
-                    size="none"
+                    unstyled
                     className="group p-1"
                   >
                     <div
@@ -844,8 +842,7 @@ export default function GenericNode({
                   )}
                 >
                   <Button
-                    variant="none"
-                    size="none"
+                    unstyled
                     className="left-0 right-0 rounded-full border bg-background"
                     onClick={() => setShowHiddenOutputs(!showHiddenOutputs)}
                   >
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index da90b7f3d..5e54de42c 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -52,7 +52,7 @@ export default function Header(): JSX.Element {
   const profileImageUrl =
     `${BACKEND_URL.slice(
       0,
-      BACKEND_URL.length - 1
+      BACKEND_URL.length - 1,
     )}${BASE_URL_API}files/profile_pictures/${userData?.profile_image}` ??
     profileCircle;
   async function checkForChanges(): Promise<void> {
@@ -65,7 +65,7 @@ export default function Header(): JSX.Element {
     const lastFlowVisitedIndex = routeHistory
       .reverse()
       .findIndex(
-        (path) => path.includes("/flow/") && path !== location.pathname
+        (path) => path.includes("/flow/") && path !== location.pathname,
       );
 
     const lastFlowVisited = routeHistory[lastFlowVisitedIndex];
@@ -91,8 +91,7 @@ export default function Header(): JSX.Element {
         </Link>
         {showArrowReturnIcon && (
           <Button
-            variant="none"
-            size="none"
+            unstyled
             onClick={() => {
               checkForChanges();
               redirectToLastLocation();
@@ -198,8 +197,7 @@ export default function Header(): JSX.Element {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
-                  variant="none"
-                  size="none"
+                  unstyled
                   data-testid="user-profile-settings"
                   className="shrink-0"
                 >
@@ -207,7 +205,7 @@ export default function Header(): JSX.Element {
                     src={
                       `${BACKEND_URL.slice(
                         0,
-                        BACKEND_URL.length - 1
+                        BACKEND_URL.length - 1,
                       )}${BASE_URL_API}files/profile_pictures/${
                         userData?.profile_image ?? "Space/046-rocket.svg"
                       }` ?? profileCircle
@@ -225,7 +223,7 @@ export default function Header(): JSX.Element {
                           src={
                             `${BACKEND_URL.slice(
                               0,
-                              BACKEND_URL.length - 1
+                              BACKEND_URL.length - 1,
                             )}${BASE_URL_API}files/profile_pictures/${
                               userData?.profile_image ?? "Space/046-rocket.svg"
                             }` ?? profileCircle
diff --git a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
index 674d39e1e..8469f6b45 100644
--- a/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
+++ b/src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
@@ -31,7 +31,7 @@ const SideBarFoldersButtonsComponent = ({
   const [foldersNames, setFoldersNames] = useState({});
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const [editFolders, setEditFolderName] = useState(
-    folders.map((obj) => ({ name: obj.name, edit: false }))
+    folders.map((obj) => ({ name: obj.name, edit: false })),
   );
   const uploadFolder = useFolderStore((state) => state.uploadFolder);
   const currentFolder = pathname.split("/");
@@ -58,7 +58,7 @@ const SideBarFoldersButtonsComponent = ({
 
   const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
     folderId,
-    handleFolderChange
+    handleFolderChange,
   );
 
   const handleUploadFlowsToFolder = () => {
@@ -86,7 +86,7 @@ const SideBarFoldersButtonsComponent = ({
     addFolder({ name: "New Folder", parent_id: null, description: "" }).then(
       (res) => {
         refreshFolders();
-      }
+      },
     );
   }
 
@@ -104,7 +104,6 @@ const SideBarFoldersButtonsComponent = ({
     folders.map((obj) => ({ name: obj.name, edit: false }));
   }, [folders]);
 
-
   const handleEditNameFolder = async (item) => {
     const newEditFolders = editFolders.map((obj) => {
       if (obj.name === item.name) {
@@ -122,30 +121,24 @@ const SideBarFoldersButtonsComponent = ({
         ...item,
         name: foldersNames[item.name],
         flows: item.flows?.length > 0 ? item.flows : [],
-        components:
-          item.components?.length > 0
-            ? item.components
-            : [],
+        components: item.components?.length > 0 ? item.components : [],
       };
-      const updatedFolder = await updateFolder(
-        body,
-        item.id!
-      );
-      
+      const updatedFolder = await updateFolder(body, item.id!);
+
       const updatedFolderIndex = folders.findIndex(
-        (f) => f.id === updatedFolder.id
+        (f) => f.id === updatedFolder.id,
       );
 
       const updateFolders = [...folders];
       updateFolders[updatedFolderIndex] = updatedFolder;
-      
+
       setFolders(updateFolders);
       setFoldersNames({});
       setEditFolderName(
         folders.map((obj) => ({
           name: obj.name,
           edit: false,
-        }))
+        })),
       );
     } else {
       setFoldersNames((old) => ({
@@ -153,7 +146,7 @@ const SideBarFoldersButtonsComponent = ({
         [item.name]: item.name,
       }));
     }
-  }
+  };
 
   return (
     <>
@@ -183,7 +176,7 @@ const SideBarFoldersButtonsComponent = ({
         <>
           {folders.map((item, index) => {
             const editFolderName = editFolders?.filter(
-              (folder) => folder.name === item.name
+              (folder) => folder.name === item.name,
             )[0];
             return (
               <div
@@ -199,7 +192,7 @@ const SideBarFoldersButtonsComponent = ({
                     ? "border border-border bg-muted hover:bg-muted"
                     : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
                   "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
-                  folderIdDragging === item.id! ? "bg-border" : ""
+                  folderIdDragging === item.id! ? "bg-border" : "",
                 )}
                 onClick={() => handleChangeFolder!(item.id!)}
               >
@@ -269,7 +262,7 @@ const SideBarFoldersButtonsComponent = ({
                               folders.map((obj) => ({
                                 name: obj.name,
                                 edit: false,
-                              }))
+                              })),
                             );
                           }
                           if (e.key === "Enter") {
@@ -278,8 +271,8 @@ const SideBarFoldersButtonsComponent = ({
                           handleKeyDown(e, e.key, "");
                         }}
                         autoFocus={true}
-                        onBlur={async () => { handleEditNameFolder(item)
-                          
+                        onBlur={async () => {
+                          handleEditNameFolder(item);
                         }}
                         value={foldersNames[item.name]}
                         id={`input-folder-${item.name}`}
@@ -314,8 +307,7 @@ const SideBarFoldersButtonsComponent = ({
                       e.stopPropagation();
                       e.preventDefault();
                     }}
-                    size="none"
-                    variant="none"
+                    unstyled
                   >
                     <IconComponent
                       name={"Download"}
diff --git a/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx b/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
index 4b0ac5373..05d3ea271 100644
--- a/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/TableOptions/index.tsx
@@ -22,8 +22,7 @@ export default function TableOptions({
         <div>
           <ShadTooltip content="Reset Columns">
             <Button
-              variant="none"
-              size="none"
+              unstyled
               onClick={() => {
                 resetGrid();
               }}
@@ -33,7 +32,7 @@ export default function TableOptions({
                 name="RotateCcw"
                 strokeWidth={2}
                 className={cn(
-                  "h-5 w-5 text-primary transition-all hover:text-accent-foreground"
+                  "h-5 w-5 text-primary transition-all hover:text-accent-foreground",
                 )}
               />
             </Button>
@@ -50,12 +49,7 @@ export default function TableOptions({
                 )
               }
             >
-              <Button
-                variant="none"
-                size="none"
-                onClick={duplicateRow}
-                disabled={!hasSelection}
-              >
+              <Button unstyled onClick={duplicateRow} disabled={!hasSelection}>
                 <IconComponent
                   name="Copy"
                   className={cn("h-5 w-5 text-primary transition-all")}
@@ -75,17 +69,12 @@ export default function TableOptions({
                 )
               }
             >
-              <Button
-                variant="none"
-                size="none"
-                onClick={deleteRow}
-                disabled={!hasSelection}
-              >
+              <Button unstyled onClick={deleteRow} disabled={!hasSelection}>
                 <IconComponent
                   name="Trash2"
                   className={cn(
                     "h-5 w-5 text-primary transition-all",
-                    !hasSelection ? "" : "hover:text-status-red"
+                    !hasSelection ? "" : "hover:text-status-red",
                   )}
                 />
               </Button>
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index 76f2316a0..681b86e1b 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -20,7 +20,6 @@ const buttonVariants = cva(
           "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "underline-offset-4 hover:underline text-primary",
-        none: "",
       },
       size: {
         default: "h-10 py-2 px-4",
@@ -28,14 +27,13 @@ const buttonVariants = cva(
         xs: "py-0.5 px-3 rounded-md",
         lg: "h-11 px-8 rounded-md",
         icon: "py-1 px-1 rounded-md",
-        none: "",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -43,6 +41,7 @@ export interface ButtonProps
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
   loading?: boolean;
+  unstyled?: boolean;
 }
 
 function toTitleCase(text: string) {
@@ -57,6 +56,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     {
       className,
       variant,
+      unstyled,
       size,
       loading,
       type,
@@ -65,7 +65,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const Comp = asChild ? Slot : "button";
     let newChildren = children;
@@ -75,7 +75,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <>
         <Comp
-          className={cn(buttonVariants({ variant, size, className }))}
+          className={
+            !unstyled ? buttonVariants({ variant, size, className }) : className
+          }
           disabled={loading || disabled}
           {...(asChild ? {} : { type: type || "button" })}
           ref={ref}
@@ -97,7 +99,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         </Comp>
       </>
     );
-  }
+  },
 );
 Button.displayName = "Button";
 
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
index 03d9455fa..81f42675c 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/buttonSendWrapper/index.tsx
@@ -28,13 +28,12 @@ const ButtonSendWrapper = ({
         noInput
           ? "bg-high-indigo text-background"
           : chatValue
-          ? "text-primary"
-          : "bg-chat-send text-background"
+            ? "text-primary"
+            : "bg-chat-send text-background",
       )}
       disabled={lockChat || saveLoading}
       onClick={(): void => send()}
-      variant="none"
-      size="none"
+      unstyled
     >
       <Case
         condition={
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
index 17ca897ea..8876c4517 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/uploadFileButton/index.tsx
@@ -22,8 +22,7 @@ const UploadFileButton = ({
           lockChat ? "cursor-not-allowed" : "hover:text-muted-foreground"
         }`}
         onClick={handleButtonClick}
-        variant="none"
-        size="none"
+        unstyled
       >
         <ForwardedIconComponent name="PaperclipIcon" />
       </Button>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx
index 7e706895e..1fdca0395 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/fileComponent/components/downloadButton/downloadButton.tsx
@@ -14,7 +14,7 @@ export default function DownloadButton({
         className={`absolute right-1 top-1 rounded-md bg-muted text-sm font-bold text-foreground`}
       >
         <Button
-          variant={"none"}
+          unstyled
           className="bg-transparent px-2 py-1 text-ring"
           onClick={handleDownload}
         >
diff --git a/src/frontend/src/modals/IOModal/components/chatView/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
index 287bb73ff..4337a83af 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@@ -59,7 +59,7 @@ export default function ChatView({
       //
       .filter(
         (output) =>
-          output.data.message || (!output.data.message && output.artifacts)
+          output.data.message || (!output.data.message && output.artifacts),
       )
       .map((output, index) => {
         try {
@@ -140,7 +140,7 @@ export default function ChatView({
   function updateChat(
     chat: ChatMessageType,
     message: string,
-    stream_url?: string
+    stream_url?: string,
   ) {
     chat.message = message;
     updateFlowPool(chat.componentId, {
@@ -156,7 +156,7 @@ export default function ChatView({
     setIsDragging,
     setFiles,
     currentFlowId,
-    setErrorData
+    setErrorData,
   );
 
   return (
@@ -171,8 +171,7 @@ export default function ChatView({
         <div className="eraser-position">
           <Button
             className="flex gap-1"
-            size="none"
-            variant="none"
+            unstyled
             disabled={lockChat}
             onClick={() => handleSelectChange("builds")}
           >
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index f1dc14182..5b0d5aedb 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -36,25 +36,25 @@ export default function IOModal({
   const allNodes = useFlowStore((state) => state.nodes);
   const setMessages = useMessagesStore((state) => state.setMessages);
   const inputs = useFlowStore((state) => state.inputs).filter(
-    (input) => input.type !== "ChatInput"
+    (input) => input.type !== "ChatInput",
   );
   const chatInput = useFlowStore((state) => state.inputs).find(
-    (input) => input.type === "ChatInput"
+    (input) => input.type === "ChatInput",
   );
   const outputs = useFlowStore((state) => state.outputs).filter(
-    (output) => output.type !== "ChatOutput"
+    (output) => output.type !== "ChatOutput",
   );
   const chatOutput = useFlowStore((state) => state.outputs).find(
-    (output) => output.type === "ChatOutput"
+    (output) => output.type === "ChatOutput",
   );
   const nodes = useFlowStore((state) => state.nodes).filter(
     (node) =>
       inputs.some((input) => input.id === node.id) ||
-      outputs.some((output) => output.id === node.id)
+      outputs.some((output) => output.id === node.id),
   );
   const haveChat = chatInput || chatOutput;
   const [selectedTab, setSelectedTab] = useState(
-    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
+    inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -131,7 +131,7 @@ export default function IOModal({
 
   const { handleRemoveSession } = useRemoveSession(
     setSuccessData,
-    setErrorData
+    setErrorData,
   );
 
   useEffect(() => {
@@ -155,7 +155,7 @@ export default function IOModal({
         ({ rows, columns }) => {
           setMessages(rows);
           setColumns(columns);
-        }
+        },
       );
     }
   }, [open]);
@@ -194,7 +194,7 @@ export default function IOModal({
           <div className="flex-max-width h-full">
             <div
               className={cn(
-                "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
+                "mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
               )}
             >
               <Tabs
@@ -223,11 +223,11 @@ export default function IOModal({
                 <TabsContent value={"1"} className="api-modal-tabs-content">
                   {nodes
                     .filter((node) =>
-                      inputs.some((input) => input.id === node.id)
+                      inputs.some((input) => input.id === node.id),
                     )
                     .map((node, index) => {
                       const input = inputs.find(
-                        (input) => input.id === node.id
+                        (input) => input.id === node.id,
                       )!;
                       return (
                         <div
@@ -284,11 +284,11 @@ export default function IOModal({
                 <TabsContent value={"2"} className="api-modal-tabs-content">
                   {nodes
                     .filter((node) =>
-                      outputs.some((output) => output.id === node.id)
+                      outputs.some((output) => output.id === node.id),
                     )
                     .map((node, index) => {
                       const output = outputs.find(
-                        (output) => output.id === node.id
+                        (output) => output.id === node.id,
                       )!;
                       const textOutputValue =
                         (flowPool[node!.id] ?? [])[
@@ -379,7 +379,7 @@ export default function IOModal({
                           </ShadTooltip>
                           <div className="flex shrink-0 items-center justify-center gap-2 align-middle">
                             <Button
-                              variant="none"
+                              unstyled
                               size="icon"
                               onClick={(e) => {
                                 e.preventDefault();
@@ -439,7 +439,7 @@ export default function IOModal({
                 <div
                   className={cn(
                     "flex h-full w-full flex-col items-start gap-4 pt-4",
-                    !selectedViewField ? "hidden" : ""
+                    !selectedViewField ? "hidden" : "",
                   )}
                 >
                   <div className="font-xl flex items-center justify-center gap-3 font-semibold">
@@ -458,7 +458,7 @@ export default function IOModal({
                   </div>
                   <div className="h-full w-full">
                     {inputs.some(
-                      (input) => input.id === selectedViewField.id
+                      (input) => input.id === selectedViewField.id,
                     ) && (
                       <IOFieldView
                         type={InputOutput.INPUT}
@@ -468,7 +468,7 @@ export default function IOModal({
                       />
                     )}
                     {outputs.some(
-                      (output) => output.id === selectedViewField.id
+                      (output) => output.id === selectedViewField.id,
                     ) && (
                       <IOFieldView
                         type={InputOutput.OUTPUT}
@@ -478,12 +478,12 @@ export default function IOModal({
                       />
                     )}
                     {sessions.some(
-                      (session) => session === selectedViewField.id
+                      (session) => session === selectedViewField.id,
                     ) && (
                       <SessionView
                         rows={messages.filter(
                           (message) =>
-                            message.session_id === selectedViewField.id
+                            message.session_id === selectedViewField.id,
                         )}
                       />
                     )}
@@ -493,7 +493,7 @@ export default function IOModal({
               <div
                 className={cn(
                   "flex h-full w-full",
-                  selectedViewField ? "hidden" : ""
+                  selectedViewField ? "hidden" : "",
                 )}
               >
                 {haveChat ? (
@@ -525,7 +525,7 @@ export default function IOModal({
                   "h-4 w-4",
                   isBuilding
                     ? "animate-spin"
-                    : "fill-current text-medium-indigo"
+                    : "fill-current text-medium-indigo",
                 )}
               />
             ),
diff --git a/src/frontend/src/modals/secretKeyModal/index.tsx b/src/frontend/src/modals/secretKeyModal/index.tsx
index bb928ee32..eada8c66a 100644
--- a/src/frontend/src/modals/secretKeyModal/index.tsx
+++ b/src/frontend/src/modals/secretKeyModal/index.tsx
@@ -112,8 +112,7 @@ export default function SecretKeyModal({
                 onClick={() => {
                   handleCopyClick();
                 }}
-                variant="none"
-                size="none"
+                unstyled
               >
                 {textCopied ? (
                   <IconComponent name="Copy" className="h-4 w-4" />
diff --git a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
index 1f0db8047..bb0979411 100644
--- a/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
@@ -3,6 +3,7 @@ import { NodeToolbar } from "reactflow";
 import { GradientGroup } from "../../../../icons/GradientSparkles";
 import useFlowStore from "../../../../stores/flowStore";
 import { validateSelection } from "../../../../utils/reactflowUtils";
+import { Button } from "../../../../components/ui/button";
 export default function SelectionMenu({
   onClick,
   nodes,
@@ -13,7 +14,7 @@ export default function SelectionMenu({
   const [disable, setDisable] = useState<boolean>(
     lastSelection && edges.length > 0
       ? validateSelection(lastSelection!, edges).length > 0
-      : false
+      : false,
   );
   const [isOpen, setIsOpen] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
@@ -61,7 +62,8 @@ export default function SelectionMenu({
             (isTransitioning ? " opacity-100" : " opacity-0")
           }
         >
-          <button
+          <Button
+            unstyled
             className={`${
               disable
                 ? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
@@ -77,7 +79,7 @@ export default function SelectionMenu({
               disabled={disable}
             />
             Group
-          </button>
+          </Button>
         </div>
       </div>
     </NodeToolbar>
diff --git a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
index 26999fbd5..cdd152229 100644
--- a/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/headerComponent/index.tsx
@@ -52,8 +52,7 @@ const HeaderComponent = ({
               }
             >
               <Button
-                variant="none"
-                size="none"
+                unstyled
                 onClick={handleExport}
                 disabled={disableFunctions}
               >
@@ -75,8 +74,7 @@ const HeaderComponent = ({
               }
             >
               <Button
-                variant="none"
-                size="none"
+                unstyled
                 onClick={handleDuplicate}
                 disabled={disableFunctions}
               >
@@ -98,8 +96,7 @@ const HeaderComponent = ({
               }
             >
               <Button
-                variant="none"
-                size="none"
+                unstyled
                 onClick={handleDelete}
                 disabled={disableFunctions}
               >
@@ -107,7 +104,7 @@ const HeaderComponent = ({
                   name="Trash2"
                   className={cn(
                     "h-5 w-5 text-primary transition-all",
-                    disableFunctions ? "" : "hover:text-status-red"
+                    disableFunctions ? "" : "hover:text-status-red",
                   )}
                 />
               </Button>
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
index edfe58a16..ac6a215be 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
@@ -49,8 +49,7 @@ export default function ProfilePictureChooserComponent({
                 {profilePictures[folder].map((path, idx) => (
                   <Button
                     ref={value === folder + "/" + path ? ref : undefined}
-                    size="none"
-                    variant="none"
+                    unstyled
                     onClick={() => onChange(folder + "/" + path)}
                     className="shrink-0 px-0.5 py-2"
                   >
@@ -58,7 +57,7 @@ export default function ProfilePictureChooserComponent({
                       key={idx}
                       src={`${BACKEND_URL.slice(
                         0,
-                        BACKEND_URL.length - 1
+                        BACKEND_URL.length - 1,
                       )}${BASE_URL_API}files/profile_pictures/${
                         folder + "/" + path
                       }`}