diff --git a/src/assets/theme/components/button/button.variants.ts b/src/assets/theme/components/button/button.variants.ts
index 6be8be51d..4eb788d3f 100644
--- a/src/assets/theme/components/button/button.variants.ts
+++ b/src/assets/theme/components/button/button.variants.ts
@@ -74,6 +74,20 @@ const tertiary = defineStyle({
   _focus: {},
 });
 
+const danger = defineStyle({
+  border: '1px solid',
+  borderColor: 'red-1',
+  color: 'red-1',
+  _hover: {
+    borderColor: 'red-0',
+    color: 'red-0',
+  },
+  _active: {
+    borderColor: 'red-0',
+    color: 'red-0',
+  },
+});
+
 const stepper = defineStyle({
   border: '1px solid',
   borderColor: 'neutral-3',
@@ -98,6 +112,7 @@ const buttonVariants = {
   secondary,
   tertiary,
   stepper,
+  danger,
 };
 
 export default buttonVariants;
diff --git a/src/components/Roles/forms/RoleFormInfo.tsx b/src/components/Roles/forms/RoleFormInfo.tsx
index 1e6c51b52..0e1417420 100644
--- a/src/components/Roles/forms/RoleFormInfo.tsx
+++ b/src/components/Roles/forms/RoleFormInfo.tsx
@@ -20,8 +20,7 @@ export default function RoleFormInfo() {
   return (
     <>
       <Box
-        px={{ base: '1rem', md: 0 }}
-        py="1rem"
+        p="1.5rem"
         bg="neutral-2"
         boxShadow={{
           base: DETAILS_BOX_SHADOW,
@@ -108,12 +107,18 @@ export default function RoleFormInfo() {
           <Field name="roleEditing.canCreateProposals">
             {() => (
               <Flex
+                mt={6}
                 justifyContent="space-between"
                 alignItems="center"
                 padding={4}
                 borderRadius={8}
                 border="1px solid"
                 borderColor="neutral-3"
+                bg="neutral-2"
+                boxShadow={{
+                  base: DETAILS_BOX_SHADOW,
+                  md: 'unset',
+                }}
               >
                 <Text>{t('canCreateProposals')}</Text>
                 <Switch
diff --git a/src/components/Roles/forms/RoleFormMember.tsx b/src/components/Roles/forms/RoleFormMember.tsx
index c8dac0777..4aebc1506 100644
--- a/src/components/Roles/forms/RoleFormMember.tsx
+++ b/src/components/Roles/forms/RoleFormMember.tsx
@@ -245,6 +245,7 @@ function RoleFormMemberTermToggle() {
       padding="1.5rem"
       border="1px solid"
       borderColor="neutral-3"
+      bg="neutral-2"
       borderRadius="0.25rem"
       mt="1.5rem"
     >
@@ -318,8 +319,7 @@ export function RoleFormMember() {
   return (
     <Box>
       <Box
-        px={{ base: '1rem', md: 0 }}
-        py="1rem"
+        p="1.5rem"
         bg="neutral-2"
         boxShadow={{
           base: DETAILS_BOX_SHADOW,
diff --git a/src/components/Roles/forms/RoleFormPaymentStream.tsx b/src/components/Roles/forms/RoleFormPaymentStream.tsx
index 7f6787338..7c345c656 100644
--- a/src/components/Roles/forms/RoleFormPaymentStream.tsx
+++ b/src/components/Roles/forms/RoleFormPaymentStream.tsx
@@ -4,7 +4,7 @@ import { addDays, addMinutes } from 'date-fns';
 import { Field, FieldProps, FormikErrors, useFormikContext } from 'formik';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { CARD_SHADOW, isDevMode } from '../../../constants/common';
+import { DETAILS_BOX_SHADOW, isDevMode } from '../../../constants/common';
 import { useRolesStore } from '../../../store/roles/useRolesStore';
 import { RoleFormValues, RoleHatFormValue } from '../../../types/roles';
 import { DatePicker } from '../../ui/forms/DatePicker';
@@ -171,15 +171,14 @@ export function RoleFormPaymentStream({ formIndex }: { formIndex: number }) {
   return (
     <>
       <Box
-        px={{ base: '1rem', md: 0 }}
-        py="1rem"
+        p="1.5rem"
+        mt={4}
         bg="neutral-2"
         boxShadow={{
-          base: CARD_SHADOW,
+          base: DETAILS_BOX_SHADOW,
           md: 'unset',
         }}
         borderRadius="0.5rem"
-        position="relative"
       >
         <SectionTitle
           title={t('asset')}
diff --git a/src/components/Roles/forms/RoleFormPaymentStreamTermed.tsx b/src/components/Roles/forms/RoleFormPaymentStreamTermed.tsx
index cb8c91d22..e69580200 100644
--- a/src/components/Roles/forms/RoleFormPaymentStreamTermed.tsx
+++ b/src/components/Roles/forms/RoleFormPaymentStreamTermed.tsx
@@ -369,6 +369,8 @@ export default function RoleFormPaymentStreamTermed({ paymentIndex }: { paymentI
       <Box
         bg="neutral-2"
         borderRadius="0.5rem"
+        p="1.5rem"
+        mt={4}
       >
         <ShadowedBox>
           <SectionTitle
diff --git a/src/components/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/Roles/forms/RoleFormPaymentStreams.tsx
index 286d0f9ab..397e9da7f 100644
--- a/src/components/Roles/forms/RoleFormPaymentStreams.tsx
+++ b/src/components/Roles/forms/RoleFormPaymentStreams.tsx
@@ -13,6 +13,24 @@ import { ModalType } from '../../ui/modals/ModalProvider';
 import { useDecentModal } from '../../ui/modals/useDecentModal';
 import Divider from '../../ui/utils/Divider';
 import { RolePaymentDetails } from '../RolePaymentDetails';
+import { RoleFormPaymentStream } from './RoleFormPaymentStream';
+import RoleFormPaymentStreamTermed from './RoleFormPaymentStreamTermed';
+
+export function RoleFormPaymentRenderer() {
+  const { values } = useFormikContext<RoleFormValues>();
+
+  if (values.roleEditing?.roleEditingPaymentIndex !== undefined) {
+    if (values.roleEditing?.isTermed) {
+      return (
+        <RoleFormPaymentStreamTermed paymentIndex={values.roleEditing.roleEditingPaymentIndex} />
+      );
+    } else {
+      return <RoleFormPaymentStream formIndex={values.roleEditing.roleEditingPaymentIndex} />;
+    }
+  }
+
+  return null;
+}
 
 export function RoleFormPaymentStreams() {
   const { t } = useTranslation(['roles']);
@@ -61,6 +79,7 @@ export function RoleFormPaymentStreams() {
         <Box>
           {sortedPayments.length === 0 && (
             <Flex
+              bg="neutral-2"
               padding="1.5rem"
               border="1px solid"
               borderColor="neutral-3"
@@ -98,7 +117,8 @@ export function RoleFormPaymentStreams() {
           >
             {t('addPayment')}
           </Button>
-          <Divider my="1rem" />
+          <RoleFormPaymentRenderer />
+          {!!sortedPayments.length && <Divider my="1rem" />}
           <Box mt="0.5rem">
             {sortedPayments.map(payment => {
               // @note don't render if form isn't valid
diff --git a/src/components/Roles/forms/RoleFormTabs.tsx b/src/components/Roles/forms/RoleFormTabs.tsx
index b5b733be1..07235e9e7 100644
--- a/src/components/Roles/forms/RoleFormTabs.tsx
+++ b/src/components/Roles/forms/RoleFormTabs.tsx
@@ -1,6 +1,6 @@
 import { Button, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 import { useFormikContext } from 'formik';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocker, useNavigate } from 'react-router-dom';
 import { Hex } from 'viem';
@@ -11,8 +11,6 @@ import { useRolesStore } from '../../../store/roles/useRolesStore';
 import { EditBadgeStatus, RoleFormValues, RoleHatFormValue } from '../../../types/roles';
 import RoleFormInfo from './RoleFormInfo';
 import { RoleFormMember } from './RoleFormMember';
-import { RoleFormPaymentStream } from './RoleFormPaymentStream';
-import RoleFormPaymentStreamTermed from './RoleFormPaymentStreamTermed';
 import { RoleFormPaymentStreams } from './RoleFormPaymentStreams';
 import { useRoleFormEditedRole } from './useRoleFormEditedRole';
 
@@ -55,28 +53,12 @@ export function RoleFormTabs({
     }
   }, [setFieldValue, values.hats, values.roleEditing, hatId]);
 
-  const [tabIndex, setTabIndex] = useState(0);
-
   const safeAddress = safe?.address;
   if (!safeAddress) return null;
 
-  if (values.roleEditing?.roleEditingPaymentIndex !== undefined) {
-    if (values.roleEditing?.isTermed) {
-      return (
-        <RoleFormPaymentStreamTermed paymentIndex={values.roleEditing?.roleEditingPaymentIndex} />
-      );
-    } else {
-      return <RoleFormPaymentStream formIndex={values.roleEditing?.roleEditingPaymentIndex} />;
-    }
-  }
-
   return (
     <>
-      <Tabs
-        index={tabIndex}
-        onChange={setTabIndex}
-        variant="twoTone"
-      >
+      <Tabs variant="twoTone">
         <TabList>
           <Tab>{t('roleInfo')}</Tab>
           <Tab>{t('member')}</Tab>
@@ -112,7 +94,6 @@ export function RoleFormTabs({
               } else if (existingRoleHat !== undefined) {
                 setFieldValue(`hats.${hatIndex}`, {
                   ...existingRoleHat,
-                  resolvedWearer: existingRoleHat.wearerAddress,
                   roleTerms: existingRoleHat.roleTerms.allTerms,
                 });
               }
diff --git a/src/components/Roles/forms/RoleFormTerms.tsx b/src/components/Roles/forms/RoleFormTerms.tsx
index 4198a12e3..5aaf182f0 100644
--- a/src/components/Roles/forms/RoleFormTerms.tsx
+++ b/src/components/Roles/forms/RoleFormTerms.tsx
@@ -225,6 +225,8 @@ function RoleTermExpiredTerms({
     <Box
       borderRadius="0.5rem"
       boxShadow="layeredShadowBorder"
+      bg="neutral-2"
+      p="1.5rem"
     >
       <Accordion allowToggle>
         <AccordionItem
@@ -238,7 +240,6 @@ function RoleTermExpiredTerms({
               <AccordionButton
                 borderTopRadius="0.5rem"
                 borderBottomRadius="0.5rem"
-                p="1rem"
               >
                 <Flex
                   alignItems="center"
diff --git a/src/pages/dao/roles/edit/SafeRolesEditFormikPageWrapper.tsx b/src/pages/dao/roles/edit/SafeRolesEditFormikPageWrapper.tsx
new file mode 100644
index 000000000..769a477ef
--- /dev/null
+++ b/src/pages/dao/roles/edit/SafeRolesEditFormikPageWrapper.tsx
@@ -0,0 +1,55 @@
+import * as amplitude from '@amplitude/analytics-browser';
+import { Formik } from 'formik';
+import { useEffect, useMemo } from 'react';
+import { Outlet } from 'react-router-dom';
+import { useRolesSchema } from '../../../../hooks/schemas/roles/useRolesSchema';
+import useCreateRoles from '../../../../hooks/utils/useCreateRoles';
+import { analyticsEvents } from '../../../../insights/analyticsEvents';
+import { useDaoInfoStore } from '../../../../store/daoInfo/useDaoInfoStore';
+import { useRolesStore } from '../../../../store/roles/useRolesStore';
+import { RoleFormValues } from '../../../../types/roles';
+
+export default function SafeRolesEditFormikPageWrapper() {
+  useEffect(() => {
+    amplitude.track(analyticsEvents.RolesEditPageOpened);
+  }, []);
+
+  const { safe } = useDaoInfoStore();
+
+  const { rolesSchema } = useRolesSchema();
+  const { hatsTree } = useRolesStore();
+
+  const { createEditRolesProposal } = useCreateRoles();
+  const initialValues: RoleFormValues = useMemo(() => {
+    const hats = hatsTree?.roleHats || [];
+    return {
+      proposalMetadata: {
+        title: '',
+        description: '',
+      },
+      hats: hats.map(hat => ({
+        ...hat,
+        resolvedWearer: hat.wearerAddress,
+        wearer: hat.wearerAddress,
+        roleTerms: hat.roleTerms.allTerms,
+      })),
+      customNonce: safe?.nextNonce || 0,
+      actions: [],
+    };
+  }, [hatsTree?.roleHats, safe?.nextNonce]);
+  return (
+    <Formik<RoleFormValues>
+      initialValues={initialValues}
+      enableReinitialize
+      validationSchema={rolesSchema}
+      validateOnMount
+      onSubmit={createEditRolesProposal}
+    >
+      {({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <Outlet />
+        </form>
+      )}
+    </Formik>
+  );
+}
diff --git a/src/pages/dao/roles/edit/SafeRolesEditPage.tsx b/src/pages/dao/roles/edit/SafeRolesEditPage.tsx
index 4dcf586e8..9793477b8 100644
--- a/src/pages/dao/roles/edit/SafeRolesEditPage.tsx
+++ b/src/pages/dao/roles/edit/SafeRolesEditPage.tsx
@@ -1,23 +1,18 @@
 import * as amplitude from '@amplitude/analytics-browser';
-import { Box, Button, Flex, Hide, Show } from '@chakra-ui/react';
+import { Box, Button, Flex, Show } from '@chakra-ui/react';
 import { Plus } from '@phosphor-icons/react';
-import { Formik } from 'formik';
-import { useEffect, useMemo, useState } from 'react';
+import { useFormikContext } from 'formik';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Hex, toHex } from 'viem';
 import { RoleCardEdit } from '../../../../components/Roles/RoleCard';
 import { RoleCardLoading } from '../../../../components/Roles/RolePageCard';
 import { RolesEditTable } from '../../../../components/Roles/RolesTable';
-import DraggableDrawer from '../../../../components/ui/containers/DraggableDrawer';
 import NoDataCard from '../../../../components/ui/containers/NoDataCard';
-import { ModalBase } from '../../../../components/ui/modals/ModalBase';
-import { UnsavedChangesWarningContent } from '../../../../components/ui/modals/UnsavedChangesWarningContent';
 import PageHeader from '../../../../components/ui/page/Header/PageHeader';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { getRandomBytes } from '../../../../helpers';
-import { useRolesSchema } from '../../../../hooks/schemas/roles/useRolesSchema';
-import useCreateRoles from '../../../../hooks/utils/useCreateRoles';
 import { useNavigationBlocker } from '../../../../hooks/utils/useNavigationBlocker';
 import { analyticsEvents } from '../../../../insights/analyticsEvents';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
@@ -34,29 +29,11 @@ export function SafeRolesEditPage() {
   const { safe } = useDaoInfoStore();
   const { addressPrefix } = useNetworkConfig();
 
-  const { rolesSchema } = useRolesSchema();
+  const { values, setFieldValue } = useFormikContext<RoleFormValues>();
+
   const { hatsTree } = useRolesStore();
 
   const navigate = useNavigate();
-  const { createEditRolesProposal } = useCreateRoles();
-
-  const initialValues: RoleFormValues = useMemo(() => {
-    const hats = hatsTree?.roleHats || [];
-    return {
-      proposalMetadata: {
-        title: '',
-        description: '',
-      },
-      hats: hats.map(hat => ({
-        ...hat,
-        resolvedWearer: hat.wearerAddress,
-        wearer: hat.wearerAddress,
-        roleTerms: hat.roleTerms.allTerms,
-      })),
-      customNonce: safe?.nextNonce || 0,
-      actions: [],
-    };
-  }, [hatsTree?.roleHats, safe?.nextNonce]);
 
   const [hasEditedRoles, setHasEditedRoles] = useState(false);
 
@@ -73,141 +50,100 @@ export function SafeRolesEditPage() {
   const showNoRolesCard = !hatsTreeLoading && (hatsTree === null || hatsTree.roleHats.length === 0);
 
   return (
-    <Formik<RoleFormValues>
-      initialValues={initialValues}
-      enableReinitialize
-      validationSchema={rolesSchema}
-      validateOnMount
-      onSubmit={createEditRolesProposal}
-    >
-      {({ handleSubmit, values, setFieldValue }) => (
-        <form onSubmit={handleSubmit}>
-          {blocker.state === 'blocked' && (
-            <>
-              <Hide above="md">
-                <DraggableDrawer
-                  isOpen
-                  onClose={() => {}}
-                  onOpen={() => {}}
-                  headerContent={null}
-                  initialHeight="23rem"
-                  closeOnOverlayClick={false}
-                >
-                  <UnsavedChangesWarningContent
-                    onDiscard={blocker.proceed}
-                    onKeepEditing={blocker.reset}
-                  />
-                </DraggableDrawer>
-              </Hide>
-              <Hide below="md">
-                <ModalBase
-                  isOpen
-                  onClose={() => {}}
-                >
-                  <UnsavedChangesWarningContent
-                    onDiscard={blocker.proceed}
-                    onKeepEditing={blocker.reset}
-                  />
-                </ModalBase>
-              </Hide>
-            </>
+    <>
+      <Box>
+        <PageHeader
+          title={t('roles')}
+          breadcrumbs={[
+            {
+              terminus: t('roles'),
+              path: DAO_ROUTES.roles.relative(addressPrefix, safeAddress),
+            },
+            {
+              terminus: t('editRoles'),
+              path: '',
+            },
+          ]}
+          buttonProps={{
+            variant: 'secondary',
+            children: t('addRole'),
+            size: 'sm',
+            gap: 0,
+            leftIcon: (
+              <Box mr="-0.25rem">
+                <Plus size="1rem" />
+              </Box>
+            ),
+            onClick: async () => {
+              const newId = toHex(getRandomBytes(), { size: 32 });
+              setFieldValue('roleEditing', { id: newId, canCreateProposals: false });
+              showRoleEditDetails(newId);
+            },
+          }}
+        />
+
+        <Show above="md">
+          <RolesEditTable handleRoleClick={showRoleEditDetails} />
+        </Show>
+        <Show below="md">
+          {hatsTree === undefined && <RoleCardLoading />}
+          {showNoRolesCard && values.hats.length === 0 && (
+            <NoDataCard
+              translationNameSpace="roles"
+              emptyText="noRoles"
+              emptyTextNotProposer="noRolesNotProposer"
+            />
           )}
-          <Box>
-            <PageHeader
-              title={t('roles')}
-              breadcrumbs={[
-                {
-                  terminus: t('roles'),
-                  path: DAO_ROUTES.roles.relative(addressPrefix, safeAddress),
-                },
-                {
-                  terminus: t('editRoles'),
-                  path: '',
-                },
-              ]}
-              buttonProps={{
-                variant: 'secondary',
-                children: t('addRole'),
-                size: 'sm',
-                gap: 0,
-                leftIcon: (
-                  <Box mr="-0.25rem">
-                    <Plus size="1rem" />
-                  </Box>
-                ),
-                onClick: async () => {
-                  const newId = toHex(getRandomBytes(), { size: 32 });
-                  setFieldValue('roleEditing', { id: newId, canCreateProposals: false });
-                  showRoleEditDetails(newId);
-                },
+          {values.hats.map(hat => (
+            <RoleCardEdit
+              key={hat.id}
+              name={hat.name}
+              wearerAddress={hat.resolvedWearer}
+              editStatus={hat.editedRole?.status}
+              handleRoleClick={() => {
+                setFieldValue('roleEditing', hat);
+                showRoleEditDetails(hat.id);
               }}
+              payments={hat.payments}
+              isTermed={!!hat.isTermed}
             />
-
-            <Show above="md">
-              <RolesEditTable handleRoleClick={showRoleEditDetails} />
-            </Show>
-            <Show below="md">
-              {hatsTree === undefined && <RoleCardLoading />}
-              {showNoRolesCard && values.hats.length === 0 && (
-                <NoDataCard
-                  translationNameSpace="roles"
-                  emptyText="noRoles"
-                  emptyTextNotProposer="noRolesNotProposer"
-                />
-              )}
-              {values.hats.map(hat => (
-                <RoleCardEdit
-                  key={hat.id}
-                  name={hat.name}
-                  wearerAddress={hat.resolvedWearer}
-                  editStatus={hat.editedRole?.status}
-                  handleRoleClick={() => {
-                    setFieldValue('roleEditing', hat);
-                    showRoleEditDetails(hat.id);
-                  }}
-                  payments={hat.payments}
-                  isTermed={!!hat.isTermed}
-                />
-              ))}
-            </Show>
-          </Box>
-          <Flex
-            mt="1rem"
-            gap="1rem"
-            justifyContent="flex-end"
-          >
-            <Button
-              variant="tertiary"
-              onClick={() => {
-                setHasEditedRoles(values.hats.some(hat => !!hat.editedRole));
-                setTimeout(
-                  () =>
-                    navigate(DAO_ROUTES.roles.relative(addressPrefix, safeAddress), {
-                      replace: true,
-                    }),
-                  50,
-                );
-              }}
-            >
-              {t('cancel', { ns: 'common' })}
-            </Button>
-            <Button
-              onClick={() => {
-                if (blocker.reset) {
-                  blocker.reset();
-                }
-                navigate(
-                  DAO_ROUTES.rolesEditCreateProposalSummary.relative(addressPrefix, safeAddress),
-                );
-              }}
-              isDisabled={!values.hats.some(hat => hat.editedRole)}
-            >
-              {t('createProposal', { ns: 'modals' })}
-            </Button>
-          </Flex>
-          <Outlet />
-        </form>
-      )}
-    </Formik>
+          ))}
+        </Show>
+      </Box>
+      <Flex
+        mt="1rem"
+        gap="1rem"
+        justifyContent="flex-end"
+      >
+        <Button
+          variant="tertiary"
+          onClick={() => {
+            setHasEditedRoles(values.hats.some(hat => !!hat.editedRole));
+            setTimeout(
+              () =>
+                navigate(DAO_ROUTES.roles.relative(addressPrefix, safeAddress), {
+                  replace: true,
+                }),
+              50,
+            );
+          }}
+        >
+          {t('cancel', { ns: 'common' })}
+        </Button>
+        <Button
+          onClick={() => {
+            if (blocker.reset) {
+              blocker.reset();
+            }
+            navigate(
+              DAO_ROUTES.rolesEditCreateProposalSummary.relative(addressPrefix, safeAddress),
+            );
+          }}
+          isDisabled={!values.hats.some(hat => hat.editedRole)}
+        >
+          {t('createProposal', { ns: 'modals' })}
+        </Button>
+      </Flex>
+    </>
   );
 }
diff --git a/src/pages/dao/roles/edit/details/SafeRoleEditDetailsPage.tsx b/src/pages/dao/roles/edit/details/SafeRoleEditDetailsPage.tsx
index b6f330200..e13e44f3b 100644
--- a/src/pages/dao/roles/edit/details/SafeRoleEditDetailsPage.tsx
+++ b/src/pages/dao/roles/edit/details/SafeRoleEditDetailsPage.tsx
@@ -1,39 +1,16 @@
-import {
-  Box,
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerContent,
-  DrawerOverlay,
-  Flex,
-  Hide,
-  Icon,
-  IconButton,
-  Portal,
-  Show,
-  Text,
-} from '@chakra-ui/react';
-import { ArrowLeft, DotsThree, Trash } from '@phosphor-icons/react';
+import { Box } from '@chakra-ui/react';
+import { Trash } from '@phosphor-icons/react';
 import { FieldArray, useFormikContext } from 'formik';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Hex, isHex } from 'viem';
+import { isHex } from 'viem';
 import { RoleFormTabs } from '../../../../../components/Roles/forms/RoleFormTabs';
-import DraggableDrawer from '../../../../../components/ui/containers/DraggableDrawer';
-import { ModalBase } from '../../../../../components/ui/modals/ModalBase';
-import { UnsavedChangesWarningContent } from '../../../../../components/ui/modals/UnsavedChangesWarningContent';
-import {
-  BACKGROUND_SEMI_TRANSPARENT,
-  CARD_SHADOW,
-  NEUTRAL_2_82_TRANSPARENT,
-  useHeaderHeight,
-} from '../../../../../constants/common';
+import PageHeader from '../../../../../components/ui/page/Header/PageHeader';
 import { DAO_ROUTES } from '../../../../../constants/routes';
 import { useNavigationBlocker } from '../../../../../hooks/utils/useNavigationBlocker';
 import { useNetworkConfig } from '../../../../../providers/NetworkConfig/NetworkConfigProvider';
 import { useDaoInfoStore } from '../../../../../store/daoInfo/useDaoInfoStore';
-import { useRolesStore } from '../../../../../store/roles/useRolesStore';
 import {
   EditBadgeStatus,
   EditedRole,
@@ -41,98 +18,9 @@ import {
   RoleHatFormValue,
 } from '../../../../../types/roles';
 
-function EditRoleMenu({ onRemove, hatId }: { hatId: Hex; onRemove: () => void }) {
-  const { t } = useTranslation(['roles']);
-  const { values, setFieldValue } = useFormikContext<RoleFormValues>();
-  const [showMenu, setShowMenu] = useState(false);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const hatIndex = values.hats.findIndex(h => h.id === hatId);
-  const role = values.hats[hatIndex];
-
-  const handleRemoveRole = () => {
-    const editedRole: EditedRole = {
-      fieldNames: [],
-      status: EditBadgeStatus.Removed,
-    };
-
-    if (hatIndex !== -1) {
-      if (role?.editedRole?.status === EditBadgeStatus.New) {
-        setFieldValue(
-          'hats',
-          values.hats.filter(h => h.id !== hatId),
-        );
-      } else {
-        setFieldValue(`hats.${hatIndex}`, { ...values.hats[hatIndex], editedRole });
-      }
-    }
-
-    setFieldValue('roleEditing', undefined);
-    setFieldValue('newRoleTerm', undefined);
-    setTimeout(() => onRemove(), 50);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setShowMenu(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <>
-      <IconButton
-        aria-label="edit role menu"
-        variant="tertiary"
-        h="fit-content"
-        size="lg"
-        as={DotsThree}
-        onClick={() => setShowMenu(show => !show)}
-      />
-      {showMenu && (
-        <Box
-          position="absolute"
-          ref={menuRef}
-          right="0%"
-          minW="15.25rem"
-          rounded="0.5rem"
-          bg={NEUTRAL_2_82_TRANSPARENT}
-          border="1px solid"
-          borderColor="neutral-3"
-          boxShadow={CARD_SHADOW}
-          zIndex={10000}
-        >
-          <Button
-            variant="unstyled"
-            color="red-1"
-            _hover={{ bg: 'neutral-2' }}
-            onClick={handleRemoveRole}
-            rightIcon={
-              <Icon
-                as={Trash}
-                boxSize="1.5rem"
-              />
-            }
-            minW="full"
-            justifyContent="space-between"
-          >
-            {t('deleteRole')}
-          </Button>
-        </Box>
-      )}
-    </>
-  );
-}
-
 export function SafeRoleEditDetailsPage() {
-  const headerHeight = useHeaderHeight();
   const { t } = useTranslation(['roles']);
   const { safe } = useDaoInfoStore();
-  const { getPayment } = useRolesStore();
   const { addressPrefix } = useNetworkConfig();
   const navigate = useNavigate();
   const { values, setFieldValue, touched, setTouched } = useFormikContext<RoleFormValues>();
@@ -154,6 +42,12 @@ export function SafeRoleEditDetailsPage() {
   if (!safe?.address) return null;
   if (hatEditingId === undefined) return null;
 
+  const hatIndex = values.hats.findIndex(h => h.id === hatEditingId);
+  if (hatIndex === undefined) return null;
+
+  const role = values.hats[hatIndex];
+  if (!role) return null;
+
   const goBackToRolesEdit = () => {
     backupRoleEditing.current = values.roleEditing;
     backupTouched.current = touched.roleEditing;
@@ -169,184 +63,67 @@ export function SafeRoleEditDetailsPage() {
     }, 50);
   };
 
-  const paymentIndex = values.roleEditing?.roleEditingPaymentIndex;
-  const streamId =
-    paymentIndex !== undefined ? values.roleEditing?.payments?.[paymentIndex]?.streamId : undefined;
+  const handleRemoveRole = () => {
+    const editedRole: EditedRole = {
+      fieldNames: [],
+      status: EditBadgeStatus.Removed,
+    };
 
-  const goBackToRoleEdit = () => {
-    if (!values.roleEditing?.payments || paymentIndex === undefined || !hatEditingId) return;
-    const isExistingPayment = !!streamId ? getPayment(hatEditingId, streamId) : undefined;
-    // if payment is new, and unedited, remove it
-    if (
-      paymentIndex === values.roleEditing.payments.length - 1 &&
-      !values.roleEditing.editedRole &&
-      !isExistingPayment
-    ) {
-      setFieldValue(
-        'roleEditing.payments',
-        values.roleEditing.payments.filter((_, index) => index !== paymentIndex),
-      );
+    if (hatIndex !== -1) {
+      if (role?.editedRole?.status === EditBadgeStatus.New) {
+        setFieldValue(
+          'hats',
+          values.hats.filter(h => h.id !== hatEditingId),
+        );
+      } else {
+        setFieldValue(`hats.${hatIndex}`, { ...values.hats[hatIndex], editedRole });
+      }
     }
 
+    setFieldValue('roleEditing', undefined);
     setFieldValue('newRoleTerm', undefined);
-    setTimeout(() => {
-      setFieldValue('roleEditing.roleEditingPaymentIndex', undefined);
-    }, 200);
+    setTimeout(() => goBackToRolesEdit(), 50);
   };
 
-  const goBackText = t(
-    paymentIndex === undefined ? 'editRole' : streamId ? 'payments' : 'addPayment',
-  );
-
   return (
     <>
-      {blocker.state === 'blocked' && (
-        <>
-          <Hide above="md">
-            <DraggableDrawer
-              isOpen
-              onClose={() => {}}
-              onOpen={() => {}}
-              headerContent={null}
-              initialHeight="23rem"
-              closeOnOverlayClick={false}
-            >
-              <UnsavedChangesWarningContent
-                onDiscard={blocker.proceed}
-                onKeepEditing={() => {
-                  setFieldValue('roleEditing', backupRoleEditing.current);
-                  setFieldValue('newRoleTerm', backupNewRoleTerm.current);
-                  setTouched({ roleEditing: backupTouched.current });
-                  blocker.reset();
-                }}
-              />
-            </DraggableDrawer>
-          </Hide>
-          <Hide below="md">
-            <ModalBase
-              isOpen
-              onClose={() => {}}
-            >
-              <UnsavedChangesWarningContent
-                onDiscard={blocker.proceed}
-                onKeepEditing={() => {
-                  setFieldValue('roleEditing', backupRoleEditing.current);
-                  setFieldValue('newRoleTerm', backupNewRoleTerm.current);
-                  setTouched({ roleEditing: backupTouched.current });
-                  blocker.reset();
-                }}
-              />
-            </ModalBase>
-          </Hide>
-        </>
-      )}
       <FieldArray name="hats">
         {({ push }: { push: (roleHatFormValue: RoleHatFormValue) => void }) => (
           <>
-            <Show below="md">
-              <Portal>
-                <Box
-                  position="fixed"
-                  top={0}
-                  h="100vh"
-                  w="full"
-                  bg="neutral-1"
-                  px="1rem"
-                  pt={headerHeight}
-                  overflow="scroll"
-                >
-                  <Flex
-                    justifyContent="space-between"
-                    alignItems="center"
-                    my="1.75rem"
-                  >
-                    <Button
-                      variant="tertiary"
-                      gap="0.5rem"
-                      alignItems="center"
-                      aria-label={goBackText}
-                      onClick={paymentIndex === undefined ? goBackToRolesEdit : goBackToRoleEdit}
-                      color="neutral-8"
-                    >
-                      <Icon
-                        as={ArrowLeft}
-                        boxSize="1.5rem"
-                      />
-                      <Text textStyle="heading-small">{goBackText}</Text>
-                    </Button>
-                    {paymentIndex === undefined && (
-                      <Box position="relative">
-                        <EditRoleMenu
-                          hatId={hatEditingId}
-                          onRemove={goBackToRolesEdit}
-                        />
-                      </Box>
-                    )}
-                  </Flex>
-                  <Box pb="5rem">
-                    <RoleFormTabs
-                      hatId={hatEditingId}
-                      pushRole={push}
-                      blocker={blocker}
-                    />
+            <PageHeader
+              breadcrumbs={[
+                {
+                  terminus: t('roles'),
+                  path: DAO_ROUTES.roles.relative(addressPrefix, safe.address),
+                },
+                {
+                  terminus: t('editRoles'),
+                  path: DAO_ROUTES.rolesEdit.relative(addressPrefix, safe.address),
+                },
+                {
+                  terminus: role.name ?? t('new'),
+                  path: '',
+                },
+              ]}
+              buttonProps={{
+                variant: 'danger',
+                children: t('deleteRole'),
+                size: 'sm',
+                gap: 0,
+                leftIcon: (
+                  <Box mr="-0.25rem">
+                    <Trash size="1rem" />
                   </Box>
-                </Box>
-              </Portal>
-            </Show>
-            <Show above="md">
-              <Drawer
-                isOpen
-                placement="right"
-                onClose={goBackToRolesEdit}
-              >
-                <DrawerOverlay
-                  bg={BACKGROUND_SEMI_TRANSPARENT}
-                  backdropFilter="auto"
-                  backdropBlur="10px"
-                />
-                <DrawerContent
-                  minW="50%"
-                  bg="neutral-2"
-                  pt="1rem"
-                >
-                  <DrawerBody h="100vh">
-                    <Flex
-                      justifyContent="space-between"
-                      my="1rem"
-                    >
-                      <Flex
-                        gap="1rem"
-                        alignItems="center"
-                      >
-                        <IconButton
-                          variant="tertiary"
-                          size="icon-sm"
-                          aria-label={goBackText}
-                          icon={<ArrowLeft size="1.5rem" />}
-                          onClick={
-                            paymentIndex === undefined ? goBackToRolesEdit : goBackToRoleEdit
-                          }
-                        />
-                        <Text color="neutral-8">{goBackText}</Text>
-                      </Flex>
-                      {paymentIndex === undefined && (
-                        <Box position="relative">
-                          <EditRoleMenu
-                            hatId={hatEditingId}
-                            onRemove={goBackToRolesEdit}
-                          />
-                        </Box>
-                      )}
-                    </Flex>
-                    <RoleFormTabs
-                      hatId={hatEditingId}
-                      pushRole={push}
-                      blocker={blocker}
-                    />
-                  </DrawerBody>
-                </DrawerContent>
-              </Drawer>
-            </Show>
+                ),
+                onClick: handleRemoveRole,
+              }}
+            />
+
+            <RoleFormTabs
+              hatId={hatEditingId}
+              pushRole={push}
+              blocker={blocker}
+            />
           </>
         )}
       </FieldArray>
diff --git a/src/router.tsx b/src/router.tsx
index e15ff64bb..f17ec215c 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -18,6 +18,7 @@ import { SafeProposalCreatePage } from './pages/dao/proposals/new/SafeProposalCr
 import { SafeSablierProposalCreatePage } from './pages/dao/proposals/new/sablier/SafeSablierProposalCreatePage';
 import { SafeRolesPage } from './pages/dao/roles/SafeRolesPage';
 import { SafeRoleDetailsPage } from './pages/dao/roles/details/SafeRoleDetailsPage';
+import SafeRolesEditFormikPageWrapper from './pages/dao/roles/edit/SafeRolesEditFormikPageWrapper';
 import { SafeRolesEditPage } from './pages/dao/roles/edit/SafeRolesEditPage';
 import { SafeRoleEditDetailsPage } from './pages/dao/roles/edit/details/SafeRoleEditDetailsPage';
 import { SafeRolesEditProposalSummaryPage } from './pages/dao/roles/edit/summary/SafeRolesEditProposalSummaryPage';
@@ -92,8 +93,12 @@ export const router = (addressPrefix: string, daoAddress: string | undefined) =>
             },
             {
               path: DAO_ROUTES.rolesEdit.path,
-              element: <SafeRolesEditPage />,
+              element: <SafeRolesEditFormikPageWrapper />,
               children: [
+                {
+                  index: true,
+                  element: <SafeRolesEditPage />,
+                },
                 {
                   path: 'details',
                   element: <SafeRoleEditDetailsPage />,