diff --git a/apps/sim/app/w/[id]/components/loop-node/loop-node.tsx b/apps/sim/app/w/[id]/components/loop-node/loop-node.tsx
index ae0bb86741b..d657fac658b 100644
--- a/apps/sim/app/w/[id]/components/loop-node/loop-node.tsx
+++ b/apps/sim/app/w/[id]/components/loop-node/loop-node.tsx
@@ -94,7 +94,7 @@ export const LoopNodeComponent = memo(({ data, selected, id }: NodeProps) => {
   const getNestedStyles = () => {
     // Base styles
     const styles: Record<string, string> = {
-      backgroundColor: 'transparent',
+      backgroundColor: 'rgba(0, 0, 0, 0.02)',
     }
 
     // Apply nested styles
diff --git a/apps/sim/app/w/[id]/components/parallel-node/parallel-config.ts b/apps/sim/app/w/[id]/components/parallel-node/parallel-config.ts
index a1a79eb29bd..fe00c935bec 100644
--- a/apps/sim/app/w/[id]/components/parallel-node/parallel-config.ts
+++ b/apps/sim/app/w/[id]/components/parallel-node/parallel-config.ts
@@ -6,7 +6,7 @@ export const ParallelTool = {
   name: 'Parallel',
   description: 'Parallel Execution',
   icon: SplitIcon,
-  bgColor: '#8BC34A',
+  bgColor: '#FEE12B',
   data: {
     label: 'Parallel',
     parallelType: 'collection' as 'collection' | 'count',
diff --git a/apps/sim/app/w/[id]/components/parallel-node/parallel-node.tsx b/apps/sim/app/w/[id]/components/parallel-node/parallel-node.tsx
index d5b1cbd4e90..299a75acaed 100644
--- a/apps/sim/app/w/[id]/components/parallel-node/parallel-node.tsx
+++ b/apps/sim/app/w/[id]/components/parallel-node/parallel-node.tsx
@@ -111,7 +111,7 @@ export const ParallelNodeComponent = memo(({ data, selected, id }: NodeProps) =>
   const getNestedStyles = () => {
     // Base styles
     const styles: Record<string, string> = {
-      backgroundColor: 'transparent',
+      backgroundColor: 'rgba(0, 0, 0, 0.02)',
     }
 
     // Apply nested styles
diff --git a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx
index b04b805bcb3..b6078b4dee9 100644
--- a/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx
+++ b/apps/sim/app/w/[id]/components/workflow-block/components/sub-block/components/code.tsx
@@ -81,7 +81,8 @@ export function Code({
     (useSubBlockStore((state) => state.getValue(blockId, collapsedStateKey)) as boolean) ?? false
   const setCollapsedValue = useSubBlockStore((state) => state.setValue)
 
-  const showCollapseButton = subBlockId === 'responseFormat' && code.split('\n').length > 5
+  const showCollapseButton =
+    (subBlockId === 'responseFormat' || subBlockId === 'code') && code.split('\n').length > 5
 
   const editorRef = useRef<HTMLDivElement>(null)
 
diff --git a/apps/sim/app/w/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/w/knowledge/[id]/[documentId]/document.tsx
index 84888da21a0..6d663f464d9 100644
--- a/apps/sim/app/w/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/w/knowledge/[id]/[documentId]/document.tsx
@@ -1,7 +1,17 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { Circle, CircleOff, FileText, Plus, Search, Trash2, X } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  CircleOff,
+  FileText,
+  Plus,
+  Search,
+  Trash2,
+  X,
+} from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -59,11 +69,18 @@ export function Document({
   const [isLoadingDocument, setIsLoadingDocument] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  // Use the new chunks hook
+  // Use the updated chunks hook with pagination
   const {
     chunks,
     isLoading: isLoadingChunks,
     error: chunksError,
+    currentPage,
+    totalPages,
+    hasNextPage,
+    hasPrevPage,
+    goToPage,
+    nextPage,
+    prevPage,
     refreshChunks,
     updateChunk,
   } = useDocumentChunks(knowledgeBaseId, documentId)
@@ -71,6 +88,34 @@ export function Document({
   // Combine errors
   const combinedError = error || chunksError
 
+  // Handle pagination navigation
+  const handlePrevPage = useCallback(() => {
+    if (hasPrevPage && !isLoadingChunks) {
+      prevPage()?.catch((err) => {
+        logger.error('Previous page failed:', err)
+      })
+    }
+  }, [hasPrevPage, isLoadingChunks, prevPage])
+
+  const handleNextPage = useCallback(() => {
+    if (hasNextPage && !isLoadingChunks) {
+      nextPage()?.catch((err) => {
+        logger.error('Next page failed:', err)
+      })
+    }
+  }, [hasNextPage, isLoadingChunks, nextPage])
+
+  const handleGoToPage = useCallback(
+    (page: number) => {
+      if (page !== currentPage && !isLoadingChunks) {
+        goToPage(page)?.catch((err) => {
+          logger.error('Go to page failed:', err)
+        })
+      }
+    },
+    [currentPage, isLoadingChunks, goToPage]
+  )
+
   // Try to get document from store cache first, then fetch if needed
   useEffect(() => {
     const fetchDocument = async () => {
@@ -308,7 +353,7 @@ export function Document({
                   onClick={() => setIsCreateChunkModalOpen(true)}
                   disabled={document?.processingStatus === 'failed'}
                   size='sm'
-                  className='flex items-center gap-1 bg-[#701FFC] font-[480] text-primary-foreground shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)] disabled:cursor-not-allowed disabled:opacity-50'
+                  className='flex items-center gap-1 bg-[#701FFC] font-[480] text-white shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)] disabled:cursor-not-allowed disabled:opacity-50'
                 >
                   <Plus className='h-3.5 w-3.5' />
                   <span>Create Chunk</span>
@@ -566,6 +611,64 @@ export function Document({
                     </tbody>
                   </table>
                 </div>
+
+                {/* Pagination Controls */}
+                {document?.processingStatus === 'completed' && totalPages > 1 && (
+                  <div className='flex items-center justify-center border-t bg-background px-6 py-4'>
+                    <div className='flex items-center gap-1'>
+                      <Button
+                        variant='ghost'
+                        size='sm'
+                        onClick={handlePrevPage}
+                        disabled={!hasPrevPage || isLoadingChunks}
+                        className='h-8 w-8 p-0'
+                      >
+                        <ChevronLeft className='h-4 w-4' />
+                      </Button>
+
+                      {/* Page numbers - show a few around current page */}
+                      <div className='mx-4 flex items-center gap-6'>
+                        {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+                          let page: number
+                          if (totalPages <= 5) {
+                            page = i + 1
+                          } else if (currentPage <= 3) {
+                            page = i + 1
+                          } else if (currentPage >= totalPages - 2) {
+                            page = totalPages - 4 + i
+                          } else {
+                            page = currentPage - 2 + i
+                          }
+
+                          if (page < 1 || page > totalPages) return null
+
+                          return (
+                            <button
+                              key={page}
+                              onClick={() => handleGoToPage(page)}
+                              disabled={isLoadingChunks}
+                              className={`font-medium text-sm transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50 ${
+                                page === currentPage ? 'text-foreground' : 'text-muted-foreground'
+                              }`}
+                            >
+                              {page}
+                            </button>
+                          )
+                        })}
+                      </div>
+
+                      <Button
+                        variant='ghost'
+                        size='sm'
+                        onClick={handleNextPage}
+                        disabled={!hasNextPage || isLoadingChunks}
+                        className='h-8 w-8 p-0'
+                      >
+                        <ChevronRight className='h-4 w-4' />
+                      </Button>
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </div>
diff --git a/apps/sim/app/w/knowledge/[id]/base.tsx b/apps/sim/app/w/knowledge/[id]/base.tsx
index 5c0acac5c72..4eba4ca7fc8 100644
--- a/apps/sim/app/w/knowledge/[id]/base.tsx
+++ b/apps/sim/app/w/knowledge/[id]/base.tsx
@@ -569,7 +569,7 @@ export function KnowledgeBase({
                     onClick={handleAddDocuments}
                     disabled={isUploading}
                     size='sm'
-                    className='flex items-center gap-1 bg-[#701FFC] font-[480] text-primary-foreground shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
+                    className='flex items-center gap-1 bg-[#701FFC] font-[480] text-white shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
                   >
                     <Plus className='h-3.5 w-3.5' />
                     {isUploading ? 'Uploading...' : 'Add Documents'}
diff --git a/apps/sim/app/w/knowledge/knowledge.tsx b/apps/sim/app/w/knowledge/knowledge.tsx
index b9721ef749a..cc0cfc70cb2 100644
--- a/apps/sim/app/w/knowledge/knowledge.tsx
+++ b/apps/sim/app/w/knowledge/knowledge.tsx
@@ -92,7 +92,7 @@ export function Knowledge() {
                   <Button
                     onClick={() => setIsCreateModalOpen(true)}
                     size='sm'
-                    className='flex items-center gap-1 bg-[#701FFC] font-[480] text-primary-foreground shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
+                    className='flex items-center gap-1 bg-[#701FFC] font-[480] text-white shadow-[0_0_0_0_#701FFC] transition-all duration-200 hover:bg-[#6518E6] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
                   >
                     <Plus className='h-3.5 w-3.5' />
                     <span>Create</span>
diff --git a/apps/sim/hooks/use-knowledge.ts b/apps/sim/hooks/use-knowledge.ts
index 53dbe56926d..f7c2f0a1d05 100644
--- a/apps/sim/hooks/use-knowledge.ts
+++ b/apps/sim/hooks/use-knowledge.ts
@@ -228,11 +228,18 @@ export function useDocumentChunks(knowledgeBaseId: string, documentId: string) {
     offset: 0,
     hasMore: false,
   })
+  const [currentPage, setCurrentPage] = useState(1)
+  const [searchQuery, setSearchQuery] = useState<string>('')
   const [initialLoadDone, setInitialLoadDone] = useState(false)
 
   const isStoreLoading = isChunksLoading(documentId)
   const combinedIsLoading = isLoading || isStoreLoading
 
+  // Computed pagination properties
+  const totalPages = Math.ceil(pagination.total / pagination.limit)
+  const hasNextPage = currentPage < totalPages
+  const hasPrevPage = currentPage > 1
+
   // Single effect to handle all data loading and syncing
   useEffect(() => {
     if (!knowledgeBaseId || !documentId) return
@@ -243,7 +250,11 @@ export function useDocumentChunks(knowledgeBaseId: string, documentId: string) {
       try {
         // Check cache first
         const cached = getCachedChunks(documentId)
-        if (cached) {
+        if (
+          cached &&
+          cached.searchQuery === searchQuery &&
+          cached.pagination.offset === (currentPage - 1) * pagination.limit
+        ) {
           if (isMounted) {
             setChunks(cached.chunks)
             setPagination(cached.pagination)
@@ -258,9 +269,12 @@ export function useDocumentChunks(knowledgeBaseId: string, documentId: string) {
           setIsLoading(true)
           setError(null)
 
+          const offset = (currentPage - 1) * pagination.limit
+
           const fetchedChunks = await getChunks(knowledgeBaseId, documentId, {
-            limit: 50, // Use fixed initial values to avoid dependency issues
-            offset: 0,
+            limit: pagination.limit,
+            offset,
+            search: searchQuery || undefined,
           })
 
           if (isMounted) {
@@ -291,14 +305,26 @@ export function useDocumentChunks(knowledgeBaseId: string, documentId: string) {
     return () => {
       isMounted = false
     }
-  }, [knowledgeBaseId, documentId, isStoreLoading, initialLoadDone]) // Removed getCachedChunks and getChunks from dependencies
+  }, [
+    knowledgeBaseId,
+    documentId,
+    currentPage,
+    searchQuery,
+    isStoreLoading,
+    initialLoadDone,
+    pagination.limit,
+  ])
 
   // Separate effect to sync with store state changes (no API calls)
   useEffect(() => {
     if (!documentId || !initialLoadDone) return
 
     const cached = getCachedChunks(documentId)
-    if (cached) {
+    if (
+      cached &&
+      cached.searchQuery === searchQuery &&
+      cached.pagination.offset === (currentPage - 1) * pagination.limit
+    ) {
       setChunks(cached.chunks)
       setPagination(cached.pagination)
     }
@@ -307,7 +333,59 @@ export function useDocumentChunks(knowledgeBaseId: string, documentId: string) {
     if (!isStoreLoading && isLoading) {
       setIsLoading(false)
     }
-  }, [documentId, isStoreLoading, isLoading, initialLoadDone]) // Removed getCachedChunks from dependencies
+  }, [
+    documentId,
+    isStoreLoading,
+    isLoading,
+    initialLoadDone,
+    searchQuery,
+    currentPage,
+    pagination.limit,
+  ])
+
+  const goToPage = async (page: number) => {
+    if (page < 1 || page > totalPages || page === currentPage) return
+
+    try {
+      setIsLoading(true)
+      setError(null)
+      setCurrentPage(page)
+
+      const offset = (page - 1) * pagination.limit
+
+      const fetchedChunks = await getChunks(knowledgeBaseId, documentId, {
+        limit: pagination.limit,
+        offset,
+        search: searchQuery || undefined,
+      })
+
+      // Update local state from cache
+      const cached = getCachedChunks(documentId)
+      if (cached) {
+        setChunks(cached.chunks)
+        setPagination(cached.pagination)
+      }
+
+      return fetchedChunks
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load page')
+      throw err
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const nextPage = () => {
+    if (hasNextPage) {
+      return goToPage(currentPage + 1)
+    }
+  }
+
+  const prevPage = () => {
+    if (hasPrevPage) {
+      return goToPage(currentPage - 1)
+    }
+  }
 
   const refreshChunksData = async (options?: {
     search?: string
@@ -318,10 +396,21 @@ export function useDocumentChunks(knowledgeBaseId: string, documentId: string) {
       setIsLoading(true)
       setError(null)
 
-      const fetchedChunks = await refreshChunks(knowledgeBaseId, documentId, options)
+      // Update search query if provided and reset to page 1
+      if (options?.search !== undefined) {
+        setSearchQuery(options.search)
+        setCurrentPage(1)
+      }
+
+      const offset = options?.offset ?? (currentPage - 1) * pagination.limit
+
+      const fetchedChunks = await refreshChunks(knowledgeBaseId, documentId, {
+        ...options,
+        offset,
+      })
 
       // Update local state from cache
-      const cached = getCachedChunks(documentId, { search: options?.search })
+      const cached = getCachedChunks(documentId)
       if (cached) {
         setChunks(cached.chunks)
         setPagination(cached.pagination)
@@ -336,19 +425,21 @@ export function useDocumentChunks(knowledgeBaseId: string, documentId: string) {
     }
   }
 
-  const searchChunks = async (searchQuery: string) => {
+  const searchChunks = async (newSearchQuery: string) => {
     try {
       setIsLoading(true)
       setError(null)
+      setSearchQuery(newSearchQuery)
+      setCurrentPage(1) // Reset to first page for new search
 
       const searchResults = await getChunks(knowledgeBaseId, documentId, {
-        search: searchQuery,
+        search: newSearchQuery,
         limit: pagination.limit,
         offset: 0, // Reset to first page for new search
       })
 
       // Update local state from cache
-      const cached = getCachedChunks(documentId, { search: searchQuery })
+      const cached = getCachedChunks(documentId)
       if (cached) {
         setChunks(cached.chunks)
         setPagination(cached.pagination)
@@ -368,6 +459,13 @@ export function useDocumentChunks(knowledgeBaseId: string, documentId: string) {
     isLoading: combinedIsLoading,
     error,
     pagination,
+    currentPage,
+    totalPages,
+    hasNextPage,
+    hasPrevPage,
+    goToPage,
+    nextPage,
+    prevPage,
     refreshChunks: refreshChunksData,
     searchChunks,
     updateChunk: (chunkId: string, updates: Partial<ChunkData>) => {
diff --git a/apps/sim/stores/knowledge/store.ts b/apps/sim/stores/knowledge/store.ts
index e3db4e62b83..0f6b0fb7542 100644
--- a/apps/sim/stores/knowledge/store.ts
+++ b/apps/sim/stores/knowledge/store.ts
@@ -288,9 +288,14 @@ export const useKnowledgeStore = create<KnowledgeStore>((set, get) => ({
   ) => {
     const state = get()
 
-    // Return cached chunks if they exist and match the search criteria
+    // Return cached chunks if they exist and match the exact search criteria AND offset
     const cached = state.chunks[documentId]
-    if (cached && cached.searchQuery === options?.search) {
+    if (
+      cached &&
+      cached.searchQuery === options?.search &&
+      cached.pagination.offset === (options?.offset || 0) &&
+      cached.pagination.limit === (options?.limit || 50)
+    ) {
       return cached.chunks
     }
 
@@ -331,7 +336,7 @@ export const useKnowledgeStore = create<KnowledgeStore>((set, get) => ({
         chunks: {
           ...state.chunks,
           [documentId]: {
-            chunks,
+            chunks, // Always replace chunks for traditional pagination
             pagination: {
               total: pagination?.total || chunks.length,
               limit: pagination?.limit || options?.limit || 50,
@@ -571,11 +576,11 @@ export const useKnowledgeStore = create<KnowledgeStore>((set, get) => ({
         loadingChunks: new Set([...state.loadingChunks, documentId]),
       }))
 
-      // Build query parameters
+      // Build query parameters - for refresh, always start from offset 0
       const params = new URLSearchParams()
       if (options?.search) params.set('search', options.search)
       if (options?.limit) params.set('limit', options.limit.toString())
-      if (options?.offset) params.set('offset', options.offset.toString())
+      params.set('offset', '0') // Always start fresh on refresh
 
       const response = await fetch(
         `/api/knowledge/${knowledgeBaseId}/documents/${documentId}/chunks?${params.toString()}`
@@ -598,11 +603,11 @@ export const useKnowledgeStore = create<KnowledgeStore>((set, get) => ({
         chunks: {
           ...state.chunks,
           [documentId]: {
-            chunks, // Use server data as source of truth
+            chunks, // Replace all chunks with fresh data
             pagination: {
               total: pagination?.total || chunks.length,
               limit: pagination?.limit || options?.limit || 50,
-              offset: pagination?.offset || options?.offset || 0,
+              offset: 0, // Reset to start
               hasMore: pagination?.hasMore || false,
             },
             searchQuery: options?.search,