diff --git a/front/.storybook/preview-head.html b/front/.storybook/preview-head.html
index 206362bfb..5d0269ace 100644
--- a/front/.storybook/preview-head.html
+++ b/front/.storybook/preview-head.html
@@ -6,4 +6,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+html {
+  font-size: 13px;
+}
 </style>
\ No newline at end of file
diff --git a/front/src/modules/ui/components/buttons/IconButton.tsx b/front/src/modules/ui/components/buttons/IconButton.tsx
index 1de760c02..75daa114c 100644
--- a/front/src/modules/ui/components/buttons/IconButton.tsx
+++ b/front/src/modules/ui/components/buttons/IconButton.tsx
@@ -20,7 +20,7 @@ const StyledIconButton = styled.button`
 
   &:disabled {
     background: ${(props) => props.theme.quaternaryBackground};
-    color: ${(props) => props.theme.text80};
+    color: ${(props) => props.theme.text40};
     cursor: default;
   }
 `;
diff --git a/front/src/modules/users/components/Avatar.tsx b/front/src/modules/users/components/Avatar.tsx
index 317e4637b..f92d0d5e9 100644
--- a/front/src/modules/users/components/Avatar.tsx
+++ b/front/src/modules/users/components/Avatar.tsx
@@ -18,38 +18,16 @@ export const StyledAvatar = styled.div<Omit<OwnProps, 'placeholder'>>`
       : 'none'};
   background-image: url(${(props) =>
     isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
-  background-image: url(${(props) =>
-    isNonEmptyString(props.avatarUrl) ? props.avatarUrl : 'none'});
-  background-position: center center;
-  background-repeat: no-repeat;
   background-size: cover;
   border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
-  border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
-  display: flex;
-  height: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-
-  justify-content: center;
-  width: ${(props) => props.size}px;
-
-  width: ${(props) => props.size}px;
-`;
-
-type StyledPlaceholderLetterProps = {
-  size: number;
-};
-
-export const StyledPlaceholderLetter = styled.div<StyledPlaceholderLetterProps>`
-  align-items: center;
   color: ${(props) => props.theme.text80};
-
   display: flex;
-  font-size: 12px;
 
-  font-weight: 500;
+  font-size: ${(props) => props.theme.fontSizeSmall};
+  font-weight: ${(props) => props.theme.fontWeightMedium};
   height: ${(props) => props.size}px;
-  justify-content: center;
 
+  justify-content: center;
   width: ${(props) => props.size}px;
 `;
 
@@ -63,11 +41,7 @@ export function Avatar({
 
   return (
     <StyledAvatar avatarUrl={avatarUrl} size={size} type={type}>
-      {noAvatarUrl && (
-        <StyledPlaceholderLetter size={size}>
-          {placeholder[0]?.toLocaleUpperCase()}
-        </StyledPlaceholderLetter>
-      )}
+      {noAvatarUrl && placeholder[0]?.toLocaleUpperCase()}
     </StyledAvatar>
   );
 }
diff --git a/front/src/modules/users/components/__stories__/Avatar.stories.tsx b/front/src/modules/users/components/__stories__/Avatar.stories.tsx
index 1685ba1f0..833f827b3 100644
--- a/front/src/modules/users/components/__stories__/Avatar.stories.tsx
+++ b/front/src/modules/users/components/__stories__/Avatar.stories.tsx
@@ -12,7 +12,8 @@ const meta: Meta<typeof Avatar> = {
 export default meta;
 type Story = StoryObj<typeof Avatar>;
 
-const avatarUrl = 'http://placekitten.com/300/300';
+const avatarUrl =
+  'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=';
 
 export const Rounded: Story = {
   render: getRenderWrapperForComponent(
diff --git a/infra/dev/Makefile b/infra/dev/Makefile
index 24c85c8fb..d07f8317f 100644
--- a/infra/dev/Makefile
+++ b/infra/dev/Makefile
@@ -17,6 +17,9 @@ sh:
 front-start:
 	@docker-compose exec twenty-dev sh -c "cd /app/front && yarn start"
 
+front-lint:
+	@docker-compose exec twenty-dev sh -c "cd /app/front && yarn lint"
+
 front-test:
 	@docker-compose exec twenty-dev sh -c "cd /app/front && yarn test"