diff --git a/packages/react-ui/src/app/builder/sidebar-header.tsx b/packages/react-ui/src/app/builder/sidebar-header.tsx
index aea3ea645d3..715d3128beb 100644
--- a/packages/react-ui/src/app/builder/sidebar-header.tsx
+++ b/packages/react-ui/src/app/builder/sidebar-header.tsx
@@ -9,7 +9,7 @@ type SidebarHeaderProps = {
 };
 const SidebarHeader = ({ children, onClose }: SidebarHeaderProps) => {
   return (
-    <div className="flex px-4 py-3 w-full gap-2 text-lg items-center">
+    <div className="flex px-4 py-2 w-full gap-2 text-lg items-center">
       {children}
       <div className="grow"></div>
       <Button
diff --git a/packages/react-ui/src/app/builder/step-settings/editable-step-name.tsx b/packages/react-ui/src/app/builder/step-settings/editable-step-name.tsx
index 6eef7de71c4..2795c1a712c 100644
--- a/packages/react-ui/src/app/builder/step-settings/editable-step-name.tsx
+++ b/packages/react-ui/src/app/builder/step-settings/editable-step-name.tsx
@@ -1,27 +1,9 @@
 import { t } from 'i18next'; // Import t directly from i18next
-import { ChevronLeftIcon, ChevronRightIcon, Pencil } from 'lucide-react';
+import { Pencil } from 'lucide-react';
 import React from 'react';
 
-import { Button } from '@/components/ui/button';
 import EditableText from '@/components/ui/editable-text';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { PieceIcon } from '@/features/pieces/components/piece-icon';
-import {
-  PieceStepMetadata,
-  StepMetadataWithActionOrTriggerOrAgentDisplayName,
-} from '@/lib/types';
-import {
-  FlowActionType,
-  FlowTriggerType,
-  flowStructureUtil,
-  isNil,
-} from '@activepieces/shared';
-
-import { useBuilderStateContext } from '../builder-hooks';
+import { isNil } from '@activepieces/shared';
 
 interface EditableStepNameProps {
   selectedBranchIndex: number | null;
@@ -33,55 +15,8 @@ interface EditableStepNameProps {
   isEditingStepOrBranchName: boolean;
   setIsEditingStepOrBranchName: (isEditing: boolean) => void;
   setSelectedBranchIndex: (index: number | null) => void;
-  stepMetadata: StepMetadataWithActionOrTriggerOrAgentDisplayName | undefined;
 }
 
-const PreviousOrNextButton = ({ isNext }: { isNext: boolean }) => {
-  const [selectedStep, setSelectedStep, flowVersion] = useBuilderStateContext(
-    (state) => [state.selectedStep, state.selectStepByName, state.flowVersion],
-  );
-  const allSteps = flowStructureUtil.getAllSteps(flowVersion.trigger);
-  const currentStepIndex = allSteps.findIndex(
-    (step) => step.name === selectedStep,
-  );
-  const nextStep = allSteps.at(currentStepIndex + 1);
-  const previousStep =
-    currentStepIndex > 0 ? allSteps.at(currentStepIndex - 1) : undefined;
-  const isDisabled = (!isNext && !previousStep) || (isNext && !nextStep);
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          disabled={(!isNext && !previousStep) || (isNext && !nextStep)}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (isNext && nextStep) {
-              setSelectedStep(nextStep.name);
-            } else if (!isNext && previousStep) {
-              setSelectedStep(previousStep.name);
-            }
-          }}
-          size="icon"
-          className="size-7"
-        >
-          {isNext ? (
-            <ChevronRightIcon className="size-4"></ChevronRightIcon>
-          ) : (
-            <ChevronLeftIcon className="size-4"></ChevronLeftIcon>
-          )}
-        </Button>
-      </TooltipTrigger>
-      {!isDisabled && (
-        <TooltipContent side="bottom">
-          {isNext ? t('Next step') : t('Previous step')}
-        </TooltipContent>
-      )}
-    </Tooltip>
-  );
-};
-
 const EditableStepName: React.FC<EditableStepNameProps> = ({
   selectedBranchIndex,
   displayName,
@@ -92,107 +27,58 @@ const EditableStepName: React.FC<EditableStepNameProps> = ({
   isEditingStepOrBranchName,
   setIsEditingStepOrBranchName,
   setSelectedBranchIndex,
-  stepMetadata,
 }) => {
-  const isPieceStep =
-    stepMetadata?.type === FlowActionType.PIECE ||
-    stepMetadata?.type === FlowTriggerType.PIECE;
-  const pieceVersion = isPieceStep
-    ? (stepMetadata as PieceStepMetadata)?.pieceVersion
-    : undefined;
-
   return (
-    <div className="flex flex-col w-full">
-      <div className="flex items-center gap-1.5 w-full">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="shrink-0">
-              <PieceIcon
-                logoUrl={stepMetadata?.logoUrl}
-                displayName={stepMetadata?.displayName}
-                showTooltip={false}
-                size="sm"
-              />
-            </div>
-          </TooltipTrigger>
-          {stepMetadata && (
-            <TooltipContent side="bottom" className="max-w-xs">
-              <div className="flex flex-col gap-1">
-                <div className="font-medium">
-                  {stepMetadata.displayName}
-                  {stepMetadata.actionOrTriggerOrAgentDisplayName && (
-                    <span className="font-normal">
-                      {' > '}
-                      {stepMetadata.actionOrTriggerOrAgentDisplayName}
-                    </span>
-                  )}
-                </div>
-                {stepMetadata.actionOrTriggerOrAgentDescription && (
-                  <div className="text-xs">
-                    {stepMetadata.actionOrTriggerOrAgentDescription}
-                  </div>
-                )}
-                {pieceVersion && <div className="text-xs">v{pieceVersion}</div>}
-              </div>
-            </TooltipContent>
-          )}
-        </Tooltip>
-        <div className="flex items-center gap-1 min-w-0 flex-1 text-sm">
-          {isNil(selectedBranchIndex) ? (
-            <EditableText
-              onValueChange={(value) => {
-                if (value) {
-                  setDisplayName(value);
-                }
-              }}
-              readonly={readonly}
-              value={displayName}
-              tooltipContent={readonly ? '' : t('Edit Step Name')}
-              isEditing={isEditingStepOrBranchName}
-              setIsEditing={setIsEditingStepOrBranchName}
-            />
-          ) : (
-            <>
-              <div
-                className="truncate cursor-pointer hover:underline"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setSelectedBranchIndex(null);
-                }}
-              >
-                {displayName}
-              </div>
-              /
-              <EditableText
-                key={branchName}
-                onValueChange={(value) => {
-                  if (value) {
-                    setBranchName(value);
-                  }
-                }}
-                readonly={readonly}
-                value={branchName}
-                tooltipContent={readonly ? '' : t('Edit Branch Name')}
-                isEditing={isEditingStepOrBranchName}
-                setIsEditing={setIsEditingStepOrBranchName}
-              />
-            </>
-          )}
-          {!isEditingStepOrBranchName && !readonly && (
-            <Pencil
-              className="h-3 w-3 shrink-0"
-              onClick={() => {
-                setIsEditingStepOrBranchName(true);
-              }}
-            />
-          )}
-        </div>
-        <div className="flex items-center shrink-0">
-          <PreviousOrNextButton isNext={false} />
-          <PreviousOrNextButton isNext={true} />
-        </div>
-      </div>
-    </div>
+    <>
+      {isNil(selectedBranchIndex) ? (
+        <EditableText
+          onValueChange={(value) => {
+            if (value) {
+              setDisplayName(value);
+            }
+          }}
+          readonly={readonly}
+          value={displayName}
+          tooltipContent={readonly ? '' : t('Edit Step Name')}
+          isEditing={isEditingStepOrBranchName}
+          setIsEditing={setIsEditingStepOrBranchName}
+        />
+      ) : (
+        <>
+          <div
+            className="truncate cursor-pointer hover:underline"
+            onClick={(e) => {
+              e.stopPropagation();
+              setSelectedBranchIndex(null);
+            }}
+          >
+            {displayName}
+          </div>
+          /
+          <EditableText
+            key={branchName}
+            onValueChange={(value) => {
+              if (value) {
+                setBranchName(value);
+              }
+            }}
+            readonly={readonly}
+            value={branchName}
+            tooltipContent={readonly ? '' : t('Edit Branch Name')}
+            isEditing={isEditingStepOrBranchName}
+            setIsEditing={setIsEditingStepOrBranchName}
+          />
+        </>
+      )}
+      {!isEditingStepOrBranchName && !readonly && (
+        <Pencil
+          className="h-4 w-4 shrink-0"
+          onClick={() => {
+            setIsEditingStepOrBranchName(true);
+          }}
+        />
+      )}
+    </>
   );
 };
 
