diff --git a/apps/web/src/pages/templates/workflow/SideBar/AddStepMenu.tsx b/apps/web/src/pages/templates/workflow/SideBar/AddStepMenu.tsx
index baaf38cf48b..4579dcd24a0 100644
--- a/apps/web/src/pages/templates/workflow/SideBar/AddStepMenu.tsx
+++ b/apps/web/src/pages/templates/workflow/SideBar/AddStepMenu.tsx
@@ -4,6 +4,7 @@ import { When } from '../../../../components/utils/When';
 import { colors, DragButton, Tooltip } from '../../../../design-system';
 import { useEnvController } from '../../../../hooks';
 import { channels, NodeTypeEnum } from '../../../../utils/channels';
+import { TOP_ROW_HEIGHT } from '../WorkflowEditor';
 
 export function AddStepMenu({
   setDragging,
@@ -79,6 +80,7 @@ const StyledNav = styled.div`
   background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B15 : colors.white)};
   border-radius: 12px;
   z-index: 3;
+  margin-top: -${TOP_ROW_HEIGHT}px;
 `;
 
 const StyledDraggableNode = styled.div`
diff --git a/apps/web/src/pages/templates/workflow/SideBar/Sidebar.tsx b/apps/web/src/pages/templates/workflow/SideBar/Sidebar.tsx
index e627512a1ee..8b4a57b6e31 100644
--- a/apps/web/src/pages/templates/workflow/SideBar/Sidebar.tsx
+++ b/apps/web/src/pages/templates/workflow/SideBar/Sidebar.tsx
@@ -1,18 +1,8 @@
 import styled from '@emotion/styled';
-import { Container, Flex, Group, Stack, useMantineColorScheme } from '@mantine/core';
-import { useDidUpdate, useTimeout } from '@mantine/hooks';
-import { colors } from '@novu/notification-center';
-import { useState } from 'react';
-import { Background, BackgroundVariant } from 'react-flow-renderer';
-import { useFormContext } from 'react-hook-form';
-import { Link, useNavigate, useOutletContext } from 'react-router-dom';
-import { When } from '../../../../components/utils/When';
-import { Button } from '../../../../design-system';
-import { Settings } from '../../../../design-system/icons';
+import { Stack, useMantineColorScheme } from '@mantine/core';
+import { useOutletContext } from 'react-router-dom';
 import { useEnvController } from '../../../../hooks';
-import { IForm } from '../../components/formTypes';
-import { UpdateButton } from '../../components/UpdateButton';
-import { useBasePath } from '../../hooks/useBasePath';
+import { TOP_ROW_HEIGHT } from '../WorkflowEditor';
 import { AddStepMenu } from './AddStepMenu';
 
 export const Sidebar = () => {
@@ -24,77 +14,31 @@ export const Sidebar = () => {
   const { setDragging }: any = useOutletContext();
   const { readonly } = useEnvController();
 
-  const navigate = useNavigate();
-  const basePath = useBasePath();
-
-  const {
-    formState: { isDirty },
-  } = useFormContext<IForm>();
-  const [shouldPulse, setShouldPulse] = useState(false);
-
-  useDidUpdate(() => {
-    if (isDirty) {
-      return;
-    }
-    setShouldPulse(true);
-    start();
-  }, [isDirty]);
-
-  const { start } = useTimeout(() => {
-    setShouldPulse(false);
-  }, 5000);
+  if (readonly) {
+    return null;
+  }
 
   return (
-    <Flex direction="column" sx={{ height: '100%' }}>
-      <Container fluid sx={{ width: '100%', paddingLeft: 0, height: '74px' }}>
-        <Stack
-          justify="center"
-          sx={{
-            height: '100%',
-          }}
-        >
-          <Group>
-            <UpdateButton />
-            <Button
-              pulse={shouldPulse}
-              onClick={() => {
-                navigate(basePath + '/snippet');
-              }}
-              data-test-id="get-snippet-btn"
-            >
-              Get Snippet
-            </Button>
-            <Link data-test-id="settings-page" to="settings">
-              <Settings />
-            </Link>
-          </Group>
-        </Stack>
-      </Container>
-      <When truthy={!readonly}>
-        <div style={{ position: 'relative', flex: '1 1 auto' }}>
-          <SideBarWrapper dark={colorScheme === 'dark'}>
-            <AddStepMenu setDragging={setDragging} onDragStart={onDragStart} />
-          </SideBarWrapper>
-          <Background
-            size={1}
-            gap={10}
-            variant={BackgroundVariant.Dots}
-            color={colorScheme === 'dark' ? colors.BGDark : colors.BGLight}
-          />
-        </div>
-      </When>
-    </Flex>
+    <SideBarWrapper dark={colorScheme === 'dark'}>
+      <Stack
+        sx={{
+          height: '100%',
+        }}
+        justify="center"
+        align="center"
+      >
+        <AddStepMenu setDragging={setDragging} onDragStart={onDragStart} />
+      </Stack>
+    </SideBarWrapper>
   );
 };
 
 const SideBarWrapper = styled.div<{ dark: boolean }>`
-  position: relative;
-
-  background: ${({ dark }) => (dark ? colors.B15 : colors.B98)};
+  position: absolute;
+  top: ${TOP_ROW_HEIGHT}px;
+  bottom: 0;
+  background: transparent;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-  padding-right: 8px;
+  right: 8px;
+  z-index: 9999;
 `;
diff --git a/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx b/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
index a33342850fa..bc055ab8fc4 100644
--- a/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
+++ b/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
@@ -24,7 +24,7 @@ import AddNode from './workflow/node-types/AddNode';
 import ChannelNode from './workflow/node-types/ChannelNode';
 import TriggerNode from './workflow/node-types/TriggerNode';
 
-const TOP_ROW_HEIGHT = 74;
+export const TOP_ROW_HEIGHT = 74;
 
 const nodeTypes = {
   channelNode: ChannelNode,
@@ -201,7 +201,7 @@ const WorkflowEditor = () => {
         />
       </When>
       <When truthy={!channel || ![StepTypeEnum.EMAIL, StepTypeEnum.IN_APP].includes(channel)}>
-        <div style={{ display: 'flex', flexFlow: 'row' }}>
+        <div style={{ display: 'flex', flexFlow: 'row', position: 'relative' }}>
           <div
             style={{
               flex: '1 1 auto',
@@ -219,10 +219,22 @@ const WorkflowEditor = () => {
                 <Group>
                   <NameInput />
                   <Group>
-                    <When truthy={pathname !== basePath}>
-                      <UpdateButton />
-                    </When>
+                    <UpdateButton />
                   </Group>
+                  <When truthy={pathname === basePath}>
+                    <Button
+                      pulse={shouldPulse}
+                      onClick={() => {
+                        navigate(basePath + '/snippet');
+                      }}
+                      data-test-id="get-snippet-btn"
+                    >
+                      Get Snippet
+                    </Button>
+                    <Link data-test-id="settings-page" to="settings">
+                      <Settings />
+                    </Link>
+                  </When>
                 </Group>
               </Stack>
             </Container>
@@ -239,7 +251,6 @@ const WorkflowEditor = () => {
               onNodeClick={onNodeClick}
             />
           </div>
-
           <Outlet
             context={{
               setDragging,