diff --git a/apps/sim/app/w/[id]/components/notifications/notifications.tsx b/apps/sim/app/w/[id]/components/notifications/notifications.tsx
index d572da25cb9..fd8e18cb0fd 100644
--- a/apps/sim/app/w/[id]/components/notifications/notifications.tsx
+++ b/apps/sim/app/w/[id]/components/notifications/notifications.tsx
@@ -134,7 +134,10 @@ function DeleteApiConfirmation({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+          >
             Delete
           </AlertDialogAction>
         </AlertDialogFooter>
diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/components/schedule-modal.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/components/schedule-modal.tsx
index 6c3d0d927cc..f71b26046c3 100644
--- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/components/schedule-modal.tsx
+++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/schedule/components/schedule-modal.tsx
@@ -648,7 +648,10 @@ export function ScheduleModal({
             <AlertDialogCancel onClick={() => setShowDeleteConfirm(false)}>
               Cancel
             </AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className='bg-red-600 hover:bg-red-700'>
+            <AlertDialogAction
+              onClick={handleDelete}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            >
               {isDeleting ? 'Deleting...' : 'Delete Schedule'}
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/confirmation.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/confirmation.tsx
index 2197aa2d774..0578d1eb73e 100644
--- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/confirmation.tsx
+++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/confirmation.tsx
@@ -33,7 +33,10 @@ export function DeleteConfirmDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+          >
             {isDeleting ? 'Deleting...' : 'Delete'}
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -66,7 +69,10 @@ export function UnsavedChangesDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel onClick={onCancel}>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm} className='bg-red-600 hover:bg-red-700'>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+          >
             Discard changes
           </AlertDialogAction>
         </AlertDialogFooter>
diff --git a/apps/sim/app/w/components/sidebar/components/folder-tree/components/folder-item.tsx b/apps/sim/app/w/components/sidebar/components/folder-tree/components/folder-item.tsx
index 2c39f63bc50..4f02c73497d 100644
--- a/apps/sim/app/w/components/sidebar/components/folder-tree/components/folder-item.tsx
+++ b/apps/sim/app/w/components/sidebar/components/folder-tree/components/folder-item.tsx
@@ -1,8 +1,18 @@
 'use client'
 
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { ChevronDown, ChevronRight, Folder, FolderOpen } from 'lucide-react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { type FolderTreeNode, useFolderStore } from '@/stores/folders/store'
 import { FolderContextMenu } from '../../folder-context-menu/folder-context-menu'
@@ -27,6 +37,8 @@ export function FolderItem({
   onDrop,
 }: FolderItemProps) {
   const { expandedFolders, toggleExpanded, updateFolderAPI, deleteFolder } = useFolderStore()
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
 
   const isExpanded = expandedFolders.has(folder.id)
   const updateTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
@@ -69,83 +81,137 @@ export function FolderItem({
   }
 
   const handleDelete = async (folderId: string) => {
-    if (
-      confirm(
-        `Are you sure you want to delete "${folder.name}"? Child folders and workflows will be moved to the parent folder.`
-      )
-    ) {
-      try {
-        await deleteFolder(folderId)
-      } catch (error) {
-        console.error('Failed to delete folder:', error)
-      }
+    setShowDeleteDialog(true)
+  }
+
+  const confirmDelete = async () => {
+    setIsDeleting(true)
+    try {
+      await deleteFolder(folder.id)
+      setShowDeleteDialog(false)
+    } catch (error) {
+      console.error('Failed to delete folder:', error)
+    } finally {
+      setIsDeleting(false)
     }
   }
 
   if (isCollapsed) {
     return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div
-            className='group mx-auto flex h-8 w-8 cursor-pointer items-center justify-center'
-            onDragOver={onDragOver}
-            onDragLeave={onDragLeave}
-            onDrop={onDrop}
-            onClick={handleToggleExpanded}
-          >
+      <>
+        <Tooltip>
+          <TooltipTrigger asChild>
             <div
-              className={clsx(
-                'flex h-4 w-4 items-center justify-center rounded transition-colors hover:bg-accent/50',
-                dragOver ? 'ring-2 ring-blue-500' : ''
-              )}
+              className='group mx-auto flex h-8 w-8 cursor-pointer items-center justify-center'
+              onDragOver={onDragOver}
+              onDragLeave={onDragLeave}
+              onDrop={onDrop}
+              onClick={handleToggleExpanded}
             >
-              {isExpanded ? (
-                <FolderOpen className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
-              ) : (
-                <Folder className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
-              )}
+              <div
+                className={clsx(
+                  'flex h-4 w-4 items-center justify-center rounded transition-colors hover:bg-accent/50',
+                  dragOver ? 'ring-2 ring-blue-500' : ''
+                )}
+              >
+                {isExpanded ? (
+                  <FolderOpen className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
+                ) : (
+                  <Folder className='h-3 w-3 text-foreground/70 dark:text-foreground/60' />
+                )}
+              </div>
             </div>
-          </div>
-        </TooltipTrigger>
-        <TooltipContent side='right'>
-          <p>{folder.name}</p>
-        </TooltipContent>
-      </Tooltip>
+          </TooltipTrigger>
+          <TooltipContent side='right'>
+            <p>{folder.name}</p>
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Delete Confirmation Dialog */}
+        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Are you sure you want to delete "{folder.name}"?</AlertDialogTitle>
+              <AlertDialogDescription>
+                Child folders and workflows will be moved to the parent folder.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={confirmDelete}
+                disabled={isDeleting}
+                className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+              >
+                {isDeleting ? 'Deleting...' : 'Delete'}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </>
     )
   }
 
   return (
-    <div className='group' onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
-      <div
-        className='flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent/50'
-        onClick={handleToggleExpanded}
-      >
-        <div className='mr-1 flex h-4 w-4 items-center justify-center'>
-          {isExpanded ? <ChevronDown className='h-3 w-3' /> : <ChevronRight className='h-3 w-3' />}
-        </div>
+    <>
+      <div className='group' onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
+        <div
+          className='flex cursor-pointer items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent/50'
+          onClick={handleToggleExpanded}
+        >
+          <div className='mr-1 flex h-4 w-4 items-center justify-center'>
+            {isExpanded ? (
+              <ChevronDown className='h-3 w-3' />
+            ) : (
+              <ChevronRight className='h-3 w-3' />
+            )}
+          </div>
 
-        <div className='mr-2 flex h-4 w-4 flex-shrink-0 items-center justify-center'>
-          {isExpanded ? (
-            <FolderOpen className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
-          ) : (
-            <Folder className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
-          )}
-        </div>
+          <div className='mr-2 flex h-4 w-4 flex-shrink-0 items-center justify-center'>
+            {isExpanded ? (
+              <FolderOpen className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
+            ) : (
+              <Folder className='h-4 w-4 text-foreground/70 dark:text-foreground/60' />
+            )}
+          </div>
+
+          <span className='flex-1 cursor-default select-none truncate text-muted-foreground'>
+            {folder.name}
+          </span>
 
-        <span className='flex-1 cursor-default select-none truncate text-muted-foreground'>
-          {folder.name}
-        </span>
-
-        <div className='flex items-center justify-center' onClick={(e) => e.stopPropagation()}>
-          <FolderContextMenu
-            folderId={folder.id}
-            folderName={folder.name}
-            onCreateWorkflow={onCreateWorkflow}
-            onRename={handleRename}
-            onDelete={handleDelete}
-          />
+          <div className='flex items-center justify-center' onClick={(e) => e.stopPropagation()}>
+            <FolderContextMenu
+              folderId={folder.id}
+              folderName={folder.name}
+              onCreateWorkflow={onCreateWorkflow}
+              onRename={handleRename}
+              onDelete={handleDelete}
+            />
+          </div>
         </div>
       </div>
-    </div>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure you want to delete "{folder.name}"?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Child folders and workflows will be moved to the parent folder.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              disabled={isDeleting}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   )
 }
diff --git a/apps/sim/app/w/components/sidebar/components/settings-modal/components/general/general.tsx b/apps/sim/app/w/components/sidebar/components/settings-modal/components/general/general.tsx
index 88ff1dcdea4..602768e82c1 100644
--- a/apps/sim/app/w/components/sidebar/components/settings-modal/components/general/general.tsx
+++ b/apps/sim/app/w/components/sidebar/components/settings-modal/components/general/general.tsx
@@ -265,7 +265,7 @@ export function General() {
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={handleResetData}
-                  className='bg-red-600 hover:bg-red-700'
+                  className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
                 >
                   Reset Data
                 </AlertDialogAction>
diff --git a/apps/sim/app/w/knowledge/[id]/base.tsx b/apps/sim/app/w/knowledge/[id]/base.tsx
index 4eba4ca7fc8..52f275ff5de 100644
--- a/apps/sim/app/w/knowledge/[id]/base.tsx
+++ b/apps/sim/app/w/knowledge/[id]/base.tsx
@@ -941,7 +941,7 @@ export function KnowledgeBase({
             <AlertDialogAction
               onClick={handleDeleteKnowledgeBase}
               disabled={isDeleting}
-              className='bg-red-600 hover:bg-red-700'
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
             >
               {isDeleting ? 'Deleting...' : 'Delete Knowledge Base'}
             </AlertDialogAction>
diff --git a/apps/sim/blocks/blocks/huggingface.ts b/apps/sim/blocks/blocks/huggingface.ts
index 8aa50ec516d..2fc6e6f6b2e 100644
--- a/apps/sim/blocks/blocks/huggingface.ts
+++ b/apps/sim/blocks/blocks/huggingface.ts
@@ -10,7 +10,7 @@ export const HuggingFaceBlock: BlockConfig<HuggingFaceChatResponse> = {
     'Generate completions using Hugging Face Inference API with access to various open-source models. Leverage cutting-edge AI models for chat completions, content generation, and AI-powered conversations with customizable parameters.',
   docsLink: 'https://docs.simstudio.ai/tools/huggingface',
   category: 'tools',
-  bgColor: '#181C1E',
+  bgColor: '#0B0F19',
   icon: HuggingFaceIcon,
   subBlocks: [
     {
diff --git a/apps/sim/blocks/blocks/workflow.ts b/apps/sim/blocks/blocks/workflow.ts
index c46b9f92761..854bc814c7f 100644
--- a/apps/sim/blocks/blocks/workflow.ts
+++ b/apps/sim/blocks/blocks/workflow.ts
@@ -1,4 +1,4 @@
-import { ComponentIcon } from '@/components/icons'
+import { WorkflowIcon } from '@/components/icons'
 import { createLogger } from '@/lib/logs/console-logger'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import type { ToolResponse } from '@/tools/types'
@@ -39,10 +39,10 @@ const getAvailableWorkflows = (): Array<{ label: string; id: string }> => {
 export const WorkflowBlock: BlockConfig = {
   type: 'workflow',
   name: 'Workflow',
-  description: 'Execute another workflow as a block',
+  description: 'Execute another workflow',
   category: 'blocks',
-  bgColor: '#6366f1',
-  icon: ComponentIcon,
+  bgColor: '#705335',
+  icon: WorkflowIcon,
   subBlocks: [
     {
       id: 'workflowId',
diff --git a/apps/sim/components/icons.tsx b/apps/sim/components/icons.tsx
index 1f061476d34..db6522097fe 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -214,6 +214,73 @@ export function WorkIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
+export function WorkflowIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width='30'
+      height='30'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <circle
+        className='a'
+        cx='12'
+        cy='6'
+        r='3'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <rect
+        className='a'
+        height='5'
+        rx='2'
+        width='8'
+        x='2'
+        y='16'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <rect
+        className='a'
+        height='5'
+        rx='2'
+        width='8'
+        x='14'
+        y='16'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        className='a'
+        d='M6,16V14a2,2,0,0,1,2-2h8a2,2,0,0,1,2,2v2'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <line
+        className='a'
+        x1='12'
+        x2='12'
+        y1='9'
+        y2='12'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
 export function WarnIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg