diff --git a/backend/chainlit/socket.py b/backend/chainlit/socket.py
index b3075cccf7..702124305a 100644
--- a/backend/chainlit/socket.py
+++ b/backend/chainlit/socket.py
@@ -151,7 +151,7 @@ def ask_user_fn(data, timeout):
             data_layer.create_user_session(
                 id=session_id,
                 started_at=datetime.utcnow().isoformat(),
-                anon_user_id=anon_user_identifier,
+                anon_user_id=anon_user_identifier if not user else None,
                 user_id=user.identifier if user else None,
             )
         )
diff --git a/cypress/e2e/action/spec.cy.ts b/cypress/e2e/action/spec.cy.ts
index f7db198384..e10d4a7afb 100644
--- a/cypress/e2e/action/spec.cy.ts
+++ b/cypress/e2e/action/spec.cy.ts
@@ -7,7 +7,7 @@ describe('Action', () => {
 
   it('should correctly execute and display actions', () => {
     // Click on "first action"
-    cy.get('#first-action').should('be.visible');
+    cy.get('#first-action').should('exist');
     cy.get('#first-action').click();
     cy.get('.step').should('have.length', 3);
     cy.get('.step')
@@ -15,7 +15,7 @@ describe('Action', () => {
       .should('contain', 'Thanks for pressing: first-action');
 
     // Click on "test action"
-    cy.get("[id='test-action']").should('be.visible');
+    cy.get("[id='test-action']").should('exist');
     cy.get("[id='test-action']").click();
     cy.get('.step').should('have.length', 4);
     cy.get('.step').eq(3).should('contain', 'Executed test action!');
@@ -24,7 +24,7 @@ describe('Action', () => {
     cy.wait(100);
 
     // Click on "removable action"
-    cy.get("[id='removable-action']").should('be.visible');
+    cy.get("[id='removable-action']").should('exist');
     cy.get("[id='removable-action']").click();
     cy.get('.step').should('have.length', 5);
     cy.get('.step').eq(4).should('contain', 'Executed removable action!');
@@ -33,13 +33,13 @@ describe('Action', () => {
     cy.wait(100);
 
     // Click on "multiple action one" in the action drawer, should remove the correct action button
-    cy.get("[id='actions-drawer-button']").should('be.visible');
+    cy.get("[id='actions-drawer-button']").should('exist');
     cy.get("[id='actions-drawer-button']").click();
     cy.get('.step').should('have.length', 5);
 
     cy.wait(100);
 
-    cy.get("[id='multiple-action-one']").should('be.visible');
+    cy.get("[id='multiple-action-one']").should('exist');
     cy.get("[id='multiple-action-one']").click();
     cy.get('.step')
       .eq(5)
@@ -51,7 +51,7 @@ describe('Action', () => {
     // Click on "multiple action two", should remove the correct action button
     cy.get('.step').should('have.length', 6);
     cy.get("[id='actions-drawer-button']").click();
-    cy.get("[id='multiple-action-two']").should('be.visible');
+    cy.get("[id='multiple-action-two']").should('exist');
     cy.get("[id='multiple-action-two']").click();
     cy.get('.step')
       .eq(6)
@@ -61,7 +61,7 @@ describe('Action', () => {
     cy.wait(100);
 
     // Click on "all actions removed", should remove all buttons
-    cy.get("[id='all-actions-removed']").should('be.visible');
+    cy.get("[id='all-actions-removed']").should('exist');
     cy.get("[id='all-actions-removed']").click();
     cy.get('.step').eq(7).should('contain', 'All actions have been removed!');
     cy.get("[id='all-actions-removed']").should('not.exist');
diff --git a/cypress/e2e/avatar/spec.cy.ts b/cypress/e2e/avatar/spec.cy.ts
index 5585f3c8ac..41041559cd 100644
--- a/cypress/e2e/avatar/spec.cy.ts
+++ b/cypress/e2e/avatar/spec.cy.ts
@@ -8,11 +8,11 @@ describe('Avatar', () => {
   it('should be able to display avatars', () => {
     cy.get('.step').should('have.length', 5);
 
-    cy.get('.step').eq(0).find('.message-avatar').should('have.length', 0);
-    cy.get('.step').eq(1).find('.message-avatar').should('have.length', 1);
-    cy.get('.step').eq(2).find('.message-avatar').should('have.length', 0);
-    cy.get('.step').eq(3).find('.message-avatar').should('have.length', 1);
-    cy.get('.step').eq(4).find('.message-avatar').should('have.length', 1);
+    cy.get('.step').eq(0).find('img').should('have.length', 0);
+    cy.get('.step').eq(1).find('img').should('have.length', 1);
+    cy.get('.step').eq(2).find('img').should('have.length', 0);
+    cy.get('.step').eq(3).find('img').should('have.length', 1);
+    cy.get('.step').eq(4).find('img').should('have.length', 1);
 
     cy.get('.element-link').should('have.length', 0);
   });
diff --git a/frontend/src/assets/chevronLeft.tsx b/frontend/src/assets/chevronLeft.tsx
new file mode 100644
index 0000000000..1e90b49bb4
--- /dev/null
+++ b/frontend/src/assets/chevronLeft.tsx
@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const ChevronLeftIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m11 17-5-5 5-5" />
+        <path d="m18 17-5-5 5-5" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default ChevronLeftIcon;
diff --git a/frontend/src/assets/chevronRight.tsx b/frontend/src/assets/chevronRight.tsx
new file mode 100644
index 0000000000..2d8fdde81e
--- /dev/null
+++ b/frontend/src/assets/chevronRight.tsx
@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const ChevronRightIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m6 17 5-5-5-5" />
+        <path d="m13 17 5-5-5-5" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default ChevronRightIcon;
diff --git a/frontend/src/assets/chevronUp.tsx b/frontend/src/assets/chevronUp.tsx
new file mode 100644
index 0000000000..31eea42b75
--- /dev/null
+++ b/frontend/src/assets/chevronUp.tsx
@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const ChevronUpIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m17 11-5-5-5 5" />
+        <path d="m17 18-5-5-5 5" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default ChevronUpIcon;
diff --git a/frontend/src/assets/user.tsx b/frontend/src/assets/user.tsx
new file mode 100644
index 0000000000..e7b031bfcd
--- /dev/null
+++ b/frontend/src/assets/user.tsx
@@ -0,0 +1,22 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const UserIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon>
+      <svg
+        {...props}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+        <circle cx="12" cy="7" r="4" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default UserIcon;
diff --git a/frontend/src/components/atoms/buttons/userButton/avatar.tsx b/frontend/src/components/atoms/buttons/userButton/avatar.tsx
index 50dacffe0b..2de275f29a 100644
--- a/frontend/src/components/atoms/buttons/userButton/avatar.tsx
+++ b/frontend/src/components/atoms/buttons/userButton/avatar.tsx
@@ -2,6 +2,8 @@ import { useAuth } from 'api/auth';
 
 import { Avatar, Box } from '@mui/material';
 
+import UserIcon from 'assets/user';
+
 export default function UserAvatar() {
   const { user } = useAuth();
 
@@ -16,7 +18,7 @@ export default function UserAvatar() {
         }}
         src={user.metadata?.image || undefined}
       >
-        {user.identifier?.[0]}
+        {user.identifier?.[0]?.toUpperCase()}
       </Avatar>
     );
   } else {
@@ -29,7 +31,9 @@ export default function UserAvatar() {
             bgcolor: 'primary.main',
             color: 'primary.contrastText'
           }}
-        />
+        >
+          <UserIcon sx={{ width: 20 }} />
+        </Avatar>
       </Box>
     );
   }
diff --git a/frontend/src/components/organisms/chat/history/index.tsx b/frontend/src/components/organisms/chat/history/index.tsx
index 27a2ebd252..e347d81fc5 100644
--- a/frontend/src/components/organisms/chat/history/index.tsx
+++ b/frontend/src/components/organisms/chat/history/index.tsx
@@ -4,7 +4,6 @@ import { useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
 import AutoDelete from '@mui/icons-material/AutoDelete';
-import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 import {
   IconButton,
   Menu,
@@ -17,6 +16,8 @@ import {
 import { UserInput } from '@chainlit/react-client';
 import { grey } from '@chainlit/react-components/theme';
 
+import ChevronUpIcon from 'assets/chevronUp';
+
 import { inputHistoryState } from 'state/userInputHistory';
 
 interface Props {
@@ -247,7 +248,7 @@ export default function InputHistoryButton({ disabled, onClick }: Props) {
             onClick={() => toggleChatHistoryMenu(!inputHistory.open)}
             ref={ref}
           >
-            <KeyboardDoubleArrowUpIcon />
+            <ChevronUpIcon />
           </IconButton>
         </span>
       </Tooltip>
diff --git a/frontend/src/components/organisms/header.tsx b/frontend/src/components/organisms/header.tsx
index 5b34258873..4701ddfd09 100644
--- a/frontend/src/components/organisms/header.tsx
+++ b/frontend/src/components/organisms/header.tsx
@@ -154,7 +154,7 @@ const Header = memo(
             borderBottomColor: (theme) => theme.palette.divider
           }}
         >
-          <Stack alignItems="center" direction={'row'} gap={!matches ? 3 : 1}>
+          <Stack alignItems="center" direction={'row'} gap={!matches ? 3 : 0}>
             {!matches ? <Logo style={{ maxHeight: '25px' }} /> : null}
             <Nav
               matches={matches}
diff --git a/frontend/src/components/organisms/threadHistory/sidebar/TriggerButton.tsx b/frontend/src/components/organisms/threadHistory/sidebar/TriggerButton.tsx
index 5860b22124..1b09fc7d45 100644
--- a/frontend/src/components/organisms/threadHistory/sidebar/TriggerButton.tsx
+++ b/frontend/src/components/organisms/threadHistory/sidebar/TriggerButton.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-
 import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
 
 interface TriggerButtonProps {
   onClick: () => void;
@@ -16,26 +15,28 @@ const commonBoxStyles = {
 
 const TriggerButton = ({ onClick, open }: TriggerButtonProps): JSX.Element => {
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        padding: 2,
-        '&:hover div:nth-child(1)': {
-          transform: open ? 'rotate(15deg)' : 'rotate(-15deg)'
-        },
-        '&:hover div:nth-child(2)': {
-          transform: open ? 'rotate(-15deg)' : 'rotate(15deg)'
-        }
-      }}
-      onClick={onClick}
-    >
-      <Box sx={{ ...commonBoxStyles, marginTop: '0.25rem' }} />
-      <Box sx={{ ...commonBoxStyles, marginTop: '-0.25rem' }} />
-    </Box>
+    <Tooltip title={open ? 'Close sidebar' : 'Open sidebar'} placement="right">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          padding: 2,
+          '&:hover div:nth-child(1)': {
+            transform: open ? 'rotate(15deg)' : 'rotate(-15deg)'
+          },
+          '&:hover div:nth-child(2)': {
+            transform: open ? 'rotate(-15deg)' : 'rotate(15deg)'
+          }
+        }}
+        onClick={onClick}
+      >
+        <Box sx={{ ...commonBoxStyles, marginTop: '0.25rem' }} />
+        <Box sx={{ ...commonBoxStyles, marginTop: '-0.25rem' }} />
+      </Box>
+    </Tooltip>
   );
 };
 
diff --git a/frontend/src/components/organisms/threadHistory/sidebar/index.tsx b/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
index 0f2afd0ea5..76476a624f 100644
--- a/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
+++ b/frontend/src/components/organisms/threadHistory/sidebar/index.tsx
@@ -5,6 +5,7 @@ import uniqBy from 'lodash/uniqBy';
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
@@ -126,7 +127,7 @@ const _ThreadHistorySideBar = () => {
   }, []);
 
   return (
-    <>
+    <Box display="flex" position="relative">
       <Drawer
         className="chat-history-drawer"
         anchor="left"
@@ -146,7 +147,12 @@ const _ThreadHistorySideBar = () => {
             gap: 1,
             display: 'flex',
             padding: '0px 4px',
-            backgroundImage: 'none'
+            backgroundImage: 'none',
+            borderRight: 'none',
+            boxShadow: (theme) =>
+              theme.palette.mode === 'dark'
+                ? '0px 4px 20px 0px rgba(0, 0, 0, 0.20)'
+                : '0px 4px 20px 0px rgba(0, 0, 0, 0.05)'
           }
         }}
       >
@@ -181,12 +187,22 @@ const _ThreadHistorySideBar = () => {
         ) : null}
       </Drawer>
       {!isMobile ? (
-        <TriggerButton
-          onClick={() => setChatHistoryOpen(!settings.isChatHistoryOpen)}
-          open={settings.isChatHistoryOpen}
-        />
+        <Box
+          position="absolute"
+          sx={{
+            top: '50%',
+            transform: 'translateY(-100%)',
+            right: -30,
+            zIndex: 10
+          }}
+        >
+          <TriggerButton
+            onClick={() => setChatHistoryOpen(!settings.isChatHistoryOpen)}
+            open={settings.isChatHistoryOpen}
+          />
+        </Box>
       ) : null}
-    </>
+    </Box>
   );
 };
 
diff --git a/libs/react-components/hooks/useColors.tsx b/libs/react-components/hooks/useColors.tsx
index 0a5a43946b..001ae516a4 100644
--- a/libs/react-components/hooks/useColors.tsx
+++ b/libs/react-components/hooks/useColors.tsx
@@ -2,26 +2,26 @@ import { useCallback } from 'react';
 
 import { useIsDarkMode } from './useIsDarkMode';
 
-const lightColors = [
-  '#066DEB',
-  '#04857C',
-  '#FF9900',
-  '#F34F3C',
-  '#E86004',
-  '#2D8C26',
-  '#5E5BFE',
-  '#A132FE'
+const darkColors = [
+  '#fb923c',
+  '#facc15',
+  '#34d399',
+  '#38bdf8',
+  '#818cf8',
+  '#c084fc',
+  '#f472b6',
+  '#0ea5e9'
 ];
 
-const darkColors = [
-  '#67A0F8',
-  '#25B1A7',
-  '#FFC266',
-  '#F09691',
-  '#FA7F54',
-  '#59C654',
-  '#9695F8',
-  '#B889F8'
+const lightColors = [
+  '#ea580c',
+  '#ca8a04',
+  '#059669',
+  '#0284c7',
+  '#4f46e5',
+  '#9333ea',
+  '#db2777',
+  '#2563eb'
 ];
 
 const hashCode = (str: string) => {
diff --git a/libs/react-components/src/Code.tsx b/libs/react-components/src/Code.tsx
index d146af4f84..00b30342bc 100644
--- a/libs/react-components/src/Code.tsx
+++ b/libs/react-components/src/Code.tsx
@@ -93,8 +93,7 @@ const Code = ({ children, ...props }: any) => {
           alignItems: 'center',
           borderTopLeftRadius: '4px',
           borderTopRightRadius: '4px',
-          background: isDarkMode ? grey[900] : grey[200],
-          borderBottom: `1px solid ${grey[950]}`
+          background: isDarkMode ? grey[900] : grey[200]
         }}
       >
         <Typography variant="caption">{match?.[1] || 'Raw code'}</Typography>
diff --git a/libs/react-components/src/elements/Avatar.tsx b/libs/react-components/src/elements/Avatar.tsx
index 91cf33206c..b75aa3df2c 100644
--- a/libs/react-components/src/elements/Avatar.tsx
+++ b/libs/react-components/src/elements/Avatar.tsx
@@ -1,25 +1,28 @@
 import Avatar from '@mui/material/Avatar';
-import Tooltip from '@mui/material/Tooltip';
 
 import { type IAvatarElement } from 'client-types/';
 
 interface Props {
-  element: IAvatarElement;
   author: string;
+  bgColor?: string;
+  element?: IAvatarElement;
 }
 
-const AvatarElement = ({ element, author }: Props) => {
-  if (!element.url) {
-    return null;
-  }
-
-  return (
-    <Tooltip title={author}>
-      <span className={`message-avatar`}>
-        <Avatar sx={{ width: 38, height: 38, mt: '-4px' }} src={element.url} />
-      </span>
-    </Tooltip>
-  );
-};
+const AvatarElement = ({ element, author, bgColor }: Props) => (
+  <span className={`message-avatar`}>
+    <Avatar
+      sx={{
+        width: 26,
+        height: 26,
+        bgcolor: bgColor,
+        fontSize: '0.75rem',
+        mt: '-2px'
+      }}
+      src={element?.url}
+    >
+      {author[0]}
+    </Avatar>
+  </span>
+);
 
 export { AvatarElement };
diff --git a/libs/react-components/src/messages/Message.tsx b/libs/react-components/src/messages/Message.tsx
index c59921c8d0..b8bc3ce153 100644
--- a/libs/react-components/src/messages/Message.tsx
+++ b/libs/react-components/src/messages/Message.tsx
@@ -88,7 +88,7 @@ const Message = memo(
           <Stack
             id={`step-${message.id}`}
             direction="row"
-            ml={indent ? `${indent * (AUTHOR_BOX_WIDTH + 16)}px` : 0}
+            ml={indent ? `${indent * (AUTHOR_BOX_WIDTH + 12)}px` : 0}
             sx={{
               py: 2,
               borderBottom: (theme) =>
@@ -100,35 +100,30 @@ const Message = memo(
               overflowX: 'auto'
             }}
           >
-            <Author message={message} show={showAvatar} />
-            <Stack
-              alignItems="flex-start"
-              width={0}
-              flexGrow={1}
-              spacing={1}
-              minWidth={150}
-            >
-              <MessageContent
-                elements={elements}
-                message={message}
-                preserveSize={!!message.streaming || !defaultCollapseContent}
-                allowHtml={allowHtml}
-                latex={latex}
-              />
-              <DetailsButton
-                message={message}
-                opened={showDetails}
-                onClick={() => setShowDetails(!showDetails)}
-                loading={isRunning && isLast}
-              />
-              {!isRunning && isLast && isAsk && (
-                <AskUploadButton onError={onError} />
-              )}
-              {actions?.length ? (
-                <MessageActions message={message} actions={actions} />
-              ) : null}
-              <MessageButtons message={message} />
-            </Stack>
+            <Author message={message} show={showAvatar}>
+              <Stack alignItems="flex-start" minWidth={150}>
+                <MessageContent
+                  elements={elements}
+                  message={message}
+                  preserveSize={!!message.streaming || !defaultCollapseContent}
+                  allowHtml={allowHtml}
+                  latex={latex}
+                />
+                <DetailsButton
+                  message={message}
+                  opened={showDetails}
+                  onClick={() => setShowDetails(!showDetails)}
+                  loading={isRunning && isLast}
+                />
+                {!isRunning && isLast && isAsk && (
+                  <AskUploadButton onError={onError} />
+                )}
+                {actions?.length ? (
+                  <MessageActions message={message} actions={actions} />
+                ) : null}
+                <MessageButtons message={message} />
+              </Stack>
+            </Author>
           </Stack>
         </Box>
         {message.steps && showDetails && (
diff --git a/libs/react-components/src/messages/components/AskUploadButton.tsx b/libs/react-components/src/messages/components/AskUploadButton.tsx
index d99905416d..28d067da8f 100644
--- a/libs/react-components/src/messages/components/AskUploadButton.tsx
+++ b/libs/react-components/src/messages/components/AskUploadButton.tsx
@@ -86,7 +86,8 @@ const AskUploadChildButton = ({
         width: '100%',
         borderRadius: 1,
         backgroundColor: (theme) => theme.palette.background.paper,
-        boxSizing: 'border-box'
+        boxSizing: 'border-box',
+        mt: 1
       }}
       direction="row"
       alignItems="center"
diff --git a/libs/react-components/src/messages/components/Author.tsx b/libs/react-components/src/messages/components/Author.tsx
index 7653738416..b50debda64 100644
--- a/libs/react-components/src/messages/components/Author.tsx
+++ b/libs/react-components/src/messages/components/Author.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { AvatarElement } from 'src/elements/Avatar';
 
 import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 import { useColorForName } from 'hooks/useColors';
@@ -15,58 +15,64 @@ import { MessageTime } from './MessageTime';
 interface Props {
   message: IStep;
   show?: boolean;
+  children?: React.ReactNode;
 }
 
-export const AUTHOR_BOX_WIDTH = 70;
+export const AUTHOR_BOX_WIDTH = 26;
 
-const Author = ({ message, show }: Props) => {
+const Author = ({ message, show, children }: Props) => {
   const context = useContext(MessageContext);
   const getColorForName = useColorForName(context.uiName);
 
-  const author = message.name;
   const isUser = message.type === 'user_message';
+  const author = isUser ? 'You' : message.name;
 
   const avatarEl = context.avatars.find((e) => e.name === author);
-
-  const avatar = show && avatarEl && (
-    <AvatarElement element={avatarEl} author={author} />
-  );
-
-  const name = show && (
-    <Tooltip title={author}>
-      <Typography
-        noWrap
-        lineHeight="24px"
-        sx={{
-          mb: '-5px',
-          width: AUTHOR_BOX_WIDTH,
-          fontSize: '12px',
-          fontWeight: 500,
-          color: getColorForName(author, isUser, message.isError)
-        }}
-      >
-        {author}
-      </Typography>
-    </Tooltip>
-  );
-
-  const display = avatar || name;
-
-  return (
-    <>
-      <Box width={AUTHOR_BOX_WIDTH} pr={2}>
-        {display}
-        <MessageTime timestamp={message.createdAt} />
-      </Box>
+  const avatar = show ? (
+    <Stack alignItems="center" gap={1}>
+      <AvatarElement
+        element={avatarEl}
+        author={author}
+        bgColor={getColorForName(author, isUser, message.isError)}
+      />
       {(!!message.indent || message.parentId) && (
         <Box
           width="2px"
+          height="100%"
           borderRadius="13px"
           bgcolor={getColorForName(author, isUser)}
-          mr={2}
         />
       )}
-    </>
+    </Stack>
+  ) : (
+    <Box width={AUTHOR_BOX_WIDTH} />
+  );
+  const name = (
+    <Stack direction="row" gap={1} alignItems="center">
+      {show ? (
+        <Typography
+          noWrap
+          sx={{
+            fontSize: '1rem',
+            fontWeight: 600,
+            lineHeight: 'unset'
+          }}
+        >
+          {author}
+        </Typography>
+      ) : null}
+      <MessageTime timestamp={message.createdAt} />
+    </Stack>
+  );
+
+  return (
+    <Stack direction="row" gap={1.5} width="100%">
+      {avatar}
+      <Stack gap={1} width={`calc(100% - ${AUTHOR_BOX_WIDTH + 12}px)`}>
+        {name}
+        {children}
+      </Stack>
+    </Stack>
   );
 };
 
diff --git a/libs/react-components/src/messages/components/DetailsButton.tsx b/libs/react-components/src/messages/components/DetailsButton.tsx
index d036b0b335..5a7fbb8f06 100644
--- a/libs/react-components/src/messages/components/DetailsButton.tsx
+++ b/libs/react-components/src/messages/components/DetailsButton.tsx
@@ -59,7 +59,9 @@ const DetailsButton = ({ message, opened, onClick, loading }: Props) => {
 
   return (
     <GreyButton
+      size="small"
       id={id}
+      sx={{ marginTop: 1 }}
       color="primary"
       startIcon={
         loading ? <CircularProgress color="inherit" size={16} /> : undefined
diff --git a/libs/react-components/src/messages/components/MessageTime.tsx b/libs/react-components/src/messages/components/MessageTime.tsx
index e47a35f2c6..f419dfa22d 100644
--- a/libs/react-components/src/messages/components/MessageTime.tsx
+++ b/libs/react-components/src/messages/components/MessageTime.tsx
@@ -17,7 +17,12 @@ const MessageTime = ({ timestamp }: Props) => {
   }
   const date = new Date(timestamp).toLocaleTimeString(undefined, dateOptions);
   return (
-    <Typography lineHeight="24px" color={grey[500]} fontSize="11px">
+    <Typography
+      sx={{ mt: '1px' }}
+      color={grey[500]}
+      fontSize="12px"
+      lineHeight="unset"
+    >
       {date}
     </Typography>
   );