diff --git a/packages/react-ui/src/app/builder/step-settings/index.tsx b/packages/react-ui/src/app/builder/step-settings/index.tsx
index 283bc460715..542eefaadc4 100644
--- a/packages/react-ui/src/app/builder/step-settings/index.tsx
+++ b/packages/react-ui/src/app/builder/step-settings/index.tsx
@@ -11,6 +11,7 @@ import {
   ResizablePanelGroup,
 } from '@/components/ui/resizable-panel';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
 import { pieceSelectorUtils } from '@/features/pieces/lib/piece-selector-utils';
 import { stepsHooks } from '@/features/pieces/lib/steps-hooks';
 import { projectCollectionUtils } from '@/hooks/project-collection';
@@ -38,6 +39,7 @@ import { LoopsSettings } from './loops-settings';
 import { PieceSettings } from './piece-settings';
 import { useResizableVerticalPanelsContext } from './resizable-vertical-panels-context';
 import { RouterSettings } from './router-settings';
+import { StepInfo } from './step-info';
 import { useStepSettingsContext } from './step-settings-context';
 
 const StepSettingsContainer = () => {
@@ -190,17 +192,20 @@ const StepSettingsContainer = () => {
               setSelectedBranchIndex={setSelectedBranchIndex}
               isEditingStepOrBranchName={isEditingStepOrBranchName}
               setIsEditingStepOrBranchName={setIsEditingStepOrBranchName}
-              stepMetadata={stepMetadata}
             ></EditableStepName>
           </SidebarHeader>
-          <div className="h-px bg-border w-full mb-4" />
+          <Separator className="w-full h-px" />
         </div>
+
         <DynamicPropertiesProvider
           key={`${selectedStep.name}-${selectedStep.type}`}
         >
           <ResizablePanelGroup direction="vertical">
             <ResizablePanel className="min-h-[80px]">
               <ScrollArea className="h-full">
+                <div className="w-full my-2 px-3">
+                  {stepMetadata && <StepInfo step={selectedStep} />}
+                </div>
                 <div
                   className={cn(
                     'flex flex-col px-4 pb-6',
diff --git a/packages/react-ui/src/app/builder/step-settings/step-info.tsx b/packages/react-ui/src/app/builder/step-settings/step-info.tsx
index 6b9afb66dbe..08453f91398 100644
--- a/packages/react-ui/src/app/builder/step-settings/step-info.tsx
+++ b/packages/react-ui/src/app/builder/step-settings/step-info.tsx
@@ -1,10 +1,5 @@
 import { t } from 'i18next';
-import {
-  ChevronLeftIcon,
-  ChevronRight,
-  ChevronRightIcon,
-  Info,
-} from 'lucide-react';
+import { ChevronLeftIcon, ChevronRightIcon, Info } from 'lucide-react';
 import React from 'react';
 
 import { TextWithTooltip } from '@/components/custom/text-with-tooltip';
@@ -49,40 +44,21 @@ const StepInfo: React.FC<StepInfoProps> = ({ step }) => {
 
   return (
     <div className="flex items-center justify-between gap-1">
-      <PreviousOrNextButton isNext={false} />
       <div className="flex grow items-center justify-between gap-3 min-h-[36px] min-w-0">
         <div className="flex items-center gap-2 min-w-0 ">
           <PieceIcon
             logoUrl={stepMetadata?.logoUrl}
             displayName={stepMetadata?.displayName}
-            showTooltip={false}
+            showTooltip={true}
             size="md"
           />
           <div className="flex items-center gap-0.5 min-w-0 text-sm">
-            {!isNil(stepMetadata?.displayName) ? (
-              <>
-                <span
-                  className={`shrink-0 ${
-                    !actionOrTriggerDisplayName
-                      ? 'text-foreground font-medium'
-                      : 'text-muted-foreground'
-                  }`}
-                >
-                  {stepMetadata.displayName}
+            {!isNil(actionOrTriggerDisplayName) ? (
+              <TextWithTooltip tooltipMessage={actionOrTriggerDisplayName}>
+                <span className="font-medium text-foreground min-w-0">
+                  {actionOrTriggerDisplayName}
                 </span>
-                {actionOrTriggerDisplayName && (
-                  <>
-                    <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-                    <TextWithTooltip
-                      tooltipMessage={actionOrTriggerDisplayName}
-                    >
-                      <span className="font-medium text-foreground min-w-0">
-                        {actionOrTriggerDisplayName}
-                      </span>
-                    </TextWithTooltip>
-                  </>
-                )}
-              </>
+              </TextWithTooltip>
             ) : (
               <Skeleton className="h-4 w-32 rounded" />
             )}
@@ -105,6 +81,7 @@ const StepInfo: React.FC<StepInfoProps> = ({ step }) => {
           </div>
         )}
       </div>
+      <PreviousOrNextButton isNext={false} />
       <PreviousOrNextButton isNext={true} />
     </div>
   );
diff --git a/packages/react-ui/src/app/components/sidebar/dashboard/index.tsx b/packages/react-ui/src/app/components/sidebar/dashboard/index.tsx
index 869bec17083..922ec765d6e 100644
--- a/packages/react-ui/src/app/components/sidebar/dashboard/index.tsx
+++ b/packages/react-ui/src/app/components/sidebar/dashboard/index.tsx
@@ -1,7 +1,6 @@
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { t } from 'i18next';
 import { Search, Plus, LineChart, Trophy, Compass } from 'lucide-react';
-import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useDebounce } from 'use-debounce';
 
@@ -30,6 +29,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+import { VirtualizedScrollArea } from '@/components/ui/virtualized-scroll-area';
 import { templatesTelemetryApi } from '@/features/templates/lib/templates-telemetry-api';
 import { platformHooks } from '@/hooks/platform-hooks';
 import { projectCollectionUtils } from '@/hooks/project-collection';
@@ -39,7 +39,6 @@ import {
   isNil,
   PlatformRole,
   ProjectType,
-  ProjectWithLimits,
   TeamProjectsLimit,
   TemplateTelemetryEventType,
 } from '@activepieces/shared';
@@ -60,7 +59,6 @@ export function ProjectDashboardSidebar() {
   const [debouncedSearchQuery] = useDebounce(searchQuery, 300);
   const [searchOpen, setSearchOpen] = useState(false);
   const navigate = useNavigate();
-  const projectsScrollRef = useRef<HTMLDivElement>(null);
   const { data: currentUser } = userHooks.useCurrentUser();
   const { platform } = platformHooks.useCurrentPlatform();
 
@@ -115,45 +113,13 @@ export function ProjectDashboardSidebar() {
     [navigate],
   );
 
-  // Virtual scrolling setup
   const ITEM_HEIGHT = state === 'collapsed' ? 40 : 44;
-
-  const rowVirtualizer = useVirtualizer({
-    count: displayProjects.length,
-    getScrollElement: () => projectsScrollRef.current,
-    estimateSize: useCallback(() => ITEM_HEIGHT, [ITEM_HEIGHT]),
-    overscan: 10,
-    getItemKey: useCallback(
-      (index: number) => displayProjects[index]?.id ?? index,
-      [displayProjects],
-    ),
-  });
-
-  const virtualItems = rowVirtualizer.getVirtualItems();
-
-  const renderProjectItem = useCallback(
-    (project: ProjectWithLimits) => {
-      return (
-        <ProjectSideBarItem
-          key={project.id}
-          project={project}
-          isCurrentProject={location.pathname.includes(
-            `/projects/${project.id}`,
-          )}
-          handleProjectSelect={handleProjectSelect}
-        />
-      );
-    },
-    [location.pathname, handleProjectSelect],
-  );
-
   const permissionFilter = (link: SidebarGeneralItemType) => {
     if (link.type === 'link') {
       return isNil(link.hasPermission) || link.hasPermission;
     }
     return true;
   };
-
   const handleExploreClick = useCallback(() => {
     templatesTelemetryApi.sendEvent({
       eventType: TemplateTelemetryEventType.EXPLORE_VIEW,
@@ -198,7 +164,7 @@ export function ProjectDashboardSidebar() {
 
   return (
     !embedState.hideSideNav && (
-      <Sidebar collapsible="icon">
+      <Sidebar collapsible="icon" className="max-h-[100vh]">
         <AppSidebarHeader />
 
         <SidebarContent className="overflow-x-hidden">
@@ -212,7 +178,7 @@ export function ProjectDashboardSidebar() {
 
           <SidebarSeparator />
 
-          <SidebarGroup className="flex-1">
+          <SidebarGroup className="flex-1 overflow-hidden">
             <div className="flex items-center justify-between group-data-[collapsible=icon]:hidden">
               <SidebarGroupLabel>{t('Projects')}</SidebarGroupLabel>
               <div className="flex items-center justify-center gap-2">
@@ -298,45 +264,45 @@ export function ProjectDashboardSidebar() {
               </div>
             </div>
             <div
-              ref={projectsScrollRef}
-              className={cn(
-                'flex-1 overflow-y-auto',
-                state === 'collapsed'
-                  ? 'flex flex-col items-center scrollbar-none'
-                  : 'scrollbar-hover',
-              )}
+              className="flex-1 grow min-h-0 flex flex-col overflow-hidden"
               onClick={(e) => {
                 e.stopPropagation();
               }}
             >
-              {displayProjects.length > 0 ? (
-                <SidebarMenu
-                  className={cn('flex flex-col items-start w-full')}
-                  style={{
-                    height: `${rowVirtualizer.getTotalSize()}px`,
-                    position: 'relative',
-                  }}
-                >
-                  {virtualItems.map((virtualItem) => {
-                    const project = displayProjects[virtualItem.index];
-                    return (
-                      <SidebarMenuItem
-                        key={virtualItem.key}
-                        data-virtual-index={virtualItem.index}
-                        className="w-full"
-                      >
-                        {renderProjectItem(project)}
+              <div className="flex grow max-h-[100%]">
+                {displayProjects.length > 0 ? (
+                  <VirtualizedScrollArea
+                    className={cn(
+                      'flex-1',
+                      state === 'collapsed'
+                        ? 'flex flex-col items-center scrollbar-none'
+                        : 'scrollbar-hover',
+                    )}
+                    items={displayProjects}
+                    estimateSize={() => ITEM_HEIGHT}
+                    getItemKey={(index) => displayProjects[index]?.id ?? index}
+                    overscan={10}
+                    renderItem={(project) => (
+                      <SidebarMenuItem className="w-full">
+                        <ProjectSideBarItem
+                          key={project.id}
+                          project={project}
+                          isCurrentProject={location.pathname.includes(
+                            `/projects/${project.id}`,
+                          )}
+                          handleProjectSelect={handleProjectSelect}
+                        />
                       </SidebarMenuItem>
-                    );
-                  })}
-                </SidebarMenu>
-              ) : (
-                isSearchMode && (
-                  <div className="px-2 py-2 text-sm text-muted-foreground">
-                    {state === 'expanded' && t('No projects found.')}
-                  </div>
-                )
-              )}
+                    )}
+                  />
+                ) : (
+                  isSearchMode && (
+                    <div className="px-2 py-2 text-sm text-muted-foreground">
+                      {state === 'expanded' && t('No projects found.')}
+                    </div>
+                  )
+                )}
+              </div>
             </div>
           </SidebarGroup>
         </SidebarContent>