diff --git a/frontend/package.json b/frontend/package.json
index 3ef38699..b888bc3a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -73,7 +73,6 @@
     "react-use-websocket": "^4.8.1",
     "reactflow": "^11.11.3",
     "sharp": "^0.33.4",
-    "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.1",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index daf43c4a..3250a5b4 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -173,9 +173,6 @@ importers:
       sharp:
         specifier: ^0.33.4
         version: 0.33.4
-      sonner:
-        specifier: ^1.4.41
-        version: 1.4.41(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.3.0
@@ -2669,11 +2666,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  glob@10.3.15:
-    resolution: {integrity: sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==}
-    engines: {node: '>=16 || 14 >=14.18'}
-    hasBin: true
-
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
 
@@ -3137,10 +3129,6 @@ packages:
     resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
     engines: {node: '>=14'}
 
-  lilconfig@3.1.1:
-    resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
-    engines: {node: '>=14'}
-
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -4104,12 +4092,6 @@ packages:
     resolution: {integrity: sha512-YTywJG93yxwHLgrYLZjlC75moVEX04LZM4FHfihjHe1FCXm+QaLOFfSf535aXOAd0ArVQMWUAe8ZPm4VtWyXaA==}
     engines: {node: '>=12'}
 
-  sonner@1.4.41:
-    resolution: {integrity: sha512-uG511ggnnsw6gcn/X+YKkWPo5ep9il9wYi3QJxHsYe7yTZ4+cOd1wuodOUmOpFuXL+/RE3R04LczdNCDygTDgQ==}
-    peerDependencies:
-      react: ^18.0.0
-      react-dom: ^18.0.0
-
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -4585,11 +4567,6 @@ packages:
     resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
     engines: {node: '>= 14'}
 
-  yaml@2.4.2:
-    resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
   yjs@13.6.15:
     resolution: {integrity: sha512-moFv4uNYhp8BFxIk3AkpoAnnjts7gwdpiG8RtyFiKbMtxKCS0zVZ5wPaaGpwC3V2N/K8TK8MwtSI3+WO9CHWjQ==}
     engines: {node: '>=16.0.0', npm: '>=8.0.0'}
@@ -7510,14 +7487,6 @@ snapshots:
       minipass: 7.1.1
       path-scurry: 1.11.1
 
-  glob@10.3.15:
-    dependencies:
-      foreground-child: 3.1.1
-      jackspeak: 2.3.6
-      minimatch: 9.0.4
-      minipass: 7.1.1
-      path-scurry: 1.11.1
-
   glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
@@ -8073,8 +8042,6 @@ snapshots:
 
   lilconfig@3.0.0: {}
 
-  lilconfig@3.1.1: {}
-
   lines-and-columns@1.2.4: {}
 
   linkify-it@5.0.0:
@@ -8704,8 +8671,8 @@ snapshots:
 
   postcss-load-config@4.0.2(postcss@8.4.38):
     dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.2
+      lilconfig: 3.0.0
+      yaml: 2.3.4
     optionalDependencies:
       postcss: 8.4.38
 
@@ -9306,11 +9273,6 @@ snapshots:
       snake-case: 3.0.4
       type-fest: 2.19.0
 
-  sonner@1.4.41(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
   source-map-js@1.2.0: {}
 
   source-map@0.5.7: {}
@@ -9409,7 +9371,7 @@ snapshots:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
       commander: 4.1.1
-      glob: 10.3.15
+      glob: 10.3.10
       lines-and-columns: 1.2.4
       mz: 2.7.0
       pirates: 4.0.6
@@ -9828,8 +9790,6 @@ snapshots:
 
   yaml@2.3.4: {}
 
-  yaml@2.4.2: {}
-
   yjs@13.6.15:
     dependencies:
       lib0: 0.2.94
diff --git a/frontend/src/app/settings/credentials/page.tsx b/frontend/src/app/settings/credentials/page.tsx
index 47aa800e..7f8c655a 100644
--- a/frontend/src/app/settings/credentials/page.tsx
+++ b/frontend/src/app/settings/credentials/page.tsx
@@ -33,7 +33,6 @@ import {
 } from "@/components/new-credential-dialog"
 import NoContent from "@/components/no-content"
 import { AlertNotification } from "@/components/notifications"
-import { DELETE_BUTTON_STYLE } from "@/styles/tailwind"
 
 export default function CredentialsPage() {
   const queryClient = useQueryClient()
@@ -135,7 +134,7 @@ function SecretsTable({
             description="Are you sure you want to delete this secret? This action cannot be undone."
             onConfirm={() => deleteFn(secret)}
           >
-            <Button size="sm" variant="ghost" className={DELETE_BUTTON_STYLE}>
+            <Button size="sm" variant="ghost">
               <Trash2Icon className="size-3.5" />
             </Button>
           </ConfirmationDialog>
diff --git a/frontend/src/components/badges.tsx b/frontend/src/components/badges.tsx
index da094ca5..4153cdd8 100644
--- a/frontend/src/components/badges.tsx
+++ b/frontend/src/components/badges.tsx
@@ -29,8 +29,8 @@ export function StatusBadge({ status, children, className }: StatusBadgeProps) {
         defaultStatusColor,
         "items-center gap-1",
         status &&
-          status in statusColors &&
-          statusColors[status as keyof typeof statusColors],
+        status in statusColors &&
+        statusColors[status as keyof typeof statusColors],
         className
       )}
     >
@@ -59,7 +59,7 @@ export function ComingSoonBadge({ className }: { className?: string }) {
     <Badge
       variant="outline"
       className={cn(
-        "border-2 border-emerald-500 bg-emerald-200  text-xs text-emerald-700",
+        "text-xs bg-white py-3",
         className
       )}
     >
diff --git a/frontend/src/components/console/control-panel.tsx b/frontend/src/components/console/control-panel.tsx
index be01d8a6..b58d4f13 100644
--- a/frontend/src/components/console/control-panel.tsx
+++ b/frontend/src/components/console/control-panel.tsx
@@ -28,7 +28,6 @@ import {
 import { ConfirmationDialog } from "@/components/confirmation-dialog"
 import { type WorkflowControlsForm } from "@/components/console/console"
 import { tileIconMapping } from "@/components/workspace/canvas/action-node"
-import { DELETE_BUTTON_STYLE } from "@/styles/tailwind"
 
 export const supportedInputTypes = [
   {
@@ -201,7 +200,7 @@ export function ConsolePanel({
             onConfirm={handleClearEvents}
           >
             <Button
-              className={cn("w-full", DELETE_BUTTON_STYLE)}
+              className={cn("w-full")}
               type="button"
               variant="outline"
             >
diff --git a/frontend/src/components/dashboard/create-workflow-button.tsx b/frontend/src/components/dashboard/create-workflow-button.tsx
index 7a0fd698..b2a02eec 100644
--- a/frontend/src/components/dashboard/create-workflow-button.tsx
+++ b/frontend/src/components/dashboard/create-workflow-button.tsx
@@ -5,7 +5,6 @@ import { PlusCircleIcon } from "lucide-react";
 
 import { createWorkflow } from "@/lib/flow";
 import { Button } from "@/components/ui/button";
-import { toast } from "@/components/ui/use-toast";
 
 const CreateWorkflowButton: React.FC = () => {
     const router = useRouter();
@@ -28,11 +27,6 @@ const CreateWorkflowButton: React.FC = () => {
 
             const response = await createWorkflow(title, description);
 
-            toast({
-                title: title,
-                description: description,
-            });
-
             // Redirect to the new workflow's page
             router.push(`/workflows/${response.id}`);
         } catch (error) {
diff --git a/frontend/src/components/nav/workflow-nav.tsx b/frontend/src/components/nav/workflow-nav.tsx
index 102e04fc..824e5ae3 100644
--- a/frontend/src/components/nav/workflow-nav.tsx
+++ b/frontend/src/components/nav/workflow-nav.tsx
@@ -42,7 +42,7 @@ export default function WorkflowNav() {
             id="enable-workflow"
             checked={isOnline}
             onCheckedChange={setIsOnline}
-            className="data-[state=checked]:bg-lime-400"
+            className="data-[state=checked]:bg-emerald-500"
           />
           <Label
             className="flex text-xs text-muted-foreground"
diff --git a/frontend/src/components/new-credential-dialog.tsx b/frontend/src/components/new-credential-dialog.tsx
index 5925a515..58df2dd5 100644
--- a/frontend/src/components/new-credential-dialog.tsx
+++ b/frontend/src/components/new-credential-dialog.tsx
@@ -32,12 +32,11 @@ import {
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
 import { toast } from "@/components/ui/use-toast"
-import { DELETE_BUTTON_STYLE } from "@/styles/tailwind"
 
 interface NewCredentialsDialogProps
   extends PropsWithChildren<
     DialogProps & React.HTMLAttributes<HTMLDivElement>
-  > {}
+  > { }
 
 export function NewCredentialsDialog({
   children,
@@ -204,7 +203,6 @@ export function NewCredentialsDialog({
                             <Button
                               type="button"
                               variant="ghost"
-                              className={DELETE_BUTTON_STYLE}
                               onClick={() => remove(index)}
                               disabled={fields.length === 1}
                             >
diff --git a/frontend/src/components/ui/pagination.tsx b/frontend/src/components/ui/pagination.tsx
new file mode 100644
index 00000000..7715f05a
--- /dev/null
+++ b/frontend/src/components/ui/pagination.tsx
@@ -0,0 +1,121 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
deleted file mode 100644
index 452f4d9f..00000000
--- a/frontend/src/components/ui/sonner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
diff --git a/frontend/src/components/workspace/canvas/action-node.tsx b/frontend/src/components/workspace/canvas/action-node.tsx
index e22afd33..36507ae6 100644
--- a/frontend/src/components/workspace/canvas/action-node.tsx
+++ b/frontend/src/components/workspace/canvas/action-node.tsx
@@ -6,7 +6,8 @@ import {
   BookText,
   CheckSquare,
   ChevronDownIcon,
-  CircleIcon,
+  CircleCheckBigIcon,
+  LayoutListIcon,
   Container,
   Copy,
   Delete,
@@ -44,6 +45,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { Separator } from "@/components/ui/separator"
 import { useToast } from "@/components/ui/use-toast"
 import { IntegrationNodeData } from "@/components/workspace/canvas/integration-node"
 
@@ -172,8 +174,8 @@ export default React.memo(function ActionNode({
   }, [id, toast])
 
   return (
-    <Card className={cn(selected && "shadow-xl drop-shadow-xl")}>
-      <CardHeader className="grid p-4 px-5">
+    <Card className={cn("min-w-72", selected && "shadow-xl drop-shadow-xl")}>
+      <CardHeader className="grid p-4 px-4">
         <div className="flex w-full items-center space-x-4">
           <Avatar>
             <AvatarImage className="bg-red-600" src="" alt={avatarImageAlt} />
@@ -183,7 +185,7 @@ export default React.memo(function ActionNode({
           </Avatar>
           <div className="flex w-full flex-1 justify-between space-x-12">
             <div className="flex flex-col">
-              <CardTitle className="flex w-full items-center justify-between text-sm font-medium leading-none">
+              <CardTitle className="flex w-full items-center justify-between text-xs font-medium leading-none">
                 <div className="flex w-full">
                   {title}
                   {type.startsWith("llm.") && (
@@ -191,7 +193,7 @@ export default React.memo(function ActionNode({
                   )}
                 </div>
               </CardTitle>
-              <CardDescription className="mt-1 text-sm text-muted-foreground">
+              <CardDescription className="mt-2 text-xs text-muted-foreground">
                 {typeToNodeSubtitle[type]}
               </CardDescription>
             </div>
@@ -223,22 +225,19 @@ export default React.memo(function ActionNode({
           </div>
         </div>
       </CardHeader>
-
-      <CardContent className="px-5 pb-4 pt-0">
-        <div className="flex space-x-4 text-xs text-muted-foreground">
-          <div className="flex items-center">
-            <CircleIcon
-              className={cn(
-                "mr-1 h-3 w-3",
-                isConfigured
-                  ? "fill-green-600 text-green-600"
-                  : "fill-gray-400 text-gray-400"
-              )}
-            />
-            <span className="capitalize">{isConfiguredMessage}</span>
+      <Separator />
+      <CardContent className="p-4 py-3">
+        <div className="grid grid-cols-2 space-x-4 text-xs text-muted-foreground">
+          <div className="flex items-center space-x-2">
+            {isConfigured ? (
+              <CircleCheckBigIcon className="text-emerald-500 size-4" />
+            ) : (
+              <LayoutListIcon className="text-gray-400 size-4" />
+            )}
+            <span className="capitalize text-xs">{isConfiguredMessage}</span>
           </div>
-          <div className="flex items-center">
-            <BellDotIcon className="mr-1 h-3 w-3" />
+          <div className="flex items-center justify-end">
+            <BellDotIcon className="mr-2 h-3 w-3" />
             <span>{numberOfEvents}</span>
           </div>
         </div>
diff --git a/frontend/src/components/workspace/panel/common.tsx b/frontend/src/components/workspace/panel/common.tsx
index 7986f93a..2618e2f4 100644
--- a/frontend/src/components/workspace/panel/common.tsx
+++ b/frontend/src/components/workspace/panel/common.tsx
@@ -35,7 +35,6 @@ import {
 } from "@/components/ui/tooltip"
 import { toast } from "@/components/ui/use-toast"
 import { ActionFieldOption } from "@/components/workspace/panel/action/schemas"
-import { DELETE_BUTTON_STYLE } from "@/styles/tailwind"
 
 export function processInputs(
   inputs: Record<string, any>
@@ -267,7 +266,6 @@ export function ActionFormArray<T extends FieldValues>({
                     type="button"
                     variant="outline"
                     size="icon"
-                    className={DELETE_BUTTON_STYLE}
                     onClick={() => remove(index)}
                   >
                     <Trash2Icon className="size-4" />
@@ -408,7 +406,6 @@ export function ActionFormFlatKVArray<T extends FieldValues>({
                   <Button
                     type="button"
                     variant="ghost"
-                    className={DELETE_BUTTON_STYLE}
                     onClick={() => remove(index)}
                     // If this field is optional, enable the delete button
                     disabled={!inputOption.optional && fields.length === 1}
diff --git a/frontend/src/components/workspace/panel/workflow/controls.tsx b/frontend/src/components/workspace/panel/workflow/controls.tsx
index dde0d41d..ddcc4adf 100644
--- a/frontend/src/components/workspace/panel/workflow/controls.tsx
+++ b/frontend/src/components/workspace/panel/workflow/controls.tsx
@@ -1,19 +1,11 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useState, useCallback } from "react"
 import * as React from "react"
 import { useWorkflowMetadata } from "@/providers/workflow"
 import { zodResolver } from "@hookform/resolvers/zod"
 
-import "@radix-ui/react-dialog"
-
-import { CaretSortIcon } from "@radix-ui/react-icons"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@radix-ui/react-popover"
-import { CheckIcon, Send } from "lucide-react"
+import { PlayIcon, ZapIcon } from "lucide-react"
 import { useForm } from "react-hook-form"
 import SyntaxHighlighter from "react-syntax-highlighter"
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
@@ -22,26 +14,24 @@ import { z } from "zod"
 import { Action, Workflow } from "@/types/schemas"
 import { stringToJSONSchema } from "@/types/validators"
 import { triggerWorkflow } from "@/lib/flow"
-import { cn, getActionKey } from "@/lib/utils"
+import { getActionKey } from "@/lib/utils"
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
 import { Button } from "@/components/ui/button"
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from "@/components/ui/command"
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Separator } from "@/components/ui/separator"
 import {
   Form,
   FormControl,
@@ -50,7 +40,7 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form"
-import { Separator } from "@/components/ui/separator"
+import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
 import { Textarea } from "@/components/ui/textarea"
 import { toast } from "@/components/ui/use-toast"
 
@@ -75,7 +65,6 @@ export function WorkflowControlsForm({
 }: {
   workflow: Workflow
 }): React.JSX.Element {
-  const [confirmationIsOpen, setConfirmationIsOpen] = useState(false)
   const form = useForm<TWorkflowControlsForm>({
     resolver: zodResolver(workflowControlsFormSchema),
     defaultValues: {
@@ -85,8 +74,9 @@ export function WorkflowControlsForm({
   })
   const [selectedAction, setSelectedAction] = useState<Action | null>(null)
 
-  const onSubmit = (values: TWorkflowControlsForm) => {
+  const handleSubmit = useCallback(async () => {
     // Make the API call to start the workflow
+    const values = { ...form.getValues(), actionKey: selectedAction ? getActionKey(selectedAction) : undefined }
     if (!values.actionKey) {
       console.error("No action key provided")
       toast({
@@ -97,8 +87,7 @@ export function WorkflowControlsForm({
     }
 
     try {
-      triggerWorkflow(workflow.id, values.actionKey, values.payload)
-      setConfirmationIsOpen(false)
+      await triggerWorkflow(workflow.id, values.actionKey, values.payload)
       toast({
         title: "Workflow started",
         description: "The workflow has been started successfully.",
@@ -107,136 +96,75 @@ export function WorkflowControlsForm({
       console.error("Error starting workflow", error)
       toast({
         title: "Error starting workflow",
-        description: "There was an error starting the workflow.",
+        description: "Please check the run logs for more information",
       })
     }
-  }
-  useEffect(() => {
-    if (selectedAction) {
-      console.log("Selected action", selectedAction)
-      form.setValue("actionKey", getActionKey(selectedAction))
-    }
-  }, [selectedAction])
+  }, [selectedAction, form, setSelectedAction])
+
+
   return (
-    <AlertDialog open={confirmationIsOpen}>
-      <Form {...form}>
-        <form className="space-y-4">
-          <div className="space-y-3">
-            <h4 className="text-sm font-medium">Controls</h4>
+    <Accordion type="single" defaultValue="workflow-triggers" collapsible>
+      <AccordionItem value="workflow-triggers">
+        <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
+          <div className="flex items-center">
+            <ZapIcon className="mr-3 size-4" />
+            <span>Run Workflow</span>
           </div>
-          <Separator />
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="px-4 my-4">
+            <Form {...form}>
+              <form>
+                <FormField
+                  control={form.control}
+                  name="payload"
+                  render={({ field }) => (
+                    <FormItem>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <FormLabel className="text-xs decoration-dotted underline underline-offset-2">Trigger Parameters</FormLabel>
+                        </TooltipTrigger>
+                        <TooltipContent>JSON input to send to the selected webhook and trigger the workflow.</TooltipContent>
+                      </Tooltip>
+                      <FormControl>
+                        <Textarea
+                          className="text-xs"
+                          placeholder='{"webhookParam1": "value1"}'
+                          {...field}
+                        />
+                      </FormControl>
 
-          <FormField
-            control={form.control}
-            name="payload"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-xs">Send Payload</FormLabel>
-                <div className="flex w-full items-center space-x-2">
-                  <EntrypointSelector
-                    selectedAction={selectedAction}
-                    setSelectedaction={setSelectedAction}
-                  />
-                  <AlertDialogTrigger asChild>
-                    <Button
-                      type="button"
-                      onClick={async () => {
-                        const validated = await form.trigger()
-                        if (!form.getValues("actionKey")) {
-                          console.error("No action key provided")
-                          toast({
-                            title: "No action provided",
-                            description:
-                              "Please select an action to start the workflow.",
-                          })
-                          return
-                        }
-                        setConfirmationIsOpen(validated)
-                      }}
-                    >
-                      <div className="flex items-center space-x-2">
-                        <Send className="h-4 w-4" />
-                        <span>Send</span>
-                      </div>
-                    </Button>
-                  </AlertDialogTrigger>
-                </div>
-                <FormControl>
-                  <pre>
-                    <Textarea
-                      {...field}
-                      className="min-h-48 text-xs"
-                      value={form.watch("payload", "")}
-                      placeholder="Select an action as the workflow entrypoint, and define a JSON payload that will be sent to it."
-                    />
-                  </pre>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Start workflow confirmation</AlertDialogTitle>
-              <AlertDialogDescription className="flex flex-col">
-                <span>
-                  You are about to start the workflow with the selected action:
-                </span>
-                <span className="font-bold">{selectedAction?.title}</span>
-                <span>This is the payload that will be sent:</span>
-              </AlertDialogDescription>
-              <SyntaxHighlighter
-                language="json"
-                style={atomOneDark}
-                wrapLines
-                wrapLongLines
-                customStyle={{
-                  width: "100%",
-                  maxWidth: "100%",
-                  overflowX: "auto",
-                }}
-                codeTagProps={{
-                  className:
-                    "text-xs text-background rounded-lg max-w-full overflow-auto",
-                }}
-                {...{
-                  className:
-                    "rounded-lg p-4 overflow-auto max-w-full w-full no-scrollbar",
-                }}
-              >
-                {form.watch("payload")}
-              </SyntaxHighlighter>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel onClick={() => setConfirmationIsOpen(false)}>
-                Cancel
-              </AlertDialogCancel>
-              <AlertDialogAction onClick={() => form.handleSubmit(onSubmit)()}>
-                <div className="flex items-center space-x-2">
-                  <Send className="h-4 w-4" />
-                  <span>Confirm</span>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <div className="flex w-full items-center space-x-2 pt-2">
+                  <EntrypointSelector setSelectedAction={setSelectedAction} />
+                  <Button
+                    type="button"
+                    onClick={handleSubmit}
+                    className="flex items-center text-xs"
+                  >
+                    <PlayIcon className="mr-2 size-3" />
+                    <span>Run</span>
+                  </Button>
                 </div>
-              </AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </form>
-      </Form>
-    </AlertDialog>
+              </form>
+            </Form>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   )
 }
 
 export default function EntrypointSelector({
-  className,
-  selectedAction,
-  setSelectedaction,
+  setSelectedAction,
 }: {
-  className?: string
-  selectedAction: Action | null
-  setSelectedaction: React.Dispatch<React.SetStateAction<Action | null>>
+  setSelectedAction: React.Dispatch<React.SetStateAction<Action | null>>
 }) {
   const { workflow } = useWorkflowMetadata()
   const [actions, setActions] = useState<Action[]>([])
-  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     if (workflow?.actions) {
@@ -249,51 +177,30 @@ export default function EntrypointSelector({
   }, [workflow?.actions])
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-label="Load a webhook ..."
-          aria-expanded={open}
-          className="w-full flex-1 justify-between text-xs font-normal"
-        >
-          {selectedAction?.title ?? "Select a webhook..."}
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className={cn(
-          "w-[300px] rounded-md border-[1px] border-zinc-200 shadow-lg",
-          className
-        )}
-        align="start"
-      >
-        <Command>
-          <CommandInput className="text-xs" placeholder="Search webhooks..." />
-          <CommandEmpty>No actions found.</CommandEmpty>
-          <CommandGroup heading="Webhooks">
-            {actions.map((action) => (
-              <CommandItem
-                key={action.id}
-                className="text-xs"
-                onSelect={() => {
-                  setSelectedaction(action)
-                  setOpen(false)
-                }}
-              >
-                {action.title}
-                <CheckIcon
-                  className={cn(
-                    "ml-auto h-4 w-4",
-                    selectedAction === action ? "opacity-100" : "opacity-0"
-                  )}
-                />
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
+    <Select>
+      <SelectTrigger>
+        <SelectValue
+          placeholder="Select webhook"
+          className="text-xs text-muted-foreground"
+        />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel className="text-xs">Webhooks</SelectLabel>
+          {actions.map((action) => (
+            <SelectItem
+              key={action.id}
+              value={action.id}
+              className="text-xs"
+              onSelect={() => {
+                setSelectedAction(action)
+              }}
+            >
+              {action.title}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
   )
 }
diff --git a/frontend/src/components/workspace/panel/workflow/form.tsx b/frontend/src/components/workspace/panel/workflow/form.tsx
index cbb1ca8d..a51dff70 100644
--- a/frontend/src/components/workspace/panel/workflow/form.tsx
+++ b/frontend/src/components/workspace/panel/workflow/form.tsx
@@ -6,15 +6,19 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import "@radix-ui/react-dialog"
 
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { CircleIcon, Save } from "lucide-react"
+import { SaveIcon, Settings2Icon } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
 import { Workflow } from "@/types/schemas"
 import { updateWorkflow } from "@/lib/flow"
-import { cn } from "@/lib/utils"
-import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
 import {
   Form,
   FormControl,
@@ -43,12 +47,10 @@ type TWorkflowForm = z.infer<typeof workflowFormSchema>
 
 interface WorkflowFormProps {
   workflow: Workflow
-  isOnline: boolean
 }
 
 export function WorkflowForm({
   workflow,
-  isOnline,
 }: WorkflowFormProps): React.JSX.Element {
   const {
     id: workflowId,
@@ -94,85 +96,68 @@ export function WorkflowForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        <div className="space-y-4">
-          <div className="space-y-3">
-            <div className="flex justify-between">
-              <h4 className="text-sm font-medium">Workflow Status</h4>
-              <WorkflowSettings workflow={workflow} />
-            </div>
-            <div className="flex justify-between">
-              <Badge
-                variant="outline"
-                className={cn(
-                  "px-4 py-1 capitalize",
-                  isOnline ? "bg-green-600/10" : "bg-gray-100"
-                )}
-              >
-                <CircleIcon
-                  className={cn(
-                    "mr-2 h-3 w-3",
-                    isOnline
-                      ? "fill-green-600 text-green-600"
-                      : "fill-gray-400 text-gray-400"
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="flex flex-1 justify-end space-x-2 px-4 mb-4">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button type="submit" size="icon">
+                <SaveIcon className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Save</TooltipContent>
+          </Tooltip>
+          <WorkflowSettings workflow={workflow} />
+        </div>
+        <Separator />
+        <Accordion type="single" defaultValue="workflow-settings" collapsible>
+          <AccordionItem value="workflow-settings">
+            <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
+              <div className="flex items-center">
+                <Settings2Icon className="mr-3 size-4" />
+                <span>Workflow</span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-2 px-4 my-4">
+                <FormField
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-xs">Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="text-xs"
+                          placeholder="Name your workflow..."
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
                   )}
                 />
-                <span
-                  className={cn(isOnline ? "text-green-600" : "text-gray-600")}
-                >
-                  {isOnline ? "online" : "offline"}
-                </span>
-              </Badge>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button type="submit" size="icon">
-                    <Save className="h-4 w-4" />
-                    <span className="sr-only">Save</span>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Save</TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-          <Separator />
-          <div className="space-y-4">
-            <FormField
-              control={form.control}
-              name="title"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs">Name</FormLabel>
-                  <FormControl>
-                    <Input
-                      className="text-xs"
-                      placeholder="Add workflow name..."
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="description"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-xs">Description</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      className="min-h-[100px] text-xs"
-                      placeholder="Describe your workflow..."
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-        </div>
-      </form>
-    </Form>
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-xs">Description</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          className="text-xs"
+                          placeholder="Describe your workflow..."
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </form >
+    </Form >
   )
 }
diff --git a/frontend/src/components/workspace/panel/workflow/runs.tsx b/frontend/src/components/workspace/panel/workflow/runs.tsx
index c0c2d62a..378e432c 100644
--- a/frontend/src/components/workspace/panel/workflow/runs.tsx
+++ b/frontend/src/components/workspace/panel/workflow/runs.tsx
@@ -8,7 +8,7 @@ import "@radix-ui/react-dialog"
 import { UpdateIcon } from "@radix-ui/react-icons"
 import { ScrollArea } from "@radix-ui/react-scroll-area"
 import { useQuery } from "@tanstack/react-query"
-import { CircleCheck, CircleX, Loader, Loader2 } from "lucide-react"
+import { CircleCheck, CircleX, Loader, Loader2, HistoryIcon } from "lucide-react"
 import SyntaxHighlighter from "react-syntax-highlighter"
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
 
@@ -56,34 +56,44 @@ export function WorkflowRunsView({
     },
   })
   return (
-    <div className="space-y-3">
-      <h1 className="text-xs font-medium">Past Runs</h1>
-      <ScrollArea
-        className={cn(
-          "h-full max-h-[400px] overflow-y-auto rounded-md border p-4",
-          className
-        )}
-      >
-        {isLoading ? (
-          <CenteredSpinner />
-        ) : error ? (
-          <AlertNotification
-            level="error"
-            message="Error loading workflow runs"
-          />
-        ) : workflowRuns && workflowRuns.length > 0 ? (
-          <Accordion type="single" collapsible className="w-full">
-            {workflowRuns
-              ?.sort((a, b) => b.created_at.getTime() - a.created_at.getTime())
-              .map((props, index) => (
-                <WorkflowRunItem key={index} {...props} />
-              ))}
-          </Accordion>
-        ) : (
-          <NoContent className="my-8" message="No runs available" />
-        )}
-      </ScrollArea>
-    </div>
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger className="px-4 text-xs font-bold tracking-wide">
+          <div className="flex items-center">
+            <HistoryIcon className="mr-3 size-4" />
+            <span>Past Runs</span>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="space-y-4 px-4 my-2">
+            <ScrollArea
+              className={cn(
+                "h-full max-h-[400px] overflow-y-auto rounded-md border p-4",
+                className
+              )}
+            >
+              {isLoading ? (
+                <CenteredSpinner />
+              ) : error ? (
+                <AlertNotification
+                  level="error"
+                  message="Error loading workflow runs"
+                />
+              ) : workflowRuns && workflowRuns.length > 0 ? (
+                <Accordion type="single" collapsible className="w-full">
+                  {workflowRuns
+                    ?.sort((a, b) => b.created_at.getTime() - a.created_at.getTime())
+                    .map((props, index) => (
+                      <WorkflowRunItem key={index} {...props} />
+                    ))}
+                </Accordion>
+              ) : (
+                <NoContent className="my-8" message="No runs available" />
+              )}
+            </ScrollArea>
+          </div>    </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   )
 }
 
diff --git a/frontend/src/components/workspace/panel/workflow/settings.tsx b/frontend/src/components/workspace/panel/workflow/settings.tsx
index bbe2cbee..6f2a7d03 100644
--- a/frontend/src/components/workspace/panel/workflow/settings.tsx
+++ b/frontend/src/components/workspace/panel/workflow/settings.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { useRouter } from "next/navigation"
-import { HamburgerMenuIcon } from "@radix-ui/react-icons"
 
+import { SettingsIcon, Trash2Icon } from "lucide-react"
 import { Workflow } from "@/types/schemas"
 import { deleteWorkflow } from "@/lib/flow"
 import { Button } from "@/components/ui/button"
@@ -23,6 +23,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { toast } from "@/components/ui/use-toast"
+import { Separator } from "@/components/ui/separator"
 
 export function WorkflowSettings({ workflow }: { workflow: Workflow }) {
   const router = useRouter()
@@ -32,57 +33,51 @@ export function WorkflowSettings({ workflow }: { workflow: Workflow }) {
     router.push("/workflows")
     toast({
       title: "Workflow deleted",
-      description: `The workflow "${workflow.title}" has been deleted.`,
+      description: `Successfully deleted "${workflow.title}".`,
     })
     router.refresh()
   }
   return (
-    <div>
-      <Dialog>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
-            >
-              <HamburgerMenuIcon className="h-4 w-4" />
-              <span className="sr-only">Open menu</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-[160px]">
-            <DropdownMenuItem disabled>Make a copy</DropdownMenuItem>
-            <DropdownMenuItem disabled>Favorite</DropdownMenuItem>
-            <DialogTrigger asChild>
-              <DropdownMenuItem className="text-red-600">
-                Delete
-              </DropdownMenuItem>
-            </DialogTrigger>
-          </DropdownMenuContent>
-        </DropdownMenu>
+    <Dialog>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+          >
+            <SettingsIcon className="size-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-4">
+          <DialogTrigger asChild>
+            <DropdownMenuItem className="text-red-600 text-sm">
+              <Trash2Icon className="size-4 mr-2" />
+              <span>Delete</span>
+            </DropdownMenuItem>
+          </DialogTrigger>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
-        <DialogContent>
-          <DialogHeader className="space-y-4">
-            <DialogTitle>
-              Are you sure you want to delete this workflow?
-            </DialogTitle>
-            <DialogDescription className="flex items-center text-sm text-foreground">
-              You are about to delete the workflow
-              <b className="ml-1">{workflow.title}</b>. Proceed?
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button
-                className="ml-auto space-x-2 border-0 font-bold text-white"
-                variant="destructive"
-                onClick={handleDeleteWorkflow}
-              >
-                Delete Workflow
-              </Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete workflow</DialogTitle>
+          <DialogClose />
+        </DialogHeader>
+        <Separator />
+        <DialogDescription>
+          Are you sure you want to permanently delete this workflow?
+        </DialogDescription>
+        <DialogFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button
+            onClick={handleDeleteWorkflow}
+            variant="destructive"
+            className="mr-2"
+          >
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/frontend/src/components/workspace/panel/workspace-panel.tsx b/frontend/src/components/workspace/panel/workspace-panel.tsx
index 4aaaf631..115b4889 100644
--- a/frontend/src/components/workspace/panel/workspace-panel.tsx
+++ b/frontend/src/components/workspace/panel/workspace-panel.tsx
@@ -9,9 +9,9 @@ import { ActionNodeData } from "@/components/workspace/canvas/action-node"
 import { IntegrationNodeData } from "@/components/workspace/canvas/integration-node"
 import { ActionForm } from "@/components/workspace/panel/action/form"
 import { IntegrationForm } from "@/components/workspace/panel/integration/form"
-import { WorkflowControlsForm } from "@/components/workspace/panel/workflow/controls"
 import { WorkflowForm } from "@/components/workspace/panel/workflow/form"
 import { WorkflowRunsView } from "@/components/workspace/panel/workflow/runs"
+import { WorkflowControlsForm } from "@/components/workspace/panel/workflow/controls"
 
 export function WorkspacePanel() {
   const { selectedNodeId, getNode } = useWorkflowBuilder()
@@ -23,8 +23,8 @@ export function WorkspacePanel() {
       {selectedNode ? (
         getNodeForm(selectedNode, workflowId)
       ) : workflow ? (
-        <div className="space-y-4 p-4">
-          <WorkflowForm workflow={workflow} isOnline={isOnline} />
+        <div className="py-4">
+          <WorkflowForm workflow={workflow} />
           <WorkflowControlsForm workflow={workflow} />
           <WorkflowRunsView workflowId={workflow.id} />
         </div>
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 9e369b3f..2d6c3061 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -53,19 +53,24 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 }
 
 @layer utilities {
+
   /* Hide scrollbar for Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
     display: none;
   }
+
   /* Hide scrollbar for IE, Edge and Firefox */
   .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
   }
 }
diff --git a/frontend/src/styles/tailwind.ts b/frontend/src/styles/tailwind.ts
deleted file mode 100644
index ae2915fd..00000000
--- a/frontend/src/styles/tailwind.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const DELETE_BUTTON_STYLE =
-  "border border-red-500/70 bg-red-500/10 text-red-500/80 hover:bg-red-500/20 hover:text-red-500"