diff --git a/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowSidebar.tsx b/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowSidebar.tsx
index 6336e24..c06a061 100644
--- a/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowSidebar.tsx
+++ b/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowSidebar.tsx
@@ -1,14 +1,6 @@
-import { useState, Fragment, useCallback, useMemo } from 'react';
+import { useState, Fragment, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import {
-  ActionButton,
-  Button,
-  Flex,
-  Item,
-  TabList,
-  TabPanels,
-  Tabs,
-} from '@adobe/react-spectrum';
+import { Button, Tab } from 'semantic-ui-react';
 import { useDispatch, useSelector } from 'react-redux';
 import { compose } from 'redux';
 import { withCookies } from 'react-cookie';
@@ -17,22 +9,24 @@ import cx from 'classnames';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 import { getCookieOptions } from '@plone/volto/helpers/Cookies/cookies';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
+import forbiddenSVG from '@plone/volto/icons/forbidden.svg';
 import { setSidebarTab } from '@plone/volto/actions/sidebar/sidebar';
 import expandSVG from '@plone/volto/icons/left-key.svg';
 import collapseSVG from '@plone/volto/icons/right-key.svg';
+import { useClient } from '@plone/volto/hooks/client/useClient';
+import { createPortal } from 'react-dom';
 import WorkflowTab from './WorkflowTab';
 import State from '../States/State';
 import Transition from '../Transitions/Transition';
-import type { GlobalRootState } from 'volto-workflow-manager/types';
 
 const messages = defineMessages({
-  document: {
-    id: 'Document',
-    defaultMessage: 'Document',
+  workflow: {
+    id: 'Workflow',
+    defaultMessage: 'Workflow',
   },
-  block: {
-    id: 'Block',
-    defaultMessage: 'Block',
+  state: {
+    id: 'State',
+    defaultMessage: 'State',
   },
   settings: {
     id: 'Settings',
@@ -46,18 +40,6 @@ const messages = defineMessages({
     id: 'Expand sidebar',
     defaultMessage: 'Expand sidebar',
   },
-  order: {
-    id: 'Order',
-    defaultMessage: 'Order',
-  },
-  workflow: {
-    id: 'Workflow',
-    defaultMessage: 'Workflow',
-  },
-  states: {
-    id: 'States',
-    defaultMessage: 'States',
-  },
   transitions: {
     id: 'Transitions',
     defaultMessage: 'Transitions',
@@ -66,17 +48,12 @@ const messages = defineMessages({
 
 const Sidebar = (props) => {
   const dispatch = useDispatch();
-  const { currentWorkflow, onDataChange, isDisabled } = props;
-  const selectedItem = useSelector(
-    (state: GlobalRootState) => state.workflow.selectedItem,
-  );
-
   const intl = useIntl();
   const {
     cookies,
     content,
     workflowTab = true,
-    statesTab = true,
+    stateTab = true,
     transitionsTab = true,
   } = props;
   const [expanded, setExpanded] = useState(
@@ -84,10 +61,11 @@ const Sidebar = (props) => {
   );
   const [size] = useState(0);
   const [showFull, setshowFull] = useState(true);
-
-  const tabIndex = useSelector((state) => state?.sidebar.tab);
-  const toolbarExpanded = useSelector((state) => state?.toolbar.expanded);
-
+  const isClient = useClient();
+  const tab = useSelector((state) => state.sidebar.tab);
+  const toolbarExpanded = useSelector((state) => state.toolbar.expanded);
+  const type = useSelector((state) => state.schema?.schema?.title);
+  const { currentWorkflow, onDataChange, isDisabled } = props;
   const onToggleExpanded = () => {
     cookies.set('sidebar_expanded', !expanded, getCookieOptions());
     setExpanded(!expanded);
@@ -124,65 +102,9 @@ const Sidebar = (props) => {
     setshowFull(!showFull);
   }, [showFull, toolbarExpanded]);
 
-  const workflowTabs = useMemo(
-    () =>
-      [
-        workflowTab && {
-          key: 'workflow',
-          title: intl.formatMessage(messages.workflow),
-          content: (
-            <WorkflowTab
-              workflowId={currentWorkflow.id}
-              onDataChange={(payload) => onDataChange(payload, 'workflow')}
-              isDisabled={isDisabled}
-            />
-          ),
-        },
-        statesTab && {
-          key: 'states',
-          title: intl.formatMessage(messages.states),
-          content: (
-            <State
-              workflowId={currentWorkflow.id}
-              workflow={currentWorkflow}
-              onDataChange={(payload) => onDataChange(payload, 'state')}
-              isDisabled={isDisabled}
-            />
-          ),
-        },
-        transitionsTab && {
-          key: 'transitions',
-          title: intl.formatMessage(messages.transitions),
-          content: (
-            <Transition
-              workflowId={currentWorkflow.id}
-              workflow={currentWorkflow}
-              onDataChange={(payload) => onDataChange(payload, 'transition')}
-              isDisabled={isDisabled}
-            />
-          ),
-        },
-      ].filter(Boolean),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      onDataChange,
-      workflowTab,
-      statesTab,
-      transitionsTab,
-      intl,
-      currentWorkflow,
-      isDisabled,
-      selectedItem,
-    ],
-  );
-
-  const selectedKey = workflowTabs[tabIndex]?.key;
-
-  const handleTabChange = (key) => {
-    const newIndex = workflowTabs.findIndex((tab) => tab.key === key);
-    if (newIndex > -1) {
-      dispatch(setSidebarTab(newIndex));
-    }
+  const onTabChange = (event, data) => {
+    event.nativeEvent.stopImmediatePropagation();
+    dispatch(setSidebarTab(data.activeIndex));
   };
 
   return (
@@ -195,67 +117,135 @@ const Sidebar = (props) => {
         style={size > 0 ? { width: size } : null}
       >
         <Button
-          variant="primary"
-          UNSAFE_className={
-            content && content.review_state
-              ? `${content.review_state} trigger`
-              : 'trigger'
-          }
+          type="button"
           aria-label={
             expanded
               ? intl.formatMessage(messages.shrinkSidebar)
               : intl.formatMessage(messages.expandSidebar)
           }
-          onPress={onToggleExpanded}
+          className={
+            content && content.review_state
+              ? `${content.review_state} trigger`
+              : 'trigger'
+          }
+          onClick={onToggleExpanded}
         />
-
-        <Tabs
-          aria-label="Workflow Manager Sidebar"
-          selectedKey={selectedKey}
-          onSelectionChange={handleTabChange}
-          isQuiet
-          height="100%"
+        <Button
+          type="button"
+          className="full-size-sidenav-btn"
+          onClick={onToggleFullSize}
+          aria-label="full-screen-sidenav"
         >
-          <Flex
-            direction="row"
-            alignItems="center"
-            gap="size-100"
-            UNSAFE_className="sidebar-tabs-header"
-          >
-            <ActionButton
-              UNSAFE_className="full-size-sidenav-btn"
-              aria-label="full-screen-sidenav"
-              onPress={onToggleFullSize}
-            >
-              <Icon
-                className="full-size-icon"
-                name={showFull ? expandSVG : collapseSVG}
-              />
-            </ActionButton>
-
-            <TabList flex="1">
-              {workflowTabs.map((tab) => (
-                <Item key={tab.key}>{tab.title}</Item>
-              ))}
-            </TabList>
-          </Flex>
-
-          <TabPanels flex="1" UNSAFE_className="sidebar-tab-panels">
-            {workflowTabs.map((tab) => (
-              <Item key={tab.key}>{tab.content}</Item>
-            ))}
-          </TabPanels>
-        </Tabs>
+          <Icon
+            className="full-size-icon"
+            name={showFull ? expandSVG : collapseSVG}
+          />
+        </Button>
+        <Tab
+          menu={{
+            secondary: true,
+            pointing: true,
+            attached: true,
+            tabular: true,
+            className: 'formtabs',
+          }}
+          className="tabs-wrapper"
+          renderActiveOnly={false}
+          activeIndex={tab}
+          onTabChange={onTabChange}
+          panes={[
+            !!workflowTab && {
+              menuItem: {
+                key: 'workflowTab',
+                as: 'button',
+                className: 'ui button',
+                content: type || intl.formatMessage(messages.workflow),
+              },
+              pane: (
+                <Tab.Pane
+                  key="metadata"
+                  className="tab-wrapper"
+                  id="sidebar-workflow"
+                />
+              ),
+            },
+            !!stateTab && {
+              menuItem: {
+                key: 'stateTab',
+                as: 'button',
+                className: 'ui button',
+                content: intl.formatMessage(messages.state),
+              },
+              pane: (
+                <Tab.Pane
+                  key="properties"
+                  className="tab-wrapper"
+                  id="sidebar-state"
+                >
+                  <Icon
+                    className="tab-forbidden"
+                    name={forbiddenSVG}
+                    size="48px"
+                  />
+                </Tab.Pane>
+              ),
+            },
+            !!transitionsTab && {
+              menuItem: intl.formatMessage(messages.transitions),
+              pane: (
+                <Tab.Pane
+                  key="transitions"
+                  className="tab-wrapper"
+                  id="sidebar-transition"
+                >
+                  <Icon
+                    className="tab-forbidden"
+                    name={forbiddenSVG}
+                    size="48px"
+                  />
+                </Tab.Pane>
+              ),
+            },
+          ].filter((tab) => tab)}
+        />
       </div>
       <div className={expanded ? 'pusher expanded' : 'pusher'} />
+      {isClient &&
+        createPortal(
+          <WorkflowTab
+            workflowId={currentWorkflow.id}
+            onDataChange={(payload) => {
+              onDataChange(payload, 'workflow');
+            }}
+            isDisabled={isDisabled}
+          />,
+          document.getElementById('sidebar-workflow'),
+        )}
+      {isClient &&
+        createPortal(
+          <State
+            workflowId={currentWorkflow.id}
+            workflow={currentWorkflow}
+            onDataChange={(payload) => onDataChange(payload, 'state')}
+            isDisabled={isDisabled}
+          />,
+          document.getElementById('sidebar-state'),
+        )}
+      {isClient &&
+        createPortal(
+          <Transition
+            workflowId={currentWorkflow.id}
+            workflow={currentWorkflow}
+            onDataChange={(payload) => onDataChange(payload, 'transition')}
+            isDisabled={isDisabled}
+          />,
+          document.getElementById('sidebar-transition'),
+        )}
     </Fragment>
   );
 };
 
 Sidebar.propTypes = {
-  currentWorkflow: PropTypes.object.isRequired,
-  onDataChange: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
   documentTab: PropTypes.bool,
   blockTab: PropTypes.bool,
   settingsTab: PropTypes.bool,
diff --git a/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowTab.tsx b/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowTab.tsx
index 46b35aa..4ade4c9 100644
--- a/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowTab.tsx
+++ b/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowTab.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { View, ProgressCircle } from '@adobe/react-spectrum';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+import Form from '@plone/volto/components/manage/Form/Form';
 import { getWorkflow } from '../../actions/workflow';
 import type { GlobalRootState } from '../../types';
 import type { WorkflowTabProps } from '../../types/workflow';
@@ -69,26 +69,28 @@ const WorkflowTab: React.FC<WorkflowTabProps> = ({
     } else {
       onDataChange(formData);
     }
-  }, [formData, currentWorkflow, workflowId, onDataChange]);
+  }, [formData, currentWorkflow, workflowId]);
 
-  const handleChangeField = useCallback((id: string, value: any) => {
-    setFormData((prevData) => ({
-      ...(prevData ?? { title: '', description: '' }),
-      [id]: value,
-    }));
-  }, []);
+  const handleChangeField = useCallback(
+    (data: any) => {
+      setFormData(data);
+    },
+    [dispatch, workflowId],
+  );
 
   if (!formData) {
     return <ProgressCircle isIndeterminate aria-label="Loading workflow..." />;
   }
-
+  console.log('formData', formData);
   return (
     <View padding="size-200">
-      <BlockDataForm
+      <Form
         key={workflowId}
         schema={workflowSchema}
         formData={formData}
-        onChangeField={handleChangeField}
+        onChangeFormData={handleChangeField} //use onChangeFormData
+        editable={!isDisabled}
+        hideActions
       />
     </View>
   );
diff --git a/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowView.tsx b/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowView.tsx
index 2e80c9c..bb93913 100644
--- a/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowView.tsx
+++ b/frontend/packages/volto-workflow-manager/src/components/Workflow/WorkflowView.tsx
@@ -1,5 +1,4 @@
 import {
-  Button,
   ProgressCircle,
   Text,
   Form,
@@ -13,6 +12,7 @@ import '@xyflow/react/dist/style.css';
 import { Link } from 'react-router-dom';
 import { useAppSelector } from '../../types';
 import ActionsToolbar from './ActionsToolbar';
+import { Button } from '@plone/components';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import save from '@plone/volto/icons/save.svg';
 import back from '@plone/volto/icons/back.svg';
@@ -21,14 +21,20 @@ import { createPortal } from 'react-dom';
 import { useClient } from '@plone/volto/hooks/client/useClient';
 import type { WorkflowViewProps } from '../../types/workflow';
 import WorkflowSidebar from './WorkflowSidebar';
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, {
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  useDebugValue,
+} from 'react';
 import { useDispatch } from 'react-redux';
 import { updateState } from '../../actions/state';
 import { updateTransition } from '../../actions/transition';
 import { getWorkflow, updateWorkflow } from '../../actions/workflow';
 import { toast } from 'react-toastify';
 import Toast from '@plone/volto/components/manage/Toast/Toast';
-
+import Hello from './Hello';
 const WorkflowView: React.FC<WorkflowViewProps> = ({
   workflowId,
   pathname,
@@ -104,21 +110,22 @@ const WorkflowView: React.FC<WorkflowViewProps> = ({
     prevIsDeletingTransition.current = isDeletingTransition;
   }, [isDeleting, isDeletingState, isDeletingTransition, dispatch, workflowId]);
 
-  const handleDataChange = useCallback(
-    (payload: any | null, kind: 'workflow' | 'state' | 'transition') => {
-      if (payload) {
-        setPayloadToSave({ payload, kind });
-      } else {
-        setPayloadToSave(null);
-      }
-    },
-    [],
-  );
+  const handleDataChange = (
+    payload: any | null,
+    kind: 'workflow' | 'state' | 'transition',
+  ) => {
+    if (payload && kind) {
+      console.log('data change', kind, payload);
+      const newPayloadData = { payload, kind };
 
-  const handleSave = useCallback(() => {
+      setPayloadToSave(newPayloadData);
+    }
+  };
+  const handleSave = () => {
     if (!payloadToSave || !workflowId) return;
 
     const { payload, kind } = payloadToSave;
+    console.log('handle save', kind, payload);
 
     if (kind === 'workflow') {
       dispatch(updateWorkflow(workflowId, payload));
@@ -127,7 +134,7 @@ const WorkflowView: React.FC<WorkflowViewProps> = ({
     } else if (kind === 'transition') {
       dispatch(updateTransition(workflowId, payload.id, payload));
     }
-  }, [dispatch, payloadToSave, workflowId]);
+  };
 
   if (isLoading || !workflow || workflow.id !== workflowId) {
     return (
@@ -186,9 +193,8 @@ const WorkflowView: React.FC<WorkflowViewProps> = ({
                 <Button
                   id="toolbar-saving-workflow"
                   aria-label="Save changes"
-                  variant="primary"
                   onPress={handleSave}
-                  isDisabled={!payloadToSave || isSaving}
+                  // isDisabled={!payloadToSave || isSaving}
                 >
                   <Icon
                     name={save}