optimized

cahnged color, removed flicker on folder container
updated to use brand tertiary color, allow worfklows to be dropped above/below folders at the same level
2026-01-14 17:37:55 -05:00 · 2026-01-14 14:00:19 -08:00 · 2026-01-14 13:50:27 -08:00 · 2026-01-14 13:34:04 -08:00 · 2026-01-14 12:12:46 -08:00 · 2026-01-14 12:09:04 -08:00
32 changed files with 11695 additions and 603 deletions
--- a/apps/sim/app/api/folders/[id]/route.ts
+++ b/apps/sim/app/api/folders/[id]/route.ts
@@ -14,6 +14,7 @@ const updateFolderSchema = z.object({
  color: z.string().optional(),
  isExpanded: z.boolean().optional(),
  parentId: z.string().nullable().optional(),
+  sortOrder: z.number().int().min(0).optional(),
 })

 // PUT - Update a folder
@@ -38,7 +39,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
      return NextResponse.json({ error: `Validation failed: ${errorMessages}` }, { status: 400 })
    }

-    const { name, color, isExpanded, parentId } = validationResult.data
+    const { name, color, isExpanded, parentId, sortOrder } = validationResult.data

    // Verify the folder exists
    const existingFolder = await db
@@ -81,12 +82,12 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
      }
    }

-    // Update the folder
-    const updates: any = { updatedAt: new Date() }
+    const updates: Record<string, unknown> = { updatedAt: new Date() }
    if (name !== undefined) updates.name = name.trim()
    if (color !== undefined) updates.color = color
    if (isExpanded !== undefined) updates.isExpanded = isExpanded
    if (parentId !== undefined) updates.parentId = parentId || null
+    if (sortOrder !== undefined) updates.sortOrder = sortOrder

    const [updatedFolder] = await db
      .update(workflowFolder)
--- a/apps/sim/app/api/folders/reorder/route.ts
+++ b/apps/sim/app/api/folders/reorder/route.ts
@@ -0,0 +1,91 @@
+import { db } from '@sim/db'
+import { workflowFolder } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { eq, inArray } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
+
+const logger = createLogger('FolderReorderAPI')
+
+const ReorderSchema = z.object({
+  workspaceId: z.string(),
+  updates: z.array(
+    z.object({
+      id: z.string(),
+      sortOrder: z.number().int().min(0),
+      parentId: z.string().nullable().optional(),
+    })
+  ),
+})
+
+export async function PUT(req: NextRequest) {
+  const requestId = generateRequestId()
+  const session = await getSession()
+
+  if (!session?.user?.id) {
+    logger.warn(`[${requestId}] Unauthorized folder reorder attempt`)
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  try {
+    const body = await req.json()
+    const { workspaceId, updates } = ReorderSchema.parse(body)
+
+    const permission = await getUserEntityPermissions(session.user.id, 'workspace', workspaceId)
+    if (!permission || permission === 'read') {
+      logger.warn(
+        `[${requestId}] User ${session.user.id} lacks write permission for workspace ${workspaceId}`
+      )
+      return NextResponse.json({ error: 'Write access required' }, { status: 403 })
+    }
+
+    const folderIds = updates.map((u) => u.id)
+    const existingFolders = await db
+      .select({ id: workflowFolder.id, workspaceId: workflowFolder.workspaceId })
+      .from(workflowFolder)
+      .where(inArray(workflowFolder.id, folderIds))
+
+    const validIds = new Set(
+      existingFolders.filter((f) => f.workspaceId === workspaceId).map((f) => f.id)
+    )
+
+    const validUpdates = updates.filter((u) => validIds.has(u.id))
+
+    if (validUpdates.length === 0) {
+      return NextResponse.json({ error: 'No valid folders to update' }, { status: 400 })
+    }
+
+    await db.transaction(async (tx) => {
+      for (const update of validUpdates) {
+        const updateData: Record<string, unknown> = {
+          sortOrder: update.sortOrder,
+          updatedAt: new Date(),
+        }
+        if (update.parentId !== undefined) {
+          updateData.parentId = update.parentId
+        }
+        await tx.update(workflowFolder).set(updateData).where(eq(workflowFolder.id, update.id))
+      }
+    })
+
+    logger.info(
+      `[${requestId}] Reordered ${validUpdates.length} folders in workspace ${workspaceId}`
+    )
+
+    return NextResponse.json({ success: true, updated: validUpdates.length })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      logger.warn(`[${requestId}] Invalid folder reorder data`, { errors: error.errors })
+      return NextResponse.json(
+        { error: 'Invalid request data', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Error reordering folders`, error)
+    return NextResponse.json({ error: 'Failed to reorder folders' }, { status: 500 })
+  }
+}
--- a/apps/sim/app/api/folders/route.ts
+++ b/apps/sim/app/api/folders/route.ts
@@ -58,7 +58,7 @@ export async function POST(request: NextRequest) {
    }

    const body = await request.json()
-    const { name, workspaceId, parentId, color } = body
+    const { name, workspaceId, parentId, color, sortOrder: providedSortOrder } = body

    if (!name || !workspaceId) {
      return NextResponse.json({ error: 'Name and workspace ID are required' }, { status: 400 })
@@ -81,25 +81,26 @@ export async function POST(request: NextRequest) {
    // Generate a new ID
    const id = crypto.randomUUID()

-    // Use transaction to ensure sortOrder consistency
    const newFolder = await db.transaction(async (tx) => {
-      // Get the next sort order for the parent (or root level)
-      // Consider all folders in the workspace, not just those created by current user
-      const existingFolders = await tx
-        .select({ sortOrder: workflowFolder.sortOrder })
-        .from(workflowFolder)
-        .where(
-          and(
-            eq(workflowFolder.workspaceId, workspaceId),
-            parentId ? eq(workflowFolder.parentId, parentId) : isNull(workflowFolder.parentId)
+      let sortOrder: number
+      if (providedSortOrder !== undefined) {
+        sortOrder = providedSortOrder
+      } else {
+        const existingFolders = await tx
+          .select({ sortOrder: workflowFolder.sortOrder })
+          .from(workflowFolder)
+          .where(
+            and(
+              eq(workflowFolder.workspaceId, workspaceId),
+              parentId ? eq(workflowFolder.parentId, parentId) : isNull(workflowFolder.parentId)
+            )
          )
-        )
-        .orderBy(desc(workflowFolder.sortOrder))
-        .limit(1)
+          .orderBy(desc(workflowFolder.sortOrder))
+          .limit(1)

-      const nextSortOrder = existingFolders.length > 0 ? existingFolders[0].sortOrder + 1 : 0
+        sortOrder = existingFolders.length > 0 ? existingFolders[0].sortOrder + 1 : 0
+      }

-      // Insert the new folder within the same transaction
      const [folder] = await tx
        .insert(workflowFolder)
        .values({
@@ -109,7 +110,7 @@ export async function POST(request: NextRequest) {
          workspaceId,
          parentId: parentId || null,
          color: color || '#6B7280',
-          sortOrder: nextSortOrder,
+          sortOrder,
        })
        .returning()

--- a/apps/sim/app/api/workflows/[id]/route.ts
+++ b/apps/sim/app/api/workflows/[id]/route.ts
@@ -20,6 +20,7 @@ const UpdateWorkflowSchema = z.object({
  description: z.string().optional(),
  color: z.string().optional(),
  folderId: z.string().nullable().optional(),
+  sortOrder: z.number().int().min(0).optional(),
 })

 /**
@@ -438,12 +439,12 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
      return NextResponse.json({ error: 'Access denied' }, { status: 403 })
    }

-    // Build update object
-    const updateData: any = { updatedAt: new Date() }
+    const updateData: Record<string, unknown> = { updatedAt: new Date() }
    if (updates.name !== undefined) updateData.name = updates.name
    if (updates.description !== undefined) updateData.description = updates.description
    if (updates.color !== undefined) updateData.color = updates.color
    if (updates.folderId !== undefined) updateData.folderId = updates.folderId
+    if (updates.sortOrder !== undefined) updateData.sortOrder = updates.sortOrder

    // Update the workflow
    const [updatedWorkflow] = await db
--- a/apps/sim/app/api/workflows/reorder/route.ts
+++ b/apps/sim/app/api/workflows/reorder/route.ts
@@ -0,0 +1,91 @@
+import { db } from '@sim/db'
+import { workflow } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { eq, inArray } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
+
+const logger = createLogger('WorkflowReorderAPI')
+
+const ReorderSchema = z.object({
+  workspaceId: z.string(),
+  updates: z.array(
+    z.object({
+      id: z.string(),
+      sortOrder: z.number().int().min(0),
+      folderId: z.string().nullable().optional(),
+    })
+  ),
+})
+
+export async function PUT(req: NextRequest) {
+  const requestId = generateRequestId()
+  const session = await getSession()
+
+  if (!session?.user?.id) {
+    logger.warn(`[${requestId}] Unauthorized reorder attempt`)
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  try {
+    const body = await req.json()
+    const { workspaceId, updates } = ReorderSchema.parse(body)
+
+    const permission = await getUserEntityPermissions(session.user.id, 'workspace', workspaceId)
+    if (!permission || permission === 'read') {
+      logger.warn(
+        `[${requestId}] User ${session.user.id} lacks write permission for workspace ${workspaceId}`
+      )
+      return NextResponse.json({ error: 'Write access required' }, { status: 403 })
+    }
+
+    const workflowIds = updates.map((u) => u.id)
+    const existingWorkflows = await db
+      .select({ id: workflow.id, workspaceId: workflow.workspaceId })
+      .from(workflow)
+      .where(inArray(workflow.id, workflowIds))
+
+    const validIds = new Set(
+      existingWorkflows.filter((w) => w.workspaceId === workspaceId).map((w) => w.id)
+    )
+
+    const validUpdates = updates.filter((u) => validIds.has(u.id))
+
+    if (validUpdates.length === 0) {
+      return NextResponse.json({ error: 'No valid workflows to update' }, { status: 400 })
+    }
+
+    await db.transaction(async (tx) => {
+      for (const update of validUpdates) {
+        const updateData: Record<string, unknown> = {
+          sortOrder: update.sortOrder,
+          updatedAt: new Date(),
+        }
+        if (update.folderId !== undefined) {
+          updateData.folderId = update.folderId
+        }
+        await tx.update(workflow).set(updateData).where(eq(workflow.id, update.id))
+      }
+    })
+
+    logger.info(
+      `[${requestId}] Reordered ${validUpdates.length} workflows in workspace ${workspaceId}`
+    )
+
+    return NextResponse.json({ success: true, updated: validUpdates.length })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      logger.warn(`[${requestId}] Invalid reorder data`, { errors: error.errors })
+      return NextResponse.json(
+        { error: 'Invalid request data', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Error reordering workflows`, error)
+    return NextResponse.json({ error: 'Failed to reorder workflows' }, { status: 500 })
+  }
+}
--- a/apps/sim/app/api/workflows/route.ts
+++ b/apps/sim/app/api/workflows/route.ts
@@ -1,7 +1,7 @@
 import { db } from '@sim/db'
 import { workflow } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
+import { and, eq, isNull, max } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import { getSession } from '@/lib/auth'
@@ -17,6 +17,7 @@ const CreateWorkflowSchema = z.object({
  color: z.string().optional().default('#3972F6'),
  workspaceId: z.string().optional(),
  folderId: z.string().nullable().optional(),
+  sortOrder: z.number().int().optional(),
 })

 // GET /api/workflows - Get workflows for user (optionally filtered by workspaceId)
@@ -89,7 +90,14 @@ export async function POST(req: NextRequest) {

  try {
    const body = await req.json()
-    const { name, description, color, workspaceId, folderId } = CreateWorkflowSchema.parse(body)
+    const {
+      name,
+      description,
+      color,
+      workspaceId,
+      folderId,
+      sortOrder: providedSortOrder,
+    } = CreateWorkflowSchema.parse(body)

    if (workspaceId) {
      const workspacePermission = await getUserEntityPermissions(
@@ -127,11 +135,28 @@ export async function POST(req: NextRequest) {
        // Silently fail
      })

+    let sortOrder: number
+    if (providedSortOrder !== undefined) {
+      sortOrder = providedSortOrder
+    } else {
+      const folderCondition = folderId ? eq(workflow.folderId, folderId) : isNull(workflow.folderId)
+      const [maxResult] = await db
+        .select({ maxOrder: max(workflow.sortOrder) })
+        .from(workflow)
+        .where(
+          workspaceId
+            ? and(eq(workflow.workspaceId, workspaceId), folderCondition)
+            : and(eq(workflow.userId, session.user.id), folderCondition)
+        )
+      sortOrder = (maxResult?.maxOrder ?? -1) + 1
+    }
+
    await db.insert(workflow).values({
      id: workflowId,
      userId: session.user.id,
      workspaceId: workspaceId || null,
      folderId: folderId || null,
+      sortOrder,
      name,
      description,
      color,
@@ -152,6 +177,7 @@ export async function POST(req: NextRequest) {
      color,
      workspaceId,
      folderId,
+      sortOrder,
      createdAt: now,
      updatedAt: now,
    })
--- a/apps/sim/app/api/workspaces/route.ts
+++ b/apps/sim/app/api/workspaces/route.ts
@@ -13,6 +13,7 @@ const logger = createLogger('Workspaces')

 const createWorkspaceSchema = z.object({
  name: z.string().trim().min(1, 'Name is required'),
+  skipDefaultWorkflow: z.boolean().optional().default(false),
 })

 // Get all workspaces for the current user
@@ -63,9 +64,9 @@ export async function POST(req: Request) {
  }

  try {
-    const { name } = createWorkspaceSchema.parse(await req.json())
+    const { name, skipDefaultWorkflow } = createWorkspaceSchema.parse(await req.json())

-    const newWorkspace = await createWorkspace(session.user.id, name)
+    const newWorkspace = await createWorkspace(session.user.id, name, skipDefaultWorkflow)

    return NextResponse.json({ workspace: newWorkspace })
  } catch (error) {
@@ -80,7 +81,7 @@ async function createDefaultWorkspace(userId: string, userName?: string | null)
  return createWorkspace(userId, workspaceName)
 }

-async function createWorkspace(userId: string, name: string) {
+async function createWorkspace(userId: string, name: string, skipDefaultWorkflow = false) {
  const workspaceId = crypto.randomUUID()
  const workflowId = crypto.randomUUID()
  const now = new Date()
@@ -97,7 +98,6 @@ async function createWorkspace(userId: string, name: string) {
        updatedAt: now,
      })

-      // Create admin permissions for the workspace owner
      await tx.insert(permissions).values({
        id: crypto.randomUUID(),
        entityType: 'workspace' as const,
@@ -108,37 +108,41 @@ async function createWorkspace(userId: string, name: string) {
        updatedAt: now,
      })

-      // Create initial workflow for the workspace (empty canvas)
-      // Create the workflow
-      await tx.insert(workflow).values({
-        id: workflowId,
-        userId,
-        workspaceId,
-        folderId: null,
-        name: 'default-agent',
-        description: 'Your first workflow - start building here!',
-        color: '#3972F6',
-        lastSynced: now,
-        createdAt: now,
-        updatedAt: now,
-        isDeployed: false,
-        runCount: 0,
-        variables: {},
-      })
+      if (!skipDefaultWorkflow) {
+        await tx.insert(workflow).values({
+          id: workflowId,
+          userId,
+          workspaceId,
+          folderId: null,
+          name: 'default-agent',
+          description: 'Your first workflow - start building here!',
+          color: '#3972F6',
+          lastSynced: now,
+          createdAt: now,
+          updatedAt: now,
+          isDeployed: false,
+          runCount: 0,
+          variables: {},
+        })
+      }

      logger.info(
-        `Created workspace ${workspaceId} with initial workflow ${workflowId} for user ${userId}`
+        skipDefaultWorkflow
+          ? `Created workspace ${workspaceId} for user ${userId}`
+          : `Created workspace ${workspaceId} with initial workflow ${workflowId} for user ${userId}`
      )
    })

-    const { workflowState } = buildDefaultWorkflowArtifacts()
-    const seedResult = await saveWorkflowToNormalizedTables(workflowId, workflowState)
+    if (!skipDefaultWorkflow) {
+      const { workflowState } = buildDefaultWorkflowArtifacts()
+      const seedResult = await saveWorkflowToNormalizedTables(workflowId, workflowState)

-    if (!seedResult.success) {
-      throw new Error(seedResult.error || 'Failed to seed default workflow state')
+      if (!seedResult.success) {
+        throw new Error(seedResult.error || 'Failed to seed default workflow state')
+      }
    }
  } catch (error) {
-    logger.error(`Failed to create workspace ${workspaceId} with initial workflow:`, error)
+    logger.error(`Failed to create workspace ${workspaceId}:`, error)
    throw error
  }

--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -29,6 +29,16 @@ import { generateCreativeWorkflowName } from '@/stores/workflows/registry/utils'

 const logger = createLogger('FolderItem')

+let EMPTY_DRAG_IMAGE: HTMLImageElement | null = null
+function getEmptyDragImage(): HTMLImageElement {
+  if (!EMPTY_DRAG_IMAGE && typeof window !== 'undefined') {
+    EMPTY_DRAG_IMAGE = new Image(1, 1)
+    EMPTY_DRAG_IMAGE.src =
+      'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+  }
+  return EMPTY_DRAG_IMAGE!
+}
+
 interface FolderItemProps {
  folder: FolderTreeNode
  level: number
@@ -36,6 +46,8 @@ interface FolderItemProps {
    onDragEnter?: (e: React.DragEvent<HTMLElement>) => void
    onDragLeave?: (e: React.DragEvent<HTMLElement>) => void
  }
+  onDragStart?: () => void
+  onDragEnd?: () => void
 }

 /**
@@ -46,7 +58,13 @@ interface FolderItemProps {
 * @param props - Component props
 * @returns Folder item with drag and expand support
 */
-export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
+export function FolderItem({
+  folder,
+  level,
+  hoverHandlers,
+  onDragStart: onDragStartProp,
+  onDragEnd: onDragEndProp,
+}: FolderItemProps) {
  const params = useParams()
  const router = useRouter()
  const workspaceId = params.workspaceId as string
@@ -135,11 +153,6 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
    }
  }, [createFolderMutation, workspaceId, folder.id, expandFolder])

-  /**
-   * Drag start handler - sets folder data for drag operation
-   *
-   * @param e - React drag event
-   */
  const onDragStart = useCallback(
    (e: React.DragEvent) => {
      if (isEditing) {
@@ -147,16 +160,32 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
        return
      }

+      const emptyImg = getEmptyDragImage()
+      if (emptyImg?.complete) {
+        e.dataTransfer.setDragImage(emptyImg, 0, 0)
+      }
+
      e.dataTransfer.setData('folder-id', folder.id)
      e.dataTransfer.effectAllowed = 'move'
+      onDragStartProp?.()
    },
-    [folder.id]
+    [folder.id, onDragStartProp]
  )

-  const { isDragging, shouldPreventClickRef, handleDragStart, handleDragEnd } = useItemDrag({
+  const {
+    isDragging,
+    shouldPreventClickRef,
+    handleDragStart,
+    handleDragEnd: handleDragEndBase,
+  } = useItemDrag({
    onDragStart,
  })

+  const handleDragEnd = useCallback(() => {
+    handleDragEndBase()
+    onDragEndProp?.()
+  }, [handleDragEndBase, onDragEndProp])
+
  const {
    isOpen: isContextMenuOpen,
    position,
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -24,11 +24,23 @@ import { useFolderStore } from '@/stores/folders/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'

+let EMPTY_DRAG_IMAGE: HTMLImageElement | null = null
+function getEmptyDragImage(): HTMLImageElement {
+  if (!EMPTY_DRAG_IMAGE && typeof window !== 'undefined') {
+    EMPTY_DRAG_IMAGE = new Image(1, 1)
+    EMPTY_DRAG_IMAGE.src =
+      'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
+  }
+  return EMPTY_DRAG_IMAGE!
+}
+
 interface WorkflowItemProps {
  workflow: WorkflowMetadata
  active: boolean
  level: number
  onWorkflowClick: (workflowId: string, shiftKey: boolean, metaKey: boolean) => void
+  onDragStart?: () => void
+  onDragEnd?: () => void
 }

 /**
@@ -38,7 +50,14 @@ interface WorkflowItemProps {
 * @param props - Component props
 * @returns Workflow item with drag and selection support
 */
-export function WorkflowItem({ workflow, active, level, onWorkflowClick }: WorkflowItemProps) {
+export function WorkflowItem({
+  workflow,
+  active,
+  level,
+  onWorkflowClick,
+  onDragStart: onDragStartProp,
+  onDragEnd: onDragEndProp,
+}: WorkflowItemProps) {
  const params = useParams()
  const workspaceId = params.workspaceId as string
  const { selectedWorkflows } = useFolderStore()
@@ -104,30 +123,7 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
    [workflow.id, updateWorkflow]
  )

-  /**
-   * Drag start handler - handles workflow dragging with multi-selection support
-   *
-   * @param e - React drag event
-   */
-  const onDragStart = useCallback(
-    (e: React.DragEvent) => {
-      if (isEditing) {
-        e.preventDefault()
-        return
-      }
-
-      const workflowIds =
-        isSelected && selectedWorkflows.size > 1 ? Array.from(selectedWorkflows) : [workflow.id]
-
-      e.dataTransfer.setData('workflow-ids', JSON.stringify(workflowIds))
-      e.dataTransfer.effectAllowed = 'move'
-    },
-    [isSelected, selectedWorkflows, workflow.id]
-  )
-
-  const { isDragging, shouldPreventClickRef, handleDragStart, handleDragEnd } = useItemDrag({
-    onDragStart,
-  })
+  const isEditingRef = useRef(false)

  const {
    isOpen: isContextMenuOpen,
@@ -232,6 +228,48 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
    itemId: workflow.id,
  })

+  isEditingRef.current = isEditing
+
+  const onDragStart = useCallback(
+    (e: React.DragEvent) => {
+      if (isEditingRef.current) {
+        e.preventDefault()
+        return
+      }
+
+      const emptyImg = getEmptyDragImage()
+      if (emptyImg?.complete) {
+        e.dataTransfer.setDragImage(emptyImg, 0, 0)
+      }
+
+      const currentSelection = useFolderStore.getState().selectedWorkflows
+      const isCurrentlySelected = currentSelection.has(workflow.id)
+      const workflowIds =
+        isCurrentlySelected && currentSelection.size > 1
+          ? Array.from(currentSelection)
+          : [workflow.id]
+
+      e.dataTransfer.setData('workflow-ids', JSON.stringify(workflowIds))
+      e.dataTransfer.effectAllowed = 'move'
+      onDragStartProp?.()
+    },
+    [workflow.id, onDragStartProp]
+  )
+
+  const {
+    isDragging,
+    shouldPreventClickRef,
+    handleDragStart,
+    handleDragEnd: handleDragEndBase,
+  } = useItemDrag({
+    onDragStart,
+  })
+
+  const handleDragEnd = useCallback(() => {
+    handleDragEndBase()
+    onDragEndProp?.()
+  }, [handleDragEndBase, onDragEndProp])
+
  /**
   * Handle double-click on workflow name to enter rename mode
   */
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -1,6 +1,6 @@
 'use client'

-import { useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo } from 'react'
 import clsx from 'clsx'
 import { useParams, usePathname } from 'next/navigation'
 import { FolderItem } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item'
@@ -14,9 +14,6 @@ import { useFolderStore } from '@/stores/folders/store'
 import type { FolderTreeNode } from '@/stores/folders/types'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'

-/**
- * Constants for tree layout and styling
- */
 const TREE_SPACING = {
  INDENT_PER_LEVEL: 20,
 } as const
@@ -29,12 +26,24 @@ interface WorkflowListProps {
  scrollContainerRef: React.RefObject<HTMLDivElement | null>
 }

-/**
- * WorkflowList component displays workflows organized by folders with drag-and-drop support.
- *
- * @param props - Component props
- * @returns Workflow list with folders and drag-drop support
- */
+const DropIndicatorLine = memo(function DropIndicatorLine({
+  show,
+  level = 0,
+}: {
+  show: boolean
+  level?: number
+}) {
+  if (!show) return null
+  return (
+    <div
+      className='pointer-events-none absolute right-0 left-0 z-20 flex items-center'
+      style={{ paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px` }}
+    >
+      <div className='h-[2px] flex-1 rounded-full bg-[#33b4ff]/70' />
+    </div>
+  )
+})
+
 export function WorkflowList({
  regularWorkflows,
  isLoading = false,
@@ -48,20 +57,21 @@ export function WorkflowList({
  const workflowId = params.workflowId as string

  const { isLoading: foldersLoading } = useFolders(workspaceId)
-
  const { getFolderTree, expandedFolders, getFolderPath, setExpanded } = useFolderStore()

  const {
-    dropTargetId,
+    dropIndicator,
    isDragging,
    setScrollContainer,
+    createWorkflowDragHandlers,
    createFolderDragHandlers,
-    createItemDragHandlers,
-    createRootDragHandlers,
-    createFolderHeaderHoverHandlers,
+    createEmptyFolderDropZone,
+    createFolderContentDropZone,
+    createRootDropZone,
+    handleDragStart,
+    handleDragEnd,
  } = useDragDrop()

-  // Set scroll container when ref changes
  useEffect(() => {
    if (scrollContainerRef.current) {
      setScrollContainer(scrollContainerRef.current)
@@ -76,23 +86,22 @@ export function WorkflowList({
    return activeWorkflow?.folderId || null
  }, [workflowId, regularWorkflows, isLoading, foldersLoading])

-  const workflowsByFolder = useMemo(
-    () =>
-      regularWorkflows.reduce(
-        (acc, workflow) => {
-          const folderId = workflow.folderId || 'root'
-          if (!acc[folderId]) acc[folderId] = []
-          acc[folderId].push(workflow)
-          return acc
-        },
-        {} as Record<string, WorkflowMetadata[]>
-      ),
-    [regularWorkflows]
-  )
+  const workflowsByFolder = useMemo(() => {
+    const grouped = regularWorkflows.reduce(
+      (acc, workflow) => {
+        const folderId = workflow.folderId || 'root'
+        if (!acc[folderId]) acc[folderId] = []
+        acc[folderId].push(workflow)
+        return acc
+      },
+      {} as Record<string, WorkflowMetadata[]>
+    )
+    for (const folderId of Object.keys(grouped)) {
+      grouped[folderId].sort((a, b) => a.sortOrder - b.sortOrder)
+    }
+    return grouped
+  }, [regularWorkflows])

-  /**
-   * Build a flat list of all workflow IDs in display order for range selection
-   */
  const orderedWorkflowIds = useMemo(() => {
    const ids: string[] = []

@@ -106,12 +115,10 @@ export function WorkflowList({
      }
    }

-    // Collect from folders first
    for (const folder of folderTree) {
      collectWorkflowIds(folder)
    }

-    // Then collect root workflows
    const rootWorkflows = workflowsByFolder.root || []
    for (const workflow of rootWorkflows) {
      ids.push(workflow.id)
@@ -120,30 +127,24 @@ export function WorkflowList({
    return ids
  }, [folderTree, workflowsByFolder])

-  // Workflow selection hook - uses active workflow ID as anchor for range selection
  const { handleWorkflowClick } = useWorkflowSelection({
    workflowIds: orderedWorkflowIds,
    activeWorkflowId: workflowId,
  })

  const isWorkflowActive = useCallback(
-    (workflowId: string) => pathname === `/workspace/${workspaceId}/w/${workflowId}`,
+    (wfId: string) => pathname === `/workspace/${workspaceId}/w/${wfId}`,
    [pathname, workspaceId]
  )

-  /**
-   * Auto-expand folders and select active workflow.
-   */
  useEffect(() => {
    if (!workflowId || isLoading || foldersLoading) return

-    // Expand folder path to reveal workflow
    if (activeWorkflowFolderId) {
      const folderPath = getFolderPath(activeWorkflowFolderId)
      folderPath.forEach((folder) => setExpanded(folder.id, true))
    }

-    // Select workflow if not already selected
    const { selectedWorkflows, selectOnly } = useFolderStore.getState()
    if (!selectedWorkflows.has(workflowId)) {
      selectOnly(workflowId)
@@ -151,23 +152,40 @@ export function WorkflowList({
  }, [workflowId, activeWorkflowFolderId, isLoading, foldersLoading, getFolderPath, setExpanded])

  const renderWorkflowItem = useCallback(
-    (workflow: WorkflowMetadata, level: number, parentFolderId: string | null = null) => (
-      <div key={workflow.id} className='relative' {...createItemDragHandlers(parentFolderId)}>
-        <div
-          style={{
-            paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px`,
-          }}
-        >
-          <WorkflowItem
-            workflow={workflow}
-            active={isWorkflowActive(workflow.id)}
-            level={level}
-            onWorkflowClick={handleWorkflowClick}
-          />
+    (workflow: WorkflowMetadata, level: number, folderId: string | null = null) => {
+      const showBefore =
+        dropIndicator?.targetId === workflow.id && dropIndicator?.position === 'before'
+      const showAfter =
+        dropIndicator?.targetId === workflow.id && dropIndicator?.position === 'after'
+
+      return (
+        <div key={workflow.id} className='relative'>
+          <DropIndicatorLine show={showBefore} level={level} />
+          <div
+            style={{ paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px` }}
+            {...createWorkflowDragHandlers(workflow.id, folderId)}
+          >
+            <WorkflowItem
+              workflow={workflow}
+              active={isWorkflowActive(workflow.id)}
+              level={level}
+              onWorkflowClick={handleWorkflowClick}
+              onDragStart={() => handleDragStart('workflow', folderId)}
+              onDragEnd={handleDragEnd}
+            />
+          </div>
+          <DropIndicatorLine show={showAfter} level={level} />
        </div>
-      </div>
-    ),
-    [isWorkflowActive, createItemDragHandlers, handleWorkflowClick]
+      )
+    },
+    [
+      dropIndicator,
+      isWorkflowActive,
+      createWorkflowDragHandlers,
+      handleWorkflowClick,
+      handleDragStart,
+      handleDragEnd,
+    ]
  )

  const renderFolderSection = useCallback(
@@ -179,45 +197,75 @@ export function WorkflowList({
      const workflowsInFolder = workflowsByFolder[folder.id] || []
      const isExpanded = expandedFolders.has(folder.id)
      const hasChildren = workflowsInFolder.length > 0 || folder.children.length > 0
-      const isDropTarget = dropTargetId === folder.id
+
+      const showBefore =
+        dropIndicator?.targetId === folder.id && dropIndicator?.position === 'before'
+      const showAfter = dropIndicator?.targetId === folder.id && dropIndicator?.position === 'after'
+      const showInside =
+        dropIndicator?.targetId === folder.id && dropIndicator?.position === 'inside'
+
+      const childItems: Array<{
+        type: 'folder' | 'workflow'
+        id: string
+        sortOrder: number
+        data: FolderTreeNode | WorkflowMetadata
+      }> = []
+      for (const childFolder of folder.children) {
+        childItems.push({
+          type: 'folder',
+          id: childFolder.id,
+          sortOrder: childFolder.sortOrder,
+          data: childFolder,
+        })
+      }
+      for (const workflow of workflowsInFolder) {
+        childItems.push({
+          type: 'workflow',
+          id: workflow.id,
+          sortOrder: workflow.sortOrder,
+          data: workflow,
+        })
+      }
+      childItems.sort((a, b) => a.sortOrder - b.sortOrder)

      return (
-        <div key={folder.id} className='relative' {...createFolderDragHandlers(folder.id)}>
-          {/* Drop target highlight overlay - always rendered for stable DOM */}
+        <div key={folder.id} className='relative'>
+          <DropIndicatorLine show={showBefore} level={level} />
+          {/* Drop target highlight overlay - covers entire folder section */}
          <div
            className={clsx(
              'pointer-events-none absolute inset-0 z-10 rounded-[4px] transition-opacity duration-75',
-              isDropTarget && isDragging ? 'bg-gray-400/20 opacity-100' : 'opacity-0'
+              showInside && isDragging ? 'bg-[#33b4ff1a] opacity-100' : 'opacity-0'
            )}
          />
-
          <div
            style={{ paddingLeft: `${level * TREE_SPACING.INDENT_PER_LEVEL}px` }}
-            {...createItemDragHandlers(folder.id)}
+            {...createFolderDragHandlers(folder.id, parentFolderId)}
          >
            <FolderItem
              folder={folder}
              level={level}
-              hoverHandlers={createFolderHeaderHoverHandlers(folder.id)}
+              onDragStart={() => handleDragStart('folder', parentFolderId)}
+              onDragEnd={handleDragEnd}
            />
          </div>
+          <DropIndicatorLine show={showAfter} level={level} />

-          {isExpanded && hasChildren && (
-            <div className='relative' {...createItemDragHandlers(folder.id)}>
-              {/* Vertical line - positioned to align under folder chevron */}
+          {isExpanded && (hasChildren || isDragging) && (
+            <div className='relative' {...createFolderContentDropZone(folder.id)}>
              <div
                className='pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--border)]'
                style={{ left: `${level * TREE_SPACING.INDENT_PER_LEVEL + 12}px` }}
              />
              <div className='mt-[2px] space-y-[2px] pl-[2px]'>
-                {workflowsInFolder.map((workflow: WorkflowMetadata) =>
-                  renderWorkflowItem(workflow, level + 1, folder.id)
+                {childItems.map((item) =>
+                  item.type === 'folder'
+                    ? renderFolderSection(item.data as FolderTreeNode, level + 1, folder.id)
+                    : renderWorkflowItem(item.data as WorkflowMetadata, level + 1, folder.id)
+                )}
+                {!hasChildren && isDragging && (
+                  <div className='h-[24px]' {...createEmptyFolderDropZone(folder.id)} />
                )}
-                {folder.children.map((childFolder) => (
-                  <div key={childFolder.id} className='relative'>
-                    {renderFolderSection(childFolder, level + 1, folder.id)}
-                  </div>
-                ))}
              </div>
            </div>
          )}
@@ -227,29 +275,47 @@ export function WorkflowList({
    [
      workflowsByFolder,
      expandedFolders,
-      dropTargetId,
+      dropIndicator,
      isDragging,
      createFolderDragHandlers,
-      createItemDragHandlers,
-      createFolderHeaderHoverHandlers,
+      createEmptyFolderDropZone,
+      createFolderContentDropZone,
+      handleDragStart,
+      handleDragEnd,
      renderWorkflowItem,
    ]
  )

-  const handleRootDragEvents = createRootDragHandlers()
+  const rootDropZoneHandlers = createRootDropZone()
  const rootWorkflows = workflowsByFolder.root || []
-  const isRootDropTarget = dropTargetId === 'root'
-  const hasRootWorkflows = rootWorkflows.length > 0
-  const hasFolders = folderTree.length > 0

-  /**
-   * Handle click on empty space to revert to active workflow selection
-   */
+  const rootItems = useMemo(() => {
+    const items: Array<{
+      type: 'folder' | 'workflow'
+      id: string
+      sortOrder: number
+      data: FolderTreeNode | WorkflowMetadata
+    }> = []
+    for (const folder of folderTree) {
+      items.push({ type: 'folder', id: folder.id, sortOrder: folder.sortOrder, data: folder })
+    }
+    for (const workflow of rootWorkflows) {
+      items.push({
+        type: 'workflow',
+        id: workflow.id,
+        sortOrder: workflow.sortOrder,
+        data: workflow,
+      })
+    }
+    return items.sort((a, b) => a.sortOrder - b.sortOrder)
+  }, [folderTree, rootWorkflows])
+
+  const hasRootItems = rootItems.length > 0
+  const showRootInside = dropIndicator?.targetId === 'root' && dropIndicator?.position === 'inside'
+
  const handleContainerClick = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
-      // Only handle clicks directly on the container (empty space)
      if (e.target !== e.currentTarget) return
-
      const { selectOnly, clearSelection } = useFolderStore.getState()
      workflowId ? selectOnly(workflowId) : clearSelection()
    },
@@ -258,36 +324,23 @@ export function WorkflowList({

  return (
    <div className='flex min-h-full flex-col pb-[8px]' onClick={handleContainerClick}>
-      {/* Folders Section */}
-      {hasFolders && (
-        <div className='mb-[2px] space-y-[2px]'>
-          {folderTree.map((folder) => renderFolderSection(folder, 0))}
-        </div>
-      )}
-
-      {/* Root Workflows Section - Expands to fill remaining space */}
      <div
-        className={clsx('relative flex-1', !hasRootWorkflows && 'min-h-[26px]')}
-        {...handleRootDragEvents}
+        className={clsx('relative flex-1 rounded-[4px]', !hasRootItems && 'min-h-[26px]')}
+        {...rootDropZoneHandlers}
      >
-        {/* Root drop target highlight overlay - always rendered for stable DOM */}
+        {/* Root drop target highlight overlay */}
        <div
          className={clsx(
            'pointer-events-none absolute inset-0 z-10 rounded-[4px] transition-opacity duration-75',
-            isRootDropTarget && isDragging ? 'bg-gray-400/20 opacity-100' : 'opacity-0'
+            showRootInside && isDragging ? 'bg-[#33b4ff1a] opacity-100' : 'opacity-0'
          )}
        />
-
        <div className='space-y-[2px]'>
-          {rootWorkflows.map((workflow: WorkflowMetadata) => (
-            <WorkflowItem
-              key={workflow.id}
-              workflow={workflow}
-              active={isWorkflowActive(workflow.id)}
-              level={0}
-              onWorkflowClick={handleWorkflowClick}
-            />
-          ))}
+          {rootItems.map((item) =>
+            item.type === 'folder'
+              ? renderFolderSection(item.data as FolderTreeNode, 0, null)
+              : renderWorkflowItem(item.data as WorkflowMetadata, 0, null)
+          )}
        </div>
      </div>

--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts
@@ -1,6 +1,6 @@
 export { useAutoScroll } from './use-auto-scroll'
 export { useContextMenu } from './use-context-menu'
-export { useDragDrop } from './use-drag-drop'
+export { type DropIndicator, useDragDrop } from './use-drag-drop'
 export { useFolderExpand } from './use-folder-expand'
 export { useFolderOperations } from './use-folder-operations'
 export { useItemDrag } from './use-item-drag'
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts
@@ -1,47 +1,40 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams } from 'next/navigation'
-import { useUpdateFolder } from '@/hooks/queries/folders'
+import { useReorderFolders } from '@/hooks/queries/folders'
+import { useReorderWorkflows } from '@/hooks/queries/workflows'
 import { useFolderStore } from '@/stores/folders/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'

 const logger = createLogger('WorkflowList:DragDrop')

-/**
- * Constants for auto-scroll behavior
- */
-const SCROLL_THRESHOLD = 60 // Distance from edge to trigger scroll
-const SCROLL_SPEED = 8 // Pixels per frame
+const SCROLL_THRESHOLD = 60
+const SCROLL_SPEED = 8
+const HOVER_EXPAND_DELAY = 400

-/**
- * Constants for folder auto-expand on hover during drag
- */
-const HOVER_EXPAND_DELAY = 400 // Milliseconds to wait before expanding folder
+export interface DropIndicator {
+  targetId: string
+  position: 'before' | 'after' | 'inside'
+  folderId: string | null
+}

-/**
- * Custom hook for handling drag and drop operations for workflows and folders.
- * Includes auto-scrolling, drop target highlighting, and hover-to-expand.
- *
- * @returns Drag and drop state and event handlers
- */
 export function useDragDrop() {
-  const [dropTargetId, setDropTargetId] = useState<string | null>(null)
+  const [dropIndicator, setDropIndicator] = useState<DropIndicator | null>(null)
  const [isDragging, setIsDragging] = useState(false)
  const [hoverFolderId, setHoverFolderId] = useState<string | null>(null)
  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
  const scrollIntervalRef = useRef<number | null>(null)
  const hoverExpandTimerRef = useRef<number | null>(null)
  const lastDragYRef = useRef<number>(0)
+  const draggedTypeRef = useRef<'workflow' | 'folder' | null>(null)
+  const draggedSourceFolderRef = useRef<string | null>(null)

  const params = useParams()
  const workspaceId = params.workspaceId as string | undefined
-  const updateFolderMutation = useUpdateFolder()
+  const reorderWorkflowsMutation = useReorderWorkflows()
+  const reorderFoldersMutation = useReorderFolders()
  const { setExpanded, expandedFolders } = useFolderStore()
-  const { updateWorkflow } = useWorkflowRegistry()

-  /**
-   * Auto-scroll handler - scrolls container when dragging near edges
-   */
  const handleAutoScroll = useCallback(() => {
    if (!scrollContainerRef.current || !isDragging) return

@@ -49,22 +42,17 @@ export function useDragDrop() {
    const rect = container.getBoundingClientRect()
    const mouseY = lastDragYRef.current

-    // Only scroll if mouse is within container bounds
    if (mouseY < rect.top || mouseY > rect.bottom) return

-    // Calculate distance from top and bottom edges
    const distanceFromTop = mouseY - rect.top
    const distanceFromBottom = rect.bottom - mouseY

    let scrollDelta = 0

-    // Scroll up if near top and not at scroll top
    if (distanceFromTop < SCROLL_THRESHOLD && container.scrollTop > 0) {
      const intensity = Math.max(0, Math.min(1, 1 - distanceFromTop / SCROLL_THRESHOLD))
      scrollDelta = -SCROLL_SPEED * intensity
-    }
-    // Scroll down if near bottom and not at scroll bottom
-    else if (distanceFromBottom < SCROLL_THRESHOLD) {
+    } else if (distanceFromBottom < SCROLL_THRESHOLD) {
      const maxScroll = container.scrollHeight - container.clientHeight
      if (container.scrollTop < maxScroll) {
        const intensity = Math.max(0, Math.min(1, 1 - distanceFromBottom / SCROLL_THRESHOLD))
@@ -77,12 +65,9 @@ export function useDragDrop() {
    }
  }, [isDragging])

-  /**
-   * Start auto-scroll animation loop
-   */
  useEffect(() => {
    if (isDragging) {
-      scrollIntervalRef.current = window.setInterval(handleAutoScroll, 10) // ~100fps for smoother response
+      scrollIntervalRef.current = window.setInterval(handleAutoScroll, 10)
    } else {
      if (scrollIntervalRef.current) {
        clearInterval(scrollIntervalRef.current)
@@ -97,30 +82,17 @@ export function useDragDrop() {
    }
  }, [isDragging, handleAutoScroll])

-  /**
-   * Handle hover folder changes - start/clear expand timer
-   */
  useEffect(() => {
-    // Clear existing timer when hover folder changes
    if (hoverExpandTimerRef.current) {
      clearTimeout(hoverExpandTimerRef.current)
      hoverExpandTimerRef.current = null
    }

-    // Don't start timer if not dragging or no folder is hovered
-    if (!isDragging || !hoverFolderId) {
-      return
-    }
+    if (!isDragging || !hoverFolderId) return
+    if (expandedFolders.has(hoverFolderId)) return

-    // Don't expand if folder is already expanded
-    if (expandedFolders.has(hoverFolderId)) {
-      return
-    }
-
-    // Start timer to expand folder after delay
    hoverExpandTimerRef.current = window.setTimeout(() => {
      setExpanded(hoverFolderId, true)
-      logger.info(`Auto-expanded folder ${hoverFolderId} during drag`)
    }, HOVER_EXPAND_DELAY)

    return () => {
@@ -131,249 +103,468 @@ export function useDragDrop() {
    }
  }, [hoverFolderId, isDragging, expandedFolders, setExpanded])

-  /**
-   * Cleanup hover state when dragging stops
-   */
  useEffect(() => {
    if (!isDragging) {
      setHoverFolderId(null)
+      setDropIndicator(null)
+      draggedTypeRef.current = null
    }
  }, [isDragging])

-  /**
-   * Moves one or more workflows to a target folder
-   *
-   * @param workflowIds - Array of workflow IDs to move
-   * @param targetFolderId - Target folder ID or null for root
-   */
-  const handleWorkflowDrop = useCallback(
-    async (workflowIds: string[], targetFolderId: string | null) => {
-      if (!workflowIds.length) {
-        logger.warn('No workflows to move')
-        return
-      }
-
-      try {
-        await Promise.all(
-          workflowIds.map((workflowId) => updateWorkflow(workflowId, { folderId: targetFolderId }))
-        )
-        logger.info(`Moved ${workflowIds.length} workflow(s)`)
-      } catch (error) {
-        logger.error('Failed to move workflows:', error)
-      }
+  const calculateDropPosition = useCallback(
+    (e: React.DragEvent, element: HTMLElement): 'before' | 'after' => {
+      const rect = element.getBoundingClientRect()
+      const midY = rect.top + rect.height / 2
+      return e.clientY < midY ? 'before' : 'after'
    },
-    [updateWorkflow]
+    []
  )

-  /**
-   * Moves a folder to a new parent folder, with validation
-   *
-   * @param draggedFolderId - ID of the folder being moved
-   * @param targetFolderId - Target folder ID or null for root
-   */
-  const handleFolderMove = useCallback(
-    async (draggedFolderId: string, targetFolderId: string | null) => {
-      if (!draggedFolderId) {
-        logger.warn('No folder to move')
-        return
+  const calculateFolderDropPosition = useCallback(
+    (e: React.DragEvent, element: HTMLElement): 'before' | 'inside' | 'after' => {
+      const rect = element.getBoundingClientRect()
+      const relativeY = e.clientY - rect.top
+      const height = rect.height
+      // Top 25% = before, middle 50% = inside, bottom 25% = after
+      if (relativeY < height * 0.25) return 'before'
+      if (relativeY > height * 0.75) return 'after'
+      return 'inside'
+    },
+    []
+  )
+
+  type SiblingItem = { type: 'folder' | 'workflow'; id: string; sortOrder: number }
+
+  const getDestinationFolderId = useCallback((indicator: DropIndicator): string | null => {
+    return indicator.position === 'inside'
+      ? indicator.targetId === 'root'
+        ? null
+        : indicator.targetId
+      : indicator.folderId
+  }, [])
+
+  const calculateInsertIndex = useCallback(
+    (remaining: SiblingItem[], indicator: DropIndicator): number => {
+      return indicator.position === 'inside'
+        ? remaining.length
+        : remaining.findIndex((item) => item.id === indicator.targetId) +
+            (indicator.position === 'after' ? 1 : 0)
+    },
+    []
+  )
+
+  const buildAndSubmitUpdates = useCallback(
+    async (newOrder: SiblingItem[], destinationFolderId: string | null) => {
+      const indexed = newOrder.map((item, i) => ({ ...item, sortOrder: i }))
+
+      const folderUpdates = indexed
+        .filter((item) => item.type === 'folder')
+        .map((item) => ({ id: item.id, sortOrder: item.sortOrder, parentId: destinationFolderId }))
+
+      const workflowUpdates = indexed
+        .filter((item) => item.type === 'workflow')
+        .map((item) => ({ id: item.id, sortOrder: item.sortOrder, folderId: destinationFolderId }))
+
+      await Promise.all([
+        folderUpdates.length > 0 &&
+          reorderFoldersMutation.mutateAsync({ workspaceId: workspaceId!, updates: folderUpdates }),
+        workflowUpdates.length > 0 &&
+          reorderWorkflowsMutation.mutateAsync({
+            workspaceId: workspaceId!,
+            updates: workflowUpdates,
+          }),
+      ])
+    },
+    [workspaceId, reorderFoldersMutation, reorderWorkflowsMutation]
+  )
+
+  const isLeavingElement = useCallback((e: React.DragEvent<HTMLElement>): boolean => {
+    const relatedTarget = e.relatedTarget as HTMLElement | null
+    const currentTarget = e.currentTarget as HTMLElement
+    return !relatedTarget || !currentTarget.contains(relatedTarget)
+  }, [])
+
+  const initDragOver = useCallback((e: React.DragEvent<HTMLElement>, stopPropagation = true) => {
+    e.preventDefault()
+    if (stopPropagation) e.stopPropagation()
+    lastDragYRef.current = e.clientY
+    setIsDragging(true)
+  }, [])
+
+  const getSiblingItems = useCallback((folderId: string | null): SiblingItem[] => {
+    const currentFolders = useFolderStore.getState().folders
+    const currentWorkflows = useWorkflowRegistry.getState().workflows
+    return [
+      ...Object.values(currentFolders)
+        .filter((f) => f.parentId === folderId)
+        .map((f) => ({ type: 'folder' as const, id: f.id, sortOrder: f.sortOrder })),
+      ...Object.values(currentWorkflows)
+        .filter((w) => w.folderId === folderId)
+        .map((w) => ({ type: 'workflow' as const, id: w.id, sortOrder: w.sortOrder })),
+    ].sort((a, b) => a.sortOrder - b.sortOrder)
+  }, [])
+
+  const setNormalizedDropIndicator = useCallback(
+    (indicator: DropIndicator | null) => {
+      setDropIndicator((prev) => {
+        let next: DropIndicator | null = indicator
+
+        // Normalize 'after' to 'before' of next sibling
+        if (indicator && indicator.position === 'after' && indicator.targetId !== 'root') {
+          const siblings = getSiblingItems(indicator.folderId)
+          const currentIdx = siblings.findIndex((s) => s.id === indicator.targetId)
+          const nextSibling = siblings[currentIdx + 1]
+          if (nextSibling) {
+            next = {
+              targetId: nextSibling.id,
+              position: 'before',
+              folderId: indicator.folderId,
+            }
+          }
+        }
+
+        // Skip update if indicator hasn't changed
+        if (
+          prev?.targetId === next?.targetId &&
+          prev?.position === next?.position &&
+          prev?.folderId === next?.folderId
+        ) {
+          return prev
+        }
+
+        return next
+      })
+    },
+    [getSiblingItems]
+  )
+
+  const isNoOpMove = useCallback(
+    (
+      indicator: DropIndicator,
+      draggedIds: string[],
+      draggedType: 'folder' | 'workflow',
+      destinationFolderId: string | null,
+      currentFolderId: string | null | undefined
+    ): boolean => {
+      if (indicator.position !== 'inside' && draggedIds.includes(indicator.targetId)) {
+        return true
      }
+      if (currentFolderId !== destinationFolderId) {
+        return false
+      }
+      const siblingItems = getSiblingItems(destinationFolderId)
+      const remaining = siblingItems.filter(
+        (item) => !(item.type === draggedType && draggedIds.includes(item.id))
+      )
+      const insertAt = calculateInsertIndex(remaining, indicator)
+      const originalIdx = siblingItems.findIndex(
+        (item) => item.type === draggedType && item.id === draggedIds[0]
+      )
+      return insertAt === originalIdx
+    },
+    [getSiblingItems, calculateInsertIndex]
+  )
+
+  const handleWorkflowDrop = useCallback(
+    async (workflowIds: string[], indicator: DropIndicator) => {
+      if (!workflowIds.length || !workspaceId) return

      try {
-        const folderStore = useFolderStore.getState()
-        const draggedFolderPath = folderStore.getFolderPath(draggedFolderId)
+        const destinationFolderId = getDestinationFolderId(indicator)
+        const currentWorkflows = useWorkflowRegistry.getState().workflows
+        const firstWorkflow = currentWorkflows[workflowIds[0]]

-        // Prevent moving folder into its own descendant
        if (
-          targetFolderId &&
-          draggedFolderPath.some((ancestor) => ancestor.id === targetFolderId)
+          isNoOpMove(
+            indicator,
+            workflowIds,
+            'workflow',
+            destinationFolderId,
+            firstWorkflow?.folderId
+          )
        ) {
-          logger.info('Cannot move folder into its own descendant')
          return
        }

-        // Prevent moving folder into itself
-        if (draggedFolderId === targetFolderId) {
+        const siblingItems = getSiblingItems(destinationFolderId)
+        const movingSet = new Set(workflowIds)
+        const remaining = siblingItems.filter(
+          (item) => !(item.type === 'workflow' && movingSet.has(item.id))
+        )
+        const moving = workflowIds
+          .map((id) => ({
+            type: 'workflow' as const,
+            id,
+            sortOrder: currentWorkflows[id]?.sortOrder ?? 0,
+          }))
+          .sort((a, b) => a.sortOrder - b.sortOrder)
+
+        const insertAt = calculateInsertIndex(remaining, indicator)
+
+        const newOrder: SiblingItem[] = [
+          ...remaining.slice(0, insertAt),
+          ...moving,
+          ...remaining.slice(insertAt),
+        ]
+
+        await buildAndSubmitUpdates(newOrder, destinationFolderId)
+      } catch (error) {
+        logger.error('Failed to reorder workflows:', error)
+      }
+    },
+    [
+      getDestinationFolderId,
+      getSiblingItems,
+      calculateInsertIndex,
+      isNoOpMove,
+      buildAndSubmitUpdates,
+    ]
+  )
+
+  const handleFolderDrop = useCallback(
+    async (draggedFolderId: string, indicator: DropIndicator) => {
+      if (!draggedFolderId || !workspaceId) return
+
+      try {
+        const folderStore = useFolderStore.getState()
+        const currentFolders = folderStore.folders
+
+        const targetParentId = getDestinationFolderId(indicator)
+
+        if (draggedFolderId === targetParentId) {
          logger.info('Cannot move folder into itself')
          return
        }

-        if (!workspaceId) {
-          logger.warn('No workspaceId available for folder move')
+        if (targetParentId) {
+          const targetPath = folderStore.getFolderPath(targetParentId)
+          if (targetPath.some((f) => f.id === draggedFolderId)) {
+            logger.info('Cannot move folder into its own descendant')
+            return
+          }
+        }
+
+        const draggedFolder = currentFolders[draggedFolderId]
+        if (
+          isNoOpMove(
+            indicator,
+            [draggedFolderId],
+            'folder',
+            targetParentId,
+            draggedFolder?.parentId
+          )
+        ) {
          return
        }
-        await updateFolderMutation.mutateAsync({
-          workspaceId,
-          id: draggedFolderId,
-          updates: { parentId: targetFolderId },
-        })
-        logger.info(`Moved folder to ${targetFolderId ? `folder ${targetFolderId}` : 'root'}`)
+
+        const siblingItems = getSiblingItems(targetParentId)
+        const remaining = siblingItems.filter(
+          (item) => !(item.type === 'folder' && item.id === draggedFolderId)
+        )
+
+        const insertAt = calculateInsertIndex(remaining, indicator)
+
+        const newOrder: SiblingItem[] = [
+          ...remaining.slice(0, insertAt),
+          { type: 'folder', id: draggedFolderId, sortOrder: 0 },
+          ...remaining.slice(insertAt),
+        ]
+
+        await buildAndSubmitUpdates(newOrder, targetParentId)
      } catch (error) {
-        logger.error('Failed to move folder:', error)
+        logger.error('Failed to reorder folder:', error)
      }
    },
-    [updateFolderMutation, workspaceId]
+    [
+      workspaceId,
+      getDestinationFolderId,
+      getSiblingItems,
+      calculateInsertIndex,
+      isNoOpMove,
+      buildAndSubmitUpdates,
+    ]
  )

-  /**
-   * Handles drop events for both workflows and folders
-   *
-   * @param e - React drag event
-   * @param targetFolderId - Target folder ID or null for root
-   */
-  const handleFolderDrop = useCallback(
-    async (e: React.DragEvent, targetFolderId: string | null) => {
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
      e.preventDefault()
      e.stopPropagation()
-      setDropTargetId(null)
+
+      const indicator = dropIndicator
+      setDropIndicator(null)
      setIsDragging(false)

+      if (!indicator) return
+
      try {
-        // Check if dropping workflows
        const workflowIdsData = e.dataTransfer.getData('workflow-ids')
        if (workflowIdsData) {
          const workflowIds = JSON.parse(workflowIdsData) as string[]
-          await handleWorkflowDrop(workflowIds, targetFolderId)
+          await handleWorkflowDrop(workflowIds, indicator)
          return
        }

-        // Check if dropping a folder
        const folderIdData = e.dataTransfer.getData('folder-id')
-        if (folderIdData && targetFolderId !== folderIdData) {
-          await handleFolderMove(folderIdData, targetFolderId)
+        if (folderIdData) {
+          await handleFolderDrop(folderIdData, indicator)
        }
      } catch (error) {
        logger.error('Failed to handle drop:', error)
      }
    },
-    [handleWorkflowDrop, handleFolderMove]
+    [dropIndicator, handleWorkflowDrop, handleFolderDrop]
  )

-  /**
-   * Creates drag event handlers for a specific folder section
-   * These handlers are attached to the entire folder section container
-   *
-   * @param folderId - Folder ID to create handlers for
-   * @returns Object containing drag event handlers
-   */
-  const createFolderDragHandlers = useCallback(
-    (folderId: string) => ({
-      onDragEnter: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        setIsDragging(true)
-      },
+  const createWorkflowDragHandlers = useCallback(
+    (workflowId: string, folderId: string | null) => ({
      onDragOver: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        lastDragYRef.current = e.clientY
-        setDropTargetId(folderId)
-        setIsDragging(true)
-      },
-      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        const relatedTarget = e.relatedTarget as HTMLElement | null
-        const currentTarget = e.currentTarget as HTMLElement
-        // Only clear if we're leaving the folder section completely
-        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-          setDropTargetId(null)
+        initDragOver(e)
+        const isSameFolder = draggedSourceFolderRef.current === folderId
+        if (isSameFolder) {
+          const position = calculateDropPosition(e, e.currentTarget)
+          setNormalizedDropIndicator({ targetId: workflowId, position, folderId })
+        } else {
+          setNormalizedDropIndicator({
+            targetId: folderId || 'root',
+            position: 'inside',
+            folderId: null,
+          })
        }
      },
-      onDrop: (e: React.DragEvent<HTMLElement>) => handleFolderDrop(e, folderId),
+      onDrop: handleDrop,
    }),
-    [handleFolderDrop]
+    [initDragOver, calculateDropPosition, setNormalizedDropIndicator, handleDrop]
  )

-  /**
-   * Creates drag event handlers for items (workflows/folders) that belong to a parent folder
-   * When dragging over an item, highlights the parent folder section
-   *
-   * @param parentFolderId - Parent folder ID or null for root
-   * @returns Object containing drag event handlers
-   */
-  const createItemDragHandlers = useCallback(
-    (parentFolderId: string | null) => ({
+  const createFolderDragHandlers = useCallback(
+    (folderId: string, parentFolderId: string | null) => ({
+      onDragOver: (e: React.DragEvent<HTMLElement>) => {
+        initDragOver(e)
+        if (draggedTypeRef.current === 'folder') {
+          const isSameParent = draggedSourceFolderRef.current === parentFolderId
+          if (isSameParent) {
+            const position = calculateDropPosition(e, e.currentTarget)
+            setNormalizedDropIndicator({ targetId: folderId, position, folderId: parentFolderId })
+          } else {
+            setNormalizedDropIndicator({
+              targetId: folderId,
+              position: 'inside',
+              folderId: parentFolderId,
+            })
+            setHoverFolderId(folderId)
+          }
+        } else {
+          // Workflow being dragged over a folder
+          const isSameParent = draggedSourceFolderRef.current === parentFolderId
+          if (isSameParent) {
+            // Same level - use three zones: top=before, middle=inside, bottom=after
+            const position = calculateFolderDropPosition(e, e.currentTarget)
+            setNormalizedDropIndicator({ targetId: folderId, position, folderId: parentFolderId })
+            if (position === 'inside') {
+              setHoverFolderId(folderId)
+            } else {
+              setHoverFolderId(null)
+            }
+          } else {
+            // Different container - drop into folder
+            setNormalizedDropIndicator({
+              targetId: folderId,
+              position: 'inside',
+              folderId: parentFolderId,
+            })
+            setHoverFolderId(folderId)
+          }
+        }
+      },
+      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
+        if (isLeavingElement(e)) setHoverFolderId(null)
+      },
+      onDrop: handleDrop,
+    }),
+    [
+      initDragOver,
+      calculateDropPosition,
+      calculateFolderDropPosition,
+      setNormalizedDropIndicator,
+      isLeavingElement,
+      handleDrop,
+    ]
+  )
+
+  const createEmptyFolderDropZone = useCallback(
+    (folderId: string) => ({
+      onDragOver: (e: React.DragEvent<HTMLElement>) => {
+        initDragOver(e)
+        setNormalizedDropIndicator({ targetId: folderId, position: 'inside', folderId })
+      },
+      onDrop: handleDrop,
+    }),
+    [initDragOver, setNormalizedDropIndicator, handleDrop]
+  )
+
+  const createFolderContentDropZone = useCallback(
+    (folderId: string) => ({
      onDragOver: (e: React.DragEvent<HTMLElement>) => {
        e.preventDefault()
        e.stopPropagation()
        lastDragYRef.current = e.clientY
-        setDropTargetId(parentFolderId || 'root')
        setIsDragging(true)
+        if (e.target === e.currentTarget && draggedSourceFolderRef.current !== folderId) {
+          setNormalizedDropIndicator({ targetId: folderId, position: 'inside', folderId: null })
+        }
      },
+      onDrop: handleDrop,
    }),
+    [setNormalizedDropIndicator, handleDrop]
+  )
+
+  const createRootDropZone = useCallback(
+    () => ({
+      onDragOver: (e: React.DragEvent<HTMLElement>) => {
+        initDragOver(e, false)
+        if (e.target === e.currentTarget) {
+          setNormalizedDropIndicator({ targetId: 'root', position: 'inside', folderId: null })
+        }
+      },
+      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
+        if (isLeavingElement(e)) setNormalizedDropIndicator(null)
+      },
+      onDrop: handleDrop,
+    }),
+    [initDragOver, setNormalizedDropIndicator, isLeavingElement, handleDrop]
+  )
+
+  const handleDragStart = useCallback(
+    (type: 'workflow' | 'folder', sourceFolderId: string | null) => {
+      draggedTypeRef.current = type
+      draggedSourceFolderRef.current = sourceFolderId
+      setIsDragging(true)
+    },
    []
  )

-  /**
-   * Creates drag event handlers for the root drop zone
-   *
-   * @returns Object containing drag event handlers for root
-   */
-  const createRootDragHandlers = useCallback(
-    () => ({
-      onDragEnter: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        setIsDragging(true)
-      },
-      onDragOver: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        lastDragYRef.current = e.clientY
-        setDropTargetId('root')
-        setIsDragging(true)
-      },
-      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
-        e.preventDefault()
-        const relatedTarget = e.relatedTarget as HTMLElement | null
-        const currentTarget = e.currentTarget as HTMLElement
-        // Only clear if we're leaving the root completely
-        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-          setDropTargetId(null)
-        }
-      },
-      onDrop: (e: React.DragEvent<HTMLElement>) => handleFolderDrop(e, null),
-    }),
-    [handleFolderDrop]
-  )
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false)
+    setDropIndicator(null)
+    draggedTypeRef.current = null
+    draggedSourceFolderRef.current = null
+    setHoverFolderId(null)
+  }, [])

-  /**
-   * Creates drag event handlers for folder header (the clickable part)
-   * These handlers trigger folder expansion on hover during drag
-   *
-   * @param folderId - Folder ID to handle hover for
-   * @returns Object containing drag event handlers for folder header
-   */
-  const createFolderHeaderHoverHandlers = useCallback(
-    (folderId: string) => ({
-      onDragEnter: (e: React.DragEvent<HTMLElement>) => {
-        if (isDragging) {
-          setHoverFolderId(folderId)
-        }
-      },
-      onDragLeave: (e: React.DragEvent<HTMLElement>) => {
-        const relatedTarget = e.relatedTarget as HTMLElement | null
-        const currentTarget = e.currentTarget as HTMLElement
-        // Only clear if we're leaving the folder header completely
-        if (!relatedTarget || !currentTarget.contains(relatedTarget)) {
-          setHoverFolderId(null)
-        }
-      },
-    }),
-    [isDragging]
-  )
-
-  /**
-   * Set the scroll container ref for auto-scrolling
-   *
-   * @param element - Scrollable container element
-   */
  const setScrollContainer = useCallback((element: HTMLDivElement | null) => {
    scrollContainerRef.current = element
  }, [])

  return {
-    dropTargetId,
+    dropIndicator,
    isDragging,
    setScrollContainer,
+    createWorkflowDragHandlers,
    createFolderDragHandlers,
-    createItemDragHandlers,
-    createRootDragHandlers,
-    createFolderHeaderHoverHandlers,
+    createEmptyFolderDropZone,
+    createFolderContentDropZone,
+    createRootDropZone,
+    handleDragStart,
+    handleDragEnd,
  }
 }
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workspace.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-export-workspace.ts
@@ -64,6 +64,7 @@ export function useExportWorkspace({ onSuccess }: UseExportWorkspaceProps = {})
            id: folder.id,
            name: folder.name,
            parentId: folder.parentId,
+            sortOrder: folder.sortOrder,
          })
        )

--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workflow.ts
@@ -40,7 +40,7 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
   * Import a single workflow
   */
  const importSingleWorkflow = useCallback(
-    async (content: string, filename: string, folderId?: string) => {
+    async (content: string, filename: string, folderId?: string, sortOrder?: number) => {
      const { data: workflowData, errors: parseErrors } = parseWorkflowJson(content)

      if (!workflowData || parseErrors.length > 0) {
@@ -60,6 +60,7 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
        description: workflowData.metadata?.description || 'Imported from JSON',
        workspaceId,
        folderId: folderId || undefined,
+        sortOrder,
      })
      const newWorkflowId = result.id

@@ -139,6 +140,56 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
            workspaceId,
          })
          const folderMap = new Map<string, string>()
+          const sanitizeName = (name: string) => name.replace(/[^a-z0-9-_]/gi, '-')
+
+          if (metadata?.folders && metadata.folders.length > 0) {
+            type ExportedFolder = {
+              id: string
+              name: string
+              parentId: string | null
+              sortOrder?: number
+            }
+            const foldersById = new Map<string, ExportedFolder>(
+              metadata.folders.map((f) => [f.id, f])
+            )
+            const oldIdToNewId = new Map<string, string>()
+
+            const buildPath = (folderId: string): string => {
+              const pathParts: string[] = []
+              let currentId: string | null = folderId
+              while (currentId && foldersById.has(currentId)) {
+                const folder: ExportedFolder = foldersById.get(currentId)!
+                pathParts.unshift(sanitizeName(folder.name))
+                currentId = folder.parentId
+              }
+              return pathParts.join('/')
+            }
+
+            const createFolderRecursive = async (folder: ExportedFolder): Promise<string> => {
+              if (oldIdToNewId.has(folder.id)) {
+                return oldIdToNewId.get(folder.id)!
+              }
+
+              let parentId = importFolder.id
+              if (folder.parentId && foldersById.has(folder.parentId)) {
+                parentId = await createFolderRecursive(foldersById.get(folder.parentId)!)
+              }
+
+              const newFolder = await createFolderMutation.mutateAsync({
+                name: folder.name,
+                workspaceId,
+                parentId,
+                sortOrder: folder.sortOrder,
+              })
+              oldIdToNewId.set(folder.id, newFolder.id)
+              folderMap.set(buildPath(folder.id), newFolder.id)
+              return newFolder.id
+            }
+
+            for (const folder of metadata.folders) {
+              await createFolderRecursive(folder)
+            }
+          }

          for (const workflow of extractedWorkflows) {
            try {
@@ -147,15 +198,17 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
              if (workflow.folderPath.length > 0) {
                const folderPathKey = workflow.folderPath.join('/')

-                if (!folderMap.has(folderPathKey)) {
+                if (folderMap.has(folderPathKey)) {
+                  targetFolderId = folderMap.get(folderPathKey)!
+                } else {
                  let parentId = importFolder.id
-
                  for (let i = 0; i < workflow.folderPath.length; i++) {
                    const pathSegment = workflow.folderPath.slice(0, i + 1).join('/')
+                    const folderNameForSegment = workflow.folderPath[i]

                    if (!folderMap.has(pathSegment)) {
                      const subFolder = await createFolderMutation.mutateAsync({
-                        name: workflow.folderPath[i],
+                        name: folderNameForSegment,
                        workspaceId,
                        parentId,
                      })
@@ -165,15 +218,15 @@ export function useImportWorkflow({ workspaceId }: UseImportWorkflowProps) {
                      parentId = folderMap.get(pathSegment)!
                    }
                  }
+                  targetFolderId = folderMap.get(folderPathKey)!
                }
-
-                targetFolderId = folderMap.get(folderPathKey)!
              }

              const workflowId = await importSingleWorkflow(
                workflow.content,
                workflow.name,
-                targetFolderId
+                targetFolderId,
+                workflow.sortOrder
              )
              if (workflowId) importedWorkflowIds.push(workflowId)
            } catch (error) {
--- a/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workspace.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/hooks/use-import-workspace.ts
@@ -59,7 +59,7 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
        const createResponse = await fetch('/api/workspaces', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name: workspaceName }),
+          body: JSON.stringify({ name: workspaceName, skipDefaultWorkflow: true }),
        })

        if (!createResponse.ok) {
@@ -70,6 +70,56 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
        logger.info('Created new workspace:', newWorkspace)

        const folderMap = new Map<string, string>()
+        const sanitizeName = (name: string) => name.replace(/[^a-z0-9-_]/gi, '-')
+
+        if (metadata?.folders && metadata.folders.length > 0) {
+          type ExportedFolder = {
+            id: string
+            name: string
+            parentId: string | null
+            sortOrder?: number
+          }
+          const foldersById = new Map<string, ExportedFolder>(
+            metadata.folders.map((f) => [f.id, f])
+          )
+          const oldIdToNewId = new Map<string, string>()
+
+          const buildPath = (folderId: string): string => {
+            const pathParts: string[] = []
+            let currentId: string | null = folderId
+            while (currentId && foldersById.has(currentId)) {
+              const folder: ExportedFolder = foldersById.get(currentId)!
+              pathParts.unshift(sanitizeName(folder.name))
+              currentId = folder.parentId
+            }
+            return pathParts.join('/')
+          }
+
+          const createFolderRecursive = async (folder: ExportedFolder): Promise<string> => {
+            if (oldIdToNewId.has(folder.id)) {
+              return oldIdToNewId.get(folder.id)!
+            }
+
+            let parentId: string | undefined
+            if (folder.parentId && foldersById.has(folder.parentId)) {
+              parentId = await createFolderRecursive(foldersById.get(folder.parentId)!)
+            }
+
+            const newFolder = await createFolderMutation.mutateAsync({
+              name: folder.name,
+              workspaceId: newWorkspace.id,
+              parentId,
+              sortOrder: folder.sortOrder,
+            })
+            oldIdToNewId.set(folder.id, newFolder.id)
+            folderMap.set(buildPath(folder.id), newFolder.id)
+            return newFolder.id
+          }
+
+          for (const folder of metadata.folders) {
+            await createFolderRecursive(folder)
+          }
+        }

        for (const workflow of extractedWorkflows) {
          try {
@@ -84,9 +134,10 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
            if (workflow.folderPath.length > 0) {
              const folderPathKey = workflow.folderPath.join('/')

-              if (!folderMap.has(folderPathKey)) {
-                let parentId: string | null = null
-
+              if (folderMap.has(folderPathKey)) {
+                targetFolderId = folderMap.get(folderPathKey)!
+              } else {
+                let parentId: string | undefined
                for (let i = 0; i < workflow.folderPath.length; i++) {
                  const pathSegment = workflow.folderPath.slice(0, i + 1).join('/')

@@ -94,7 +145,7 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
                    const subFolder = await createFolderMutation.mutateAsync({
                      name: workflow.folderPath[i],
                      workspaceId: newWorkspace.id,
-                      parentId: parentId || undefined,
+                      parentId,
                    })
                    folderMap.set(pathSegment, subFolder.id)
                    parentId = subFolder.id
@@ -102,9 +153,8 @@ export function useImportWorkspace({ onSuccess }: UseImportWorkspaceProps = {})
                    parentId = folderMap.get(pathSegment)!
                  }
                }
+                targetFolderId = folderMap.get(folderPathKey) || null
              }
-
-              targetFolderId = folderMap.get(folderPathKey) || null
            }

            const workflowName = extractWorkflowName(workflow.content, workflow.name)
--- a/apps/sim/background/webhook-execution.ts
+++ b/apps/sim/background/webhook-execution.ts
@@ -172,7 +172,7 @@ async function executeWebhookJobInternal(
    const workflowVariables = (wfRows[0]?.variables as Record<string, any>) || {}

    // Merge subblock states (matching workflow-execution pattern)
-    const mergedStates = mergeSubblockState(blocks)
+    const mergedStates = mergeSubblockState(blocks, {})

    // Create serialized workflow
    const serializer = new Serializer()
--- a/apps/sim/hooks/queries/folders.ts
+++ b/apps/sim/hooks/queries/folders.ts
@@ -68,6 +68,7 @@ interface CreateFolderVariables {
  name: string
  parentId?: string
  color?: string
+  sortOrder?: number
 }

 interface UpdateFolderVariables {
@@ -160,18 +161,20 @@ export function useCreateFolder() {
      parentId: variables.parentId || null,
      color: variables.color || '#808080',
      isExpanded: false,
-      sortOrder: getNextSortOrder(previousFolders, variables.workspaceId, variables.parentId),
+      sortOrder:
+        variables.sortOrder ??
+        getNextSortOrder(previousFolders, variables.workspaceId, variables.parentId),
      createdAt: new Date(),
      updatedAt: new Date(),
    })
  )

  return useMutation({
-    mutationFn: async ({ workspaceId, ...payload }: CreateFolderVariables) => {
+    mutationFn: async ({ workspaceId, sortOrder, ...payload }: CreateFolderVariables) => {
      const response = await fetch('/api/folders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ...payload, workspaceId }),
+        body: JSON.stringify({ ...payload, workspaceId, sortOrder }),
      })

      if (!response.ok) {
@@ -285,9 +288,66 @@ export function useDuplicateFolderMutation() {
    },
    ...handlers,
    onSettled: (_data, _error, variables) => {
-      // Invalidate both folders and workflows (duplicated folder may contain workflows)
      queryClient.invalidateQueries({ queryKey: folderKeys.list(variables.workspaceId) })
      queryClient.invalidateQueries({ queryKey: workflowKeys.list(variables.workspaceId) })
    },
  })
 }
+
+interface ReorderFoldersVariables {
+  workspaceId: string
+  updates: Array<{
+    id: string
+    sortOrder: number
+    parentId?: string | null
+  }>
+}
+
+export function useReorderFolders() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (variables: ReorderFoldersVariables): Promise<void> => {
+      const response = await fetch('/api/folders/reorder', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(variables),
+      })
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}))
+        throw new Error(error.error || 'Failed to reorder folders')
+      }
+    },
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({ queryKey: folderKeys.list(variables.workspaceId) })
+
+      const snapshot = { ...useFolderStore.getState().folders }
+
+      useFolderStore.setState((state) => {
+        const updated = { ...state.folders }
+        for (const update of variables.updates) {
+          if (updated[update.id]) {
+            updated[update.id] = {
+              ...updated[update.id],
+              sortOrder: update.sortOrder,
+              parentId:
+                update.parentId !== undefined ? update.parentId : updated[update.id].parentId,
+            }
+          }
+        }
+        return { folders: updated }
+      })
+
+      return { snapshot }
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.snapshot) {
+        useFolderStore.setState({ folders: context.snapshot })
+      }
+    },
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: folderKeys.list(variables.workspaceId) })
+    },
+  })
+}
--- a/apps/sim/hooks/queries/workflows.ts
+++ b/apps/sim/hooks/queries/workflows.ts
@@ -32,6 +32,7 @@ function mapWorkflow(workflow: any): WorkflowMetadata {
    color: workflow.color,
    workspaceId: workflow.workspaceId,
    folderId: workflow.folderId,
+    sortOrder: workflow.sortOrder ?? 0,
    createdAt: new Date(workflow.createdAt),
    lastModified: new Date(workflow.updatedAt || workflow.createdAt),
  }
@@ -91,6 +92,7 @@ interface CreateWorkflowVariables {
  description?: string
  color?: string
  folderId?: string | null
+  sortOrder?: number
 }

 interface CreateWorkflowResult {
@@ -100,6 +102,7 @@ interface CreateWorkflowResult {
  color: string
  workspaceId: string
  folderId?: string | null
+  sortOrder: number
 }

 interface DuplicateWorkflowVariables {
@@ -118,6 +121,7 @@ interface DuplicateWorkflowResult {
  color: string
  workspaceId: string
  folderId?: string | null
+  sortOrder: number
  blocksCount: number
  edgesCount: number
  subflowsCount: number
@@ -161,6 +165,7 @@ function createWorkflowMutationHandlers<TVariables extends { workspaceId: string
              color: data.color,
              workspaceId: data.workspaceId,
              folderId: data.folderId,
+              sortOrder: 'sortOrder' in data ? data.sortOrder : 0,
            },
          },
          error: null,
@@ -179,21 +184,36 @@ export function useCreateWorkflow() {
  const handlers = createWorkflowMutationHandlers<CreateWorkflowVariables>(
    queryClient,
    'CreateWorkflow',
-    (variables, tempId) => ({
-      id: tempId,
-      name: variables.name || generateCreativeWorkflowName(),
-      lastModified: new Date(),
-      createdAt: new Date(),
-      description: variables.description || 'New workflow',
-      color: variables.color || getNextWorkflowColor(),
-      workspaceId: variables.workspaceId,
-      folderId: variables.folderId || null,
-    })
+    (variables, tempId) => {
+      let sortOrder: number
+      if (variables.sortOrder !== undefined) {
+        sortOrder = variables.sortOrder
+      } else {
+        const currentWorkflows = useWorkflowRegistry.getState().workflows
+        const targetFolderId = variables.folderId || null
+        const workflowsInFolder = Object.values(currentWorkflows).filter(
+          (w) => w.folderId === targetFolderId
+        )
+        sortOrder = workflowsInFolder.reduce((max, w) => Math.max(max, w.sortOrder ?? 0), -1) + 1
+      }
+
+      return {
+        id: tempId,
+        name: variables.name || generateCreativeWorkflowName(),
+        lastModified: new Date(),
+        createdAt: new Date(),
+        description: variables.description || 'New workflow',
+        color: variables.color || getNextWorkflowColor(),
+        workspaceId: variables.workspaceId,
+        folderId: variables.folderId || null,
+        sortOrder,
+      }
+    }
  )

  return useMutation({
    mutationFn: async (variables: CreateWorkflowVariables): Promise<CreateWorkflowResult> => {
-      const { workspaceId, name, description, color, folderId } = variables
+      const { workspaceId, name, description, color, folderId, sortOrder } = variables

      logger.info(`Creating new workflow in workspace: ${workspaceId}`)

@@ -206,6 +226,7 @@ export function useCreateWorkflow() {
          color: color || getNextWorkflowColor(),
          workspaceId,
          folderId: folderId || null,
+          sortOrder,
        }),
      })

@@ -243,13 +264,13 @@ export function useCreateWorkflow() {
        color: createdWorkflow.color,
        workspaceId,
        folderId: createdWorkflow.folderId,
+        sortOrder: createdWorkflow.sortOrder ?? 0,
      }
    },
    ...handlers,
    onSuccess: (data, variables, context) => {
      handlers.onSuccess(data, variables, context)

-      // Initialize subblock values for new workflow
      const { subBlockValues } = buildDefaultWorkflowArtifacts()
      useSubBlockStore.setState((state) => ({
        workflowValues: {
@@ -267,16 +288,26 @@ export function useDuplicateWorkflowMutation() {
  const handlers = createWorkflowMutationHandlers<DuplicateWorkflowVariables>(
    queryClient,
    'DuplicateWorkflow',
-    (variables, tempId) => ({
-      id: tempId,
-      name: variables.name,
-      lastModified: new Date(),
-      createdAt: new Date(),
-      description: variables.description,
-      color: variables.color,
-      workspaceId: variables.workspaceId,
-      folderId: variables.folderId || null,
-    })
+    (variables, tempId) => {
+      const currentWorkflows = useWorkflowRegistry.getState().workflows
+      const targetFolderId = variables.folderId || null
+      const workflowsInFolder = Object.values(currentWorkflows).filter(
+        (w) => w.folderId === targetFolderId
+      )
+      const maxSortOrder = workflowsInFolder.reduce((max, w) => Math.max(max, w.sortOrder ?? 0), -1)
+
+      return {
+        id: tempId,
+        name: variables.name,
+        lastModified: new Date(),
+        createdAt: new Date(),
+        description: variables.description,
+        color: variables.color,
+        workspaceId: variables.workspaceId,
+        folderId: targetFolderId,
+        sortOrder: maxSortOrder + 1,
+      }
+    }
  )

  return useMutation({
@@ -317,6 +348,7 @@ export function useDuplicateWorkflowMutation() {
        color: duplicatedWorkflow.color || color,
        workspaceId,
        folderId: duplicatedWorkflow.folderId ?? folderId,
+        sortOrder: duplicatedWorkflow.sortOrder ?? 0,
        blocksCount: duplicatedWorkflow.blocksCount || 0,
        edgesCount: duplicatedWorkflow.edgesCount || 0,
        subflowsCount: duplicatedWorkflow.subflowsCount || 0,
@@ -398,3 +430,61 @@ export function useRevertToVersion() {
    },
  })
 }
+
+interface ReorderWorkflowsVariables {
+  workspaceId: string
+  updates: Array<{
+    id: string
+    sortOrder: number
+    folderId?: string | null
+  }>
+}
+
+export function useReorderWorkflows() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (variables: ReorderWorkflowsVariables): Promise<void> => {
+      const response = await fetch('/api/workflows/reorder', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(variables),
+      })
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}))
+        throw new Error(error.error || 'Failed to reorder workflows')
+      }
+    },
+    onMutate: async (variables) => {
+      await queryClient.cancelQueries({ queryKey: workflowKeys.list(variables.workspaceId) })
+
+      const snapshot = { ...useWorkflowRegistry.getState().workflows }
+
+      useWorkflowRegistry.setState((state) => {
+        const updated = { ...state.workflows }
+        for (const update of variables.updates) {
+          if (updated[update.id]) {
+            updated[update.id] = {
+              ...updated[update.id],
+              sortOrder: update.sortOrder,
+              folderId:
+                update.folderId !== undefined ? update.folderId : updated[update.id].folderId,
+            }
+          }
+        }
+        return { workflows: updated }
+      })
+
+      return { snapshot }
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.snapshot) {
+        useWorkflowRegistry.setState({ workflows: context.snapshot })
+      }
+    },
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: workflowKeys.list(variables.workspaceId) })
+    },
+  })
+}
--- a/apps/sim/lib/workflows/operations/import-export.ts
+++ b/apps/sim/lib/workflows/operations/import-export.ts
@@ -16,6 +16,7 @@ export interface WorkflowExportData {
    description?: string
    color?: string
    folderId?: string | null
+    sortOrder?: number
  }
  state: WorkflowState
  variables?: Record<string, Variable>
@@ -25,6 +26,7 @@ export interface FolderExportData {
  id: string
  name: string
  parentId: string | null
+  sortOrder?: number
 }

 export interface WorkspaceExportStructure {
@@ -186,7 +188,12 @@ export async function exportWorkspaceToZip(
      name: workspaceName,
      exportedAt: new Date().toISOString(),
    },
-    folders: folders.map((f) => ({ id: f.id, name: f.name, parentId: f.parentId })),
+    folders: folders.map((f) => ({
+      id: f.id,
+      name: f.name,
+      parentId: f.parentId,
+      sortOrder: f.sortOrder,
+    })),
  }

  zip.file('_workspace.json', JSON.stringify(metadata, null, 2))
@@ -199,6 +206,7 @@ export async function exportWorkspaceToZip(
          name: workflow.workflow.name,
          description: workflow.workflow.description,
          color: workflow.workflow.color,
+          sortOrder: workflow.workflow.sortOrder,
          exportedAt: new Date().toISOString(),
        },
        variables: workflow.variables,
@@ -279,11 +287,18 @@ export interface ImportedWorkflow {
  content: string
  name: string
  folderPath: string[]
+  sortOrder?: number
 }

 export interface WorkspaceImportMetadata {
  workspaceName: string
  exportedAt?: string
+  folders?: Array<{
+    id: string
+    name: string
+    parentId: string | null
+    sortOrder?: number
+  }>
 }

 export async function extractWorkflowsFromZip(
@@ -303,6 +318,7 @@ export async function extractWorkflowsFromZip(
        metadata = {
          workspaceName: parsed.workspace?.name || 'Imported Workspace',
          exportedAt: parsed.workspace?.exportedAt,
+          folders: parsed.folders,
        }
      } catch (error) {
        logger.error('Failed to parse workspace metadata:', error)
@@ -317,10 +333,19 @@ export async function extractWorkflowsFromZip(
      const pathParts = path.split('/').filter((p) => p.length > 0)
      const filename = pathParts.pop() || path

+      let sortOrder: number | undefined
+      try {
+        const parsed = JSON.parse(content)
+        sortOrder = parsed.state?.metadata?.sortOrder ?? parsed.metadata?.sortOrder
+      } catch {
+        // ignore parse errors for sortOrder extraction
+      }
+
      workflows.push({
        content,
        name: filename,
        folderPath: pathParts,
+        sortOrder,
      })
    } catch (error) {
      logger.error(`Failed to extract ${path}:`, error)
@@ -338,10 +363,20 @@ export async function extractWorkflowsFromFiles(files: File[]): Promise<Imported

    try {
      const content = await file.text()
+
+      let sortOrder: number | undefined
+      try {
+        const parsed = JSON.parse(content)
+        sortOrder = parsed.state?.metadata?.sortOrder ?? parsed.metadata?.sortOrder
+      } catch {
+        // ignore parse errors for sortOrder extraction
+      }
+
      workflows.push({
        content,
        name: file.name,
        folderPath: [],
+        sortOrder,
      })
    } catch (error) {
      logger.error(`Failed to read ${file.name}:`, error)
--- a/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
+++ b/apps/sim/lib/workflows/sanitization/json-sanitizer.ts
@@ -53,6 +53,8 @@ export interface ExportWorkflowState {
    metadata?: {
      name?: string
      description?: string
+      color?: string
+      sortOrder?: number
      exportedAt?: string
    }
    variables?: Array<{
--- a/apps/sim/lib/workflows/subblocks.ts
+++ b/apps/sim/lib/workflows/subblocks.ts
@@ -1,80 +0,0 @@
-import type { BlockState, SubBlockState } from '@/stores/workflows/workflow/types'
-
-export const DEFAULT_SUBBLOCK_TYPE = 'short-input'
-
-/**
- * Merges subblock values into the provided subblock structures.
- * Falls back to a default subblock shape when a value has no structure.
- * @param subBlocks - Existing subblock definitions from the workflow
- * @param values - Stored subblock values keyed by subblock id
- * @returns Merged subblock structures with updated values
- */
-export function mergeSubBlockValues(
-  subBlocks: Record<string, unknown> | undefined,
-  values: Record<string, unknown> | undefined
-): Record<string, unknown> {
-  const merged = { ...(subBlocks || {}) } as Record<string, any>
-
-  if (!values) return merged
-
-  Object.entries(values).forEach(([subBlockId, value]) => {
-    if (merged[subBlockId] && typeof merged[subBlockId] === 'object') {
-      merged[subBlockId] = {
-        ...(merged[subBlockId] as Record<string, unknown>),
-        value,
-      }
-      return
-    }
-
-    merged[subBlockId] = {
-      id: subBlockId,
-      type: DEFAULT_SUBBLOCK_TYPE,
-      value,
-    }
-  })
-
-  return merged
-}
-
-/**
- * Merges workflow block states with explicit subblock values while maintaining block structure.
- * Values that are null or undefined do not override existing subblock values.
- * @param blocks - Block configurations from workflow state
- * @param subBlockValues - Subblock values keyed by blockId -> subBlockId -> value
- * @param blockId - Optional specific block ID to merge (merges all if not provided)
- * @returns Merged block states with updated subblocks
- */
-export function mergeSubblockStateWithValues(
-  blocks: Record<string, BlockState>,
-  subBlockValues: Record<string, Record<string, unknown>> = {},
-  blockId?: string
-): Record<string, BlockState> {
-  const blocksToProcess = blockId ? { [blockId]: blocks[blockId] } : blocks
-
-  return Object.entries(blocksToProcess).reduce(
-    (acc, [id, block]) => {
-      if (!block) {
-        return acc
-      }
-
-      const blockSubBlocks = block.subBlocks || {}
-      const blockValues = subBlockValues[id] || {}
-      const filteredValues = Object.fromEntries(
-        Object.entries(blockValues).filter(([, value]) => value !== null && value !== undefined)
-      )
-
-      const mergedSubBlocks = mergeSubBlockValues(blockSubBlocks, filteredValues) as Record<
-        string,
-        SubBlockState
-      >
-
-      acc[id] = {
-        ...block,
-        subBlocks: mergedSubBlocks,
-      }
-
-      return acc
-    },
-    {} as Record<string, BlockState>
-  )
-}
--- a/apps/sim/socket/database/operations.ts
+++ b/apps/sim/socket/database/operations.ts
@@ -7,7 +7,6 @@ import postgres from 'postgres'
 import { env } from '@/lib/core/config/env'
 import { cleanupExternalWebhook } from '@/lib/webhooks/provider-subscriptions'
 import { loadWorkflowFromNormalizedTables } from '@/lib/workflows/persistence/utils'
-import { mergeSubBlockValues } from '@/lib/workflows/subblocks'
 import {
  BLOCK_OPERATIONS,
  BLOCKS_OPERATIONS,
@@ -456,7 +455,7 @@ async function handleBlocksOperationTx(
    }

    case BLOCKS_OPERATIONS.BATCH_ADD_BLOCKS: {
-      const { blocks, edges, loops, parallels, subBlockValues } = payload
+      const { blocks, edges, loops, parallels } = payload

      logger.info(`Batch adding blocks to workflow ${workflowId}`, {
        blockCount: blocks?.length || 0,
@@ -466,30 +465,22 @@ async function handleBlocksOperationTx(
      })

      if (blocks && blocks.length > 0) {
-        const blockValues = blocks.map((block: Record<string, unknown>) => {
-          const blockId = block.id as string
-          const mergedSubBlocks = mergeSubBlockValues(
-            block.subBlocks as Record<string, unknown>,
-            subBlockValues?.[blockId]
-          )
-
-          return {
-            id: blockId,
-            workflowId,
-            type: block.type as string,
-            name: block.name as string,
-            positionX: (block.position as { x: number; y: number }).x,
-            positionY: (block.position as { x: number; y: number }).y,
-            data: (block.data as Record<string, unknown>) || {},
-            subBlocks: mergedSubBlocks,
-            outputs: (block.outputs as Record<string, unknown>) || {},
-            enabled: (block.enabled as boolean) ?? true,
-            horizontalHandles: (block.horizontalHandles as boolean) ?? true,
-            advancedMode: (block.advancedMode as boolean) ?? false,
-            triggerMode: (block.triggerMode as boolean) ?? false,
-            height: (block.height as number) || 0,
-          }
-        })
+        const blockValues = blocks.map((block: Record<string, unknown>) => ({
+          id: block.id as string,
+          workflowId,
+          type: block.type as string,
+          name: block.name as string,
+          positionX: (block.position as { x: number; y: number }).x,
+          positionY: (block.position as { x: number; y: number }).y,
+          data: (block.data as Record<string, unknown>) || {},
+          subBlocks: (block.subBlocks as Record<string, unknown>) || {},
+          outputs: (block.outputs as Record<string, unknown>) || {},
+          enabled: (block.enabled as boolean) ?? true,
+          horizontalHandles: (block.horizontalHandles as boolean) ?? true,
+          advancedMode: (block.advancedMode as boolean) ?? false,
+          triggerMode: (block.triggerMode as boolean) ?? false,
+          height: (block.height as number) || 0,
+        }))

        await tx.insert(workflowBlocks).values(blockValues)

--- a/apps/sim/stores/workflows/registry/store.ts
+++ b/apps/sim/stores/workflows/registry/store.ts
@@ -476,7 +476,6 @@ export const useWorkflowRegistry = create<WorkflowRegistry>()(
        // Use the server-generated ID
        const id = duplicatedWorkflow.id

-        // Generate new workflow metadata using the server-generated ID
        const newWorkflow: WorkflowMetadata = {
          id,
          name: `${sourceWorkflow.name} (Copy)`,
@@ -484,8 +483,9 @@ export const useWorkflowRegistry = create<WorkflowRegistry>()(
          createdAt: new Date(),
          description: sourceWorkflow.description,
          color: getNextWorkflowColor(),
-          workspaceId, // Include the workspaceId in the new workflow
-          folderId: sourceWorkflow.folderId, // Include the folderId from source workflow
+          workspaceId,
+          folderId: sourceWorkflow.folderId,
+          sortOrder: duplicatedWorkflow.sortOrder ?? 0,
        }

        // Get the current workflow state to copy from
--- a/apps/sim/stores/workflows/registry/types.ts
+++ b/apps/sim/stores/workflows/registry/types.ts
@@ -26,6 +26,7 @@ export interface WorkflowMetadata {
  color: string
  workspaceId?: string
  folderId?: string | null
+  sortOrder: number
 }

 export type HydrationPhase =
--- a/apps/sim/stores/workflows/server-utils.ts
+++ b/apps/sim/stores/workflows/server-utils.ts
@@ -8,8 +8,7 @@
 * or React hooks, making it safe for use in Next.js API routes.
 */

-import { mergeSubblockStateWithValues } from '@/lib/workflows/subblocks'
-import type { BlockState } from '@/stores/workflows/workflow/types'
+import type { BlockState, SubBlockState } from '@/stores/workflows/workflow/types'

 /**
 * Server-safe version of mergeSubblockState for API routes
@@ -27,7 +26,72 @@ export function mergeSubblockState(
  subBlockValues: Record<string, Record<string, any>> = {},
  blockId?: string
 ): Record<string, BlockState> {
-  return mergeSubblockStateWithValues(blocks, subBlockValues, blockId)
+  const blocksToProcess = blockId ? { [blockId]: blocks[blockId] } : blocks
+
+  return Object.entries(blocksToProcess).reduce(
+    (acc, [id, block]) => {
+      // Skip if block is undefined
+      if (!block) {
+        return acc
+      }
+
+      // Initialize subBlocks if not present
+      const blockSubBlocks = block.subBlocks || {}
+
+      // Get stored values for this block
+      const blockValues = subBlockValues[id] || {}
+
+      // Create a deep copy of the block's subBlocks to maintain structure
+      const mergedSubBlocks = Object.entries(blockSubBlocks).reduce(
+        (subAcc, [subBlockId, subBlock]) => {
+          // Skip if subBlock is undefined
+          if (!subBlock) {
+            return subAcc
+          }
+
+          // Get the stored value for this subblock
+          const storedValue = blockValues[subBlockId]
+
+          // Create a new subblock object with the same structure but updated value
+          subAcc[subBlockId] = {
+            ...subBlock,
+            value: storedValue !== undefined && storedValue !== null ? storedValue : subBlock.value,
+          }
+
+          return subAcc
+        },
+        {} as Record<string, SubBlockState>
+      )
+
+      // Return the full block state with updated subBlocks
+      acc[id] = {
+        ...block,
+        subBlocks: mergedSubBlocks,
+      }
+
+      // Add any values that exist in the provided values but aren't in the block structure
+      // This handles cases where block config has been updated but values still exist
+      Object.entries(blockValues).forEach(([subBlockId, value]) => {
+        if (!mergedSubBlocks[subBlockId] && value !== null && value !== undefined) {
+          // Create a minimal subblock structure
+          mergedSubBlocks[subBlockId] = {
+            id: subBlockId,
+            type: 'short-input', // Default type that's safe to use
+            value: value,
+          }
+        }
+      })
+
+      // Update the block with the final merged subBlocks (including orphaned values)
+      acc[id] = {
+        ...block,
+        subBlocks: mergedSubBlocks,
+      }
+
+      return acc
+    },
+    {} as Record<string, BlockState>
+  )
 }

 /**
--- a/apps/sim/stores/workflows/utils.ts
+++ b/apps/sim/stores/workflows/utils.ts
@@ -1,7 +1,20 @@
 import type { Edge } from 'reactflow'
 import { v4 as uuidv4 } from 'uuid'
+
+export function filterNewEdges(edgesToAdd: Edge[], currentEdges: Edge[]): Edge[] {
+  return edgesToAdd.filter((edge) => {
+    if (edge.source === edge.target) return false
+    return !currentEdges.some(
+      (e) =>
+        e.source === edge.source &&
+        e.sourceHandle === edge.sourceHandle &&
+        e.target === edge.target &&
+        e.targetHandle === edge.targetHandle
+    )
+  })
+}
+
 import { getBlockOutputs } from '@/lib/workflows/blocks/block-outputs'
-import { mergeSubBlockValues, mergeSubblockStateWithValues } from '@/lib/workflows/subblocks'
 import { getBlock } from '@/blocks'
 import { normalizeName } from '@/executor/constants'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
@@ -19,19 +32,6 @@ const WEBHOOK_SUBBLOCK_FIELDS = ['webhookId', 'triggerPath']

 export { normalizeName }

-export function filterNewEdges(edgesToAdd: Edge[], currentEdges: Edge[]): Edge[] {
-  return edgesToAdd.filter((edge) => {
-    if (edge.source === edge.target) return false
-    return !currentEdges.some(
-      (e) =>
-        e.source === edge.source &&
-        e.sourceHandle === edge.sourceHandle &&
-        e.target === edge.target &&
-        e.targetHandle === edge.targetHandle
-    )
-  })
-}
-
 export interface RegeneratedState {
  blocks: Record<string, BlockState>
  edges: Edge[]
@@ -201,20 +201,27 @@ export function prepareDuplicateBlockState(options: PrepareDuplicateBlockStateOp
    Object.entries(subBlockValues).filter(([key]) => !WEBHOOK_SUBBLOCK_FIELDS.includes(key))
  )

-  const baseSubBlocks: Record<string, SubBlockState> = sourceBlock.subBlocks
+  const mergedSubBlocks: Record<string, SubBlockState> = sourceBlock.subBlocks
    ? JSON.parse(JSON.stringify(sourceBlock.subBlocks))
    : {}

  WEBHOOK_SUBBLOCK_FIELDS.forEach((field) => {
-    if (field in baseSubBlocks) {
-      delete baseSubBlocks[field]
+    if (field in mergedSubBlocks) {
+      delete mergedSubBlocks[field]
    }
  })

-  const mergedSubBlocks = mergeSubBlockValues(baseSubBlocks, filteredSubBlockValues) as Record<
-    string,
-    SubBlockState
-  >
+  Object.entries(filteredSubBlockValues).forEach(([subblockId, value]) => {
+    if (mergedSubBlocks[subblockId]) {
+      mergedSubBlocks[subblockId].value = value as SubBlockState['value']
+    } else {
+      mergedSubBlocks[subblockId] = {
+        id: subblockId,
+        type: 'short-input',
+        value: value as SubBlockState['value'],
+      }
+    }
+  })

  const block: BlockState = {
    id: newId,
@@ -249,16 +256,11 @@ export function mergeSubblockState(
  workflowId?: string,
  blockId?: string
 ): Record<string, BlockState> {
+  const blocksToProcess = blockId ? { [blockId]: blocks[blockId] } : blocks
  const subBlockStore = useSubBlockStore.getState()

  const workflowSubblockValues = workflowId ? subBlockStore.workflowValues[workflowId] || {} : {}

-  if (workflowId) {
-    return mergeSubblockStateWithValues(blocks, workflowSubblockValues, blockId)
-  }
-
-  const blocksToProcess = blockId ? { [blockId]: blocks[blockId] } : blocks
-
  return Object.entries(blocksToProcess).reduce(
    (acc, [id, block]) => {
      if (!block) {
@@ -337,14 +339,8 @@ export async function mergeSubblockStateAsync(
  workflowId?: string,
  blockId?: string
 ): Promise<Record<string, BlockState>> {
-  const subBlockStore = useSubBlockStore.getState()
-
-  if (workflowId) {
-    const workflowValues = subBlockStore.workflowValues[workflowId] || {}
-    return mergeSubblockStateWithValues(blocks, workflowValues, blockId)
-  }
-
  const blocksToProcess = blockId ? { [blockId]: blocks[blockId] } : blocks
+  const subBlockStore = useSubBlockStore.getState()

  // Process blocks in parallel for better performance
  const processedBlockEntries = await Promise.all(
@@ -362,7 +358,16 @@ export async function mergeSubblockStateAsync(
            return null
          }

-          const storedValue = subBlockStore.getValue(id, subBlockId)
+          let storedValue = null
+
+          if (workflowId) {
+            const workflowValues = subBlockStore.workflowValues[workflowId]
+            if (workflowValues?.[id]) {
+              storedValue = workflowValues[id][subBlockId]
+            }
+          } else {
+            storedValue = subBlockStore.getValue(id, subBlockId)
+          }

          return [
            subBlockId,
@@ -381,6 +386,23 @@ export async function mergeSubblockStateAsync(
        subBlockEntries.filter((entry): entry is readonly [string, SubBlockState] => entry !== null)
      ) as Record<string, SubBlockState>

+      // Add any values that exist in the store but aren't in the block structure
+      // This handles cases where block config has been updated but values still exist
+      // IMPORTANT: This includes runtime subblock IDs like webhookId, triggerPath, etc.
+      if (workflowId) {
+        const workflowValues = subBlockStore.workflowValues[workflowId]
+        const blockValues = workflowValues?.[id] || {}
+        Object.entries(blockValues).forEach(([subBlockId, value]) => {
+          if (!mergedSubBlocks[subBlockId] && value !== null && value !== undefined) {
+            mergedSubBlocks[subBlockId] = {
+              id: subBlockId,
+              type: 'short-input',
+              value: value as SubBlockState['value'],
+            }
+          }
+        })
+      }
+
      // Return the full block state with updated subBlocks (including orphaned values)
      return [
        id,
--- a/apps/sim/stores/workflows/workflow/store.ts
+++ b/apps/sim/stores/workflows/workflow/store.ts
@@ -639,8 +639,7 @@ export const useWorkflowStore = create<WorkflowStore>()(

        const newName = getUniqueBlockName(block.name, get().blocks)

-        const activeWorkflowId = useWorkflowRegistry.getState().activeWorkflowId
-        const mergedBlock = mergeSubblockState(get().blocks, activeWorkflowId || undefined, id)[id]
+        const mergedBlock = mergeSubblockState(get().blocks, id)[id]

        const newSubBlocks = Object.entries(mergedBlock.subBlocks).reduce(
          (acc, [subId, subBlock]) => ({
@@ -669,6 +668,7 @@ export const useWorkflowStore = create<WorkflowStore>()(
          parallels: get().generateParallelBlocks(),
        }

+        const activeWorkflowId = useWorkflowRegistry.getState().activeWorkflowId
        if (activeWorkflowId) {
          const subBlockValues =
            useSubBlockStore.getState().workflowValues[activeWorkflowId]?.[id] || {}
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
  "lockfileVersion": 1,
-  "configVersion": 0,
  "workspaces": {
    "": {
      "name": "simstudio",
--- a/packages/db/migrations/0141_daffy_marten_broadcloak.sql
+++ b/packages/db/migrations/0141_daffy_marten_broadcloak.sql
@@ -0,0 +1,2 @@
+ALTER TABLE "workflow" ADD COLUMN "sort_order" integer DEFAULT 0 NOT NULL;--> statement-breakpoint
+CREATE INDEX "workflow_folder_sort_idx" ON "workflow" USING btree ("folder_id","sort_order");
--- a/packages/db/migrations/meta/0141_snapshot.json
+++ b/packages/db/migrations/meta/0141_snapshot.json
--- a/packages/db/migrations/meta/_journal.json
+++ b/packages/db/migrations/meta/_journal.json
@@ -981,6 +981,13 @@
      "when": 1768366574848,
      "tag": "0140_fuzzy_the_twelve",
      "breakpoints": true
+    },
+    {
+      "idx": 141,
+      "version": "7",
+      "when": 1768421319400,
+      "tag": "0141_daffy_marten_broadcloak",
+      "breakpoints": true
    }
  ]
 }
--- a/packages/db/schema.ts
+++ b/packages/db/schema.ts
@@ -149,6 +149,7 @@ export const workflow = pgTable(
      .references(() => user.id, { onDelete: 'cascade' }),
    workspaceId: text('workspace_id').references(() => workspace.id, { onDelete: 'cascade' }),
    folderId: text('folder_id').references(() => workflowFolder.id, { onDelete: 'set null' }),
+    sortOrder: integer('sort_order').notNull().default(0),
    name: text('name').notNull(),
    description: text('description'),
    color: text('color').notNull().default('#3972F6'),
@@ -165,6 +166,7 @@ export const workflow = pgTable(
    userIdIdx: index('workflow_user_id_idx').on(table.userId),
    workspaceIdIdx: index('workflow_workspace_id_idx').on(table.workspaceId),
    userWorkspaceIdx: index('workflow_user_workspace_idx').on(table.userId, table.workspaceId),
+    folderSortIdx: index('workflow_folder_sort_idx').on(table.folderId, table.sortOrder),
  })
 )
Author	SHA1	Message	Date
waleed	a2df89ee29	optimized	2026-01-14 14:00:19 -08:00
waleed	e350a9c611	cahnged color, removed flicker on folder container	2026-01-14 13:50:27 -08:00
waleed	df54029344	updated to use brand tertiary color, allow worfklows to be dropped above/below folders at the same level	2026-01-14 13:34:04 -08:00
Vikhyath Mondreti	2ffc55b92b	fix bun lock	2026-01-14 12:12:46 -08:00
Vikhyath Mondreti	4b145a89a9	add migration	2026-01-14 12:09:04 -08:00
Vikhyath Mondreti	7d4671674c	Merge remote-tracking branch 'origin/staging' into feat/reorder	2026-01-14 12:08:17 -08:00
Vikhyath Mondreti	78d6082235	fix edge cases	2026-01-14 12:06:01 -08:00
Vikhyath Mondreti	f0d22246a7	progress	2026-01-14 10:33:19 -08:00
Vikhyath Mondreti	7dc4919220	feat(reorder): allow workflow/folder reordering	2026-01-13 12:18:14 -08:00