diff --git a/packages/twenty-front/src/modules/activities/components/ActivityCreationDate.tsx b/packages/twenty-front/src/modules/activities/components/ActivityCreationDate.tsx
new file mode 100644
index 000000000..6c6f5e9b5
--- /dev/null
+++ b/packages/twenty-front/src/modules/activities/components/ActivityCreationDate.tsx
@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { Activity } from '@/activities/types/Activity';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+
+const StyledCreationDisplay = styled.span`
+ color: ${({ theme }) => theme.font.color.light};
+ display: flex;
+ font-size: ${({ theme }) => theme.font.size.md};
+ user-select: none;
+ width: 100%;
+`;
+
+type ActivityCreationDateProps = {
+ activityId: string;
+};
+
+export const ActivityCreationDate = ({
+ activityId,
+}: ActivityCreationDateProps) => {
+ const [activityInStore] = useRecoilState(recordStoreFamilyState(activityId));
+ const activity = activityInStore as Activity;
+
+ const beautifiedDate = activity.createdAt
+ ? beautifyPastDateRelativeToNow(activity.createdAt)
+ : null;
+
+ const authorName = activity.author?.name
+ ? `${activity.author.name.firstName} ${activity.author.name.lastName}`
+ : null;
+
+ if (!activity.createdAt || !authorName) {
+ return <>>;
+ }
+
+ return (
+
+ Created {beautifiedDate} by {authorName}
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx
index cad9c66e2..b560a76f3 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityEditor.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor';
import { ActivityBodyEffect } from '@/activities/components/ActivityBodyEffect';
import { ActivityComments } from '@/activities/components/ActivityComments';
+import { ActivityCreationDate } from '@/activities/components/ActivityCreationDate';
import { ActivityEditorFields } from '@/activities/components/ActivityEditorFields';
import { ActivityTitleEffect } from '@/activities/components/ActivityTitleEffect';
import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown';
@@ -31,6 +32,13 @@ const StyledUpperPartContainer = styled.div`
justify-content: flex-start;
`;
+const StyledTitleContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: ${({ theme }) => theme.spacing(3)};
+`;
+
const StyledTopContainer = styled.div`
align-items: flex-start;
align-self: stretch;
@@ -62,7 +70,10 @@ export const ActivityEditor = ({
-
+
+
+
+
diff --git a/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx b/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
index eaa50a218..8e0a12c73 100644
--- a/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
+++ b/packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivity.tsx
@@ -21,7 +21,7 @@ type RightDrawerActivityProps = {
export const RightDrawerActivity = ({
activityId,
- showComment = true,
+ showComment = false,
fillTitleFromBody = false,
}: RightDrawerActivityProps) => {
return (
diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
index 0067d6cef..51885dd18 100644
--- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx
@@ -1,6 +1,6 @@
import { useLocation, useNavigate } from 'react-router-dom';
import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconCheckbox, IconInbox, IconSearch, IconSettings } from 'twenty-ui';
+import { IconCheckbox, IconSearch, IconSettings } from 'twenty-ui';
import { CurrentUserDueTaskCountEffect } from '@/activities/tasks/components/CurrentUserDueTaskCountEffect';
import { currentUserDueTaskCountState } from '@/activities/tasks/states/currentUserTaskCountState';
@@ -36,12 +36,6 @@ export const MainNavigationDrawerItems = () => {
onClick={toggleCommandMenu}
keyboard={['⌘', 'K']}
/>
-
{
diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx
index fc5138359..97a737a40 100644
--- a/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx
+++ b/packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx
@@ -30,6 +30,16 @@ const StyledEditor = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-style: normal !important;
}
+ & .editor .bn-inline-content:has(> .ProseMirror-trailingBreak):before {
+ font-style: normal;
+ }
+ & .mantine-ActionIcon-icon {
+ width: 20px;
+ }
+ & .bn-container .bn-drag-handle {
+ width: 20px;
+ height: 20px;
+ }
`;
export const BlockEditor = ({