diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts
index ff7ef5bbb..b18141ab0 100644
--- a/cypress/e2e/item/settings/itemSettings.cy.ts
+++ b/cypress/e2e/item/settings/itemSettings.cy.ts
@@ -398,14 +398,11 @@ describe('Item Settings', () => {
         cy.visit(buildItemSettingsPath(itemId));
 
         // default value
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID} + input`).should(
-          'have.value',
-          MaxWidth.ExtraLarge,
-        );
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).should('have.value', 'default');
 
         const newMaxWidth = MaxWidth.Small;
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).click();
-        cy.get(`[role="option"][data-value="${newMaxWidth}"]`).click();
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).select(newMaxWidth);
+        // cy.get(`[role="option"][data-value="${newMaxWidth}"]`).click();
 
         cy.wait('@editItem').then(
           ({
@@ -432,7 +429,7 @@ describe('Item Settings', () => {
             },
           },
           settings: {
-            maxWidth: MaxWidth.ExtraLarge,
+            maxWidth: MaxWidth.Large,
           },
         });
         cy.setUpApi({ items: [FILE] });
@@ -440,7 +437,7 @@ describe('Item Settings', () => {
 
         cy.visit(buildItemSettingsPath(itemId));
 
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID} + input`).should(
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).should(
           'have.value',
           FILE.settings.maxWidth,
         );
diff --git a/package.json b/package.json
index 89c450f14..1eeeb69ac 100644
--- a/package.json
+++ b/package.json
@@ -22,9 +22,9 @@
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.15.0",
     "@graasp/query-client": "3.14.0",
-    "@graasp/sdk": "4.15.0",
-    "@graasp/translations": "1.28.0",
-    "@graasp/ui": "4.20.0",
+    "@graasp/sdk": "4.15.1",
+    "@graasp/translations": "1.30.3",
+    "@graasp/ui": "4.20.2",
     "@mui/icons-material": "5.15.19",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.19",
diff --git a/src/components/item/ItemContent.tsx b/src/components/item/ItemContent.tsx
index d0cf4328e..9ba05c081 100644
--- a/src/components/item/ItemContent.tsx
+++ b/src/components/item/ItemContent.tsx
@@ -1,6 +1,6 @@
 import { useOutletContext } from 'react-router-dom';
 
-import { Container, Skeleton, styled } from '@mui/material';
+import { Container, Skeleton, Stack, styled } from '@mui/material';
 
 import { Api } from '@graasp/query-client';
 import {
@@ -50,12 +50,13 @@ import Items from '../main/Items';
 import NewItemButton from '../main/NewItemButton';
 import { OutletType } from '../pages/item/type';
 import { useItemSearch } from './ItemSearch';
+import FileAlignmentSetting from './settings/file/FileAlignmentSetting';
+import FileMaxWidthSetting from './settings/file/FileMaxWidthSetting';
+import { SettingVariant } from './settings/settingTypes';
 
 const { useChildren, useFileContentUrl, useEtherpad } = hooks;
 
 const StyledContainer = styled(Container)(() => ({
-  textAlign: 'center',
-  height: '80vh',
   flexGrow: 1,
 }));
 
@@ -72,12 +73,18 @@ const FileContent = ({
   if (fileUrl) {
     return (
       <StyledContainer>
-        <FileItem
-          fileUrl={fileUrl}
-          id={buildFileItemId(item.id)}
-          item={item}
-          pdfViewerLink={buildPdfViewerLink(GRAASP_ASSETS_URL)}
-        />
+        <Stack direction="column" alignItems="center" gap={2} width="100%">
+          <Stack direction="row" gap={1}>
+            <FileMaxWidthSetting item={item} variant={SettingVariant.Button} />
+            <FileAlignmentSetting item={item} variant={SettingVariant.Button} />
+          </Stack>
+          <FileItem
+            fileUrl={fileUrl}
+            id={buildFileItemId(item.id)}
+            item={item}
+            pdfViewerLink={buildPdfViewerLink(GRAASP_ASSETS_URL)}
+          />
+        </Stack>
       </StyledContainer>
     );
   }
diff --git a/src/components/item/form/DescriptionPlacementForm.tsx b/src/components/item/form/DescriptionPlacementForm.tsx
index 73af54479..377b3efee 100644
--- a/src/components/item/form/DescriptionPlacementForm.tsx
+++ b/src/components/item/form/DescriptionPlacementForm.tsx
@@ -6,6 +6,8 @@ import {
   DiscriminatedItem,
 } from '@graasp/sdk';
 
+import { CornerDownRightIcon, CornerUpRightIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '@/config/i18n';
 import {
   ITEM_SETTING_DESCRIPTION_PLACEMENT_SELECT_ID,
@@ -31,32 +33,37 @@ const DescriptionPlacementForm = ({
   const handlePlacementChanged = (placement: string): void => {
     onPlacementChanged(placement as DescriptionPlacementType);
   };
+  const descriptionPlacement =
+    updatedProperties.settings?.descriptionPlacement ?? DEFAULT_PLACEMENT;
 
   return (
     <ItemSettingProperty
       title={t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE)}
+      icon={
+        descriptionPlacement === DescriptionPlacement.ABOVE ? (
+          <CornerUpRightIcon />
+        ) : (
+          <CornerDownRightIcon />
+        )
+      }
+      valueText={t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_HELPER, {
+        placement: t(descriptionPlacement).toLowerCase(),
+      })}
       inputSetting={
         <Select
           id={ITEM_SETTING_DESCRIPTION_PLACEMENT_SELECT_ID}
-          value={
-            updatedProperties.settings?.descriptionPlacement ??
-            DEFAULT_PLACEMENT
-          }
+          value={descriptionPlacement}
           onChange={(e) => handlePlacementChanged(e.target.value)}
           size="small"
         >
-          <MenuItem
-            id={buildDescriptionPlacementId(DescriptionPlacement.ABOVE)}
-            value={DescriptionPlacement.ABOVE}
-          >
-            {t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_ABOVE)}
-          </MenuItem>
-          <MenuItem
-            id={buildDescriptionPlacementId(DescriptionPlacement.BELOW)}
-            value={DescriptionPlacement.BELOW}
-          >
-            {t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_BELOW)}
-          </MenuItem>
+          {Object.values(DescriptionPlacement).map((placement) => (
+            <MenuItem
+              id={buildDescriptionPlacementId(placement)}
+              value={placement}
+            >
+              {t(placement)}
+            </MenuItem>
+          ))}
         </Select>
       }
     />
diff --git a/src/components/item/settings/AdminChatSettings.tsx b/src/components/item/settings/AdminChatSettings.tsx
index e009a4e1d..23c428f5e 100644
--- a/src/components/item/settings/AdminChatSettings.tsx
+++ b/src/components/item/settings/AdminChatSettings.tsx
@@ -1,5 +1,7 @@
 import { PackedItem, PermissionLevel } from '@graasp/sdk';
 
+import { MessageSquareTextIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '@/config/i18n';
 import { BUILDER } from '@/langs/constants';
 
@@ -28,6 +30,7 @@ const AdminChatSettings = ({ item }: Props): JSX.Element | null => {
     <ItemSettingProperty
       title={t(BUILDER.ITEM_SETTINGS_CHAT_SETTINGS_TITLE)}
       valueText={t(BUILDER.ITEM_SETTINGS_CLEAR_CHAT_EXPLANATION)}
+      icon={<MessageSquareTextIcon />}
       inputSetting={<ClearChatButton chatId={itemId} />}
     />
   );
diff --git a/src/components/item/settings/FileSettings.tsx b/src/components/item/settings/FileSettings.tsx
deleted file mode 100644
index 64c3fb430..000000000
--- a/src/components/item/settings/FileSettings.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { SelectChangeEvent } from '@mui/material';
-
-import { LocalFileItemType, MaxWidth, S3FileItemType } from '@graasp/sdk';
-import { Select } from '@graasp/ui';
-
-import { Expand as ExpandIcon } from 'lucide-react';
-
-import { useBuilderTranslation, useEnumsTranslation } from '@/config/i18n';
-import { mutations } from '@/config/queryClient';
-import { FILE_SETTING_MAX_WIDTH_ID } from '@/config/selectors';
-import { BUILDER } from '@/langs/constants';
-
-import ItemSettingProperty from './ItemSettingProperty';
-
-const FileSettings = ({
-  item,
-}: {
-  item: S3FileItemType | LocalFileItemType;
-}): JSX.Element => {
-  const { t: translateEnum } = useEnumsTranslation();
-  const { t: translateBuilder } = useBuilderTranslation();
-  const { mutate: editItem } = mutations.useEditItem();
-
-  const onChange = (e: SelectChangeEvent<MaxWidth>) => {
-    editItem({
-      id: item.id,
-      settings: { maxWidth: e.target.value as MaxWidth },
-    });
-  };
-
-  return (
-    <ItemSettingProperty
-      title={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
-      valueText={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
-      icon={<ExpandIcon />}
-      inputSetting={
-        <Select
-          id={FILE_SETTING_MAX_WIDTH_ID}
-          size="small"
-          values={Object.values(MaxWidth).map((s) => ({
-            text: translateEnum(s),
-            value: s,
-          }))}
-          onChange={onChange}
-          defaultValue={item.settings.maxWidth || MaxWidth.ExtraLarge}
-        />
-      }
-    />
-  );
-};
-
-export default FileSettings;
diff --git a/src/components/item/settings/ItemSettingProperty.tsx b/src/components/item/settings/ItemSettingProperty.tsx
index 1668c47a4..8cc6f92bb 100644
--- a/src/components/item/settings/ItemSettingProperty.tsx
+++ b/src/components/item/settings/ItemSettingProperty.tsx
@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 
 type Props = {
   title: string;
@@ -18,8 +18,8 @@ const ItemSettingProperty = ({
   <Stack>
     <Stack direction="row" alignItems="center" justifyContent="space-between">
       <Stack direction="row" alignItems="center" gap={1}>
-        {icon}
-        <Stack direction="column">
+        <Box flexShrink={0}>{icon}</Box>
+        <Stack direction="column" alignItems="flex-start">
           <Typography variant="body1" fontWeight="bold">
             {title}
           </Typography>
diff --git a/src/components/item/settings/ItemSettingsProperties.tsx b/src/components/item/settings/ItemSettingsProperties.tsx
index a70964381..094aa6fe4 100644
--- a/src/components/item/settings/ItemSettingsProperties.tsx
+++ b/src/components/item/settings/ItemSettingsProperties.tsx
@@ -21,9 +21,11 @@ import {
 import { BUILDER } from '@/langs/constants';
 
 import DescriptionPlacementForm from '../form/DescriptionPlacementForm';
-import FileSettings from './FileSettings';
 import ItemSettingCheckBoxProperty from './ItemSettingCheckBoxProperty';
 import LinkSettings from './LinkSettings';
+import FileAlignmentSetting from './file/FileAlignmentSetting';
+import FileMaxWidthSetting from './file/FileMaxWidthSetting';
+import { SettingVariant } from './settingTypes';
 
 type Props = {
   item: DiscriminatedItem;
@@ -64,7 +66,13 @@ const ItemSettingsProperties = ({ item }: Props): JSX.Element => {
         return <LinkSettings item={item} />;
       case ItemType.S3_FILE:
       case ItemType.LOCAL_FILE:
-        return <FileSettings item={item} />;
+        return (
+          <>
+            <FileMaxWidthSetting item={item} variant={SettingVariant.List} />
+            <FileAlignmentSetting item={item} variant={SettingVariant.List} />
+          </>
+        );
+
       case ItemType.APP:
         return (
           <ItemSettingCheckBoxProperty
diff --git a/src/components/item/settings/file/FileAlignmentSetting.tsx b/src/components/item/settings/file/FileAlignmentSetting.tsx
new file mode 100644
index 000000000..6d8d134f4
--- /dev/null
+++ b/src/components/item/settings/file/FileAlignmentSetting.tsx
@@ -0,0 +1,133 @@
+import { type MouseEvent } from 'react';
+
+import {
+  ToggleButton as MuiToggleButton,
+  Paper,
+  ToggleButtonGroup,
+  styled,
+  toggleButtonGroupClasses,
+} from '@mui/material';
+
+import {
+  Alignment,
+  AlignmentType,
+  LocalFileItemType,
+  S3FileItemType,
+} from '@graasp/sdk';
+import { DEFAULT_LIGHT_PRIMARY_COLOR } from '@graasp/ui';
+
+import {
+  AlignCenterIcon,
+  AlignCenterVerticalIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+} from 'lucide-react';
+
+import { useBuilderTranslation } from '@/config/i18n';
+import { mutations } from '@/config/queryClient';
+import { BUILDER } from '@/langs/constants';
+
+import ItemSettingProperty from '../ItemSettingProperty';
+import { SettingVariant, SettingVariantType } from '../settingTypes';
+
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  backgroundColor: 'white',
+  border: `1px solid ${theme.palette.divider}`,
+}));
+const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+  [`& .${toggleButtonGroupClasses.grouped}`]: {
+    margin: theme.spacing(0.5),
+    border: 0,
+    borderRadius: theme.shape.borderRadius,
+    [`&.${toggleButtonGroupClasses.disabled}`]: {
+      border: 0,
+    },
+  },
+}));
+const ToggleButton = styled(MuiToggleButton)(({ theme }) => ({
+  '&.Mui-selected': {
+    color: theme.palette.primary.main,
+    backgroundColor: DEFAULT_LIGHT_PRIMARY_COLOR.main,
+    '&:hover': {
+      backgroundColor: DEFAULT_LIGHT_PRIMARY_COLOR.dark,
+    },
+  },
+}));
+
+export const FileAlignmentSetting = ({
+  variant = SettingVariant.List,
+  item,
+}: {
+  variant: SettingVariantType;
+  item: S3FileItemType | LocalFileItemType;
+}): JSX.Element => {
+  const { t: translateBuilder } = useBuilderTranslation();
+  const { mutate: editItem } = mutations.useEditItem();
+
+  const onChangeAlignment = (
+    _e: MouseEvent<HTMLElement>,
+    value: AlignmentType,
+  ) => {
+    // only send an update when the value is not null, as this is sent when clicking a selected button
+    if (value !== null) {
+      editItem({
+        id: item.id,
+        settings: { alignment: value },
+      });
+    }
+  };
+
+  const { alignment } = item.settings;
+  const control = (
+    <StyledPaper elevation={0}>
+      <StyledToggleButtonGroup
+        value={alignment}
+        exclusive
+        onChange={onChangeAlignment}
+        aria-label={translateBuilder(BUILDER.SETTINGS_ALIGNMENT_ARIA_LABEL)}
+        size="small"
+      >
+        <ToggleButton
+          value={Alignment.Left}
+          aria-label={translateBuilder(
+            BUILDER.SETTINGS_ALIGNMENT_LEFT_ARIA_LABEL,
+          )}
+        >
+          <AlignLeftIcon />
+        </ToggleButton>
+        <ToggleButton
+          value={Alignment.Center}
+          aria-label={translateBuilder(
+            BUILDER.SETTINGS_ALIGNMENT_CENTER_ARIA_LABEL,
+          )}
+        >
+          <AlignCenterIcon />
+        </ToggleButton>
+        <ToggleButton
+          value={Alignment.Right}
+          aria-label={translateBuilder(
+            BUILDER.SETTINGS_ALIGNMENT_RIGHT_ARIA_LABEL,
+          )}
+        >
+          <AlignRightIcon />
+        </ToggleButton>
+      </StyledToggleButtonGroup>
+    </StyledPaper>
+  );
+  switch (variant) {
+    case SettingVariant.List:
+      return (
+        <ItemSettingProperty
+          title={translateBuilder(BUILDER.SETTINGS_ALIGNMENT_LABEL)}
+          valueText={translateBuilder(BUILDER.SETTINGS_ALIGNMENT_HELPER)}
+          icon={<AlignCenterVerticalIcon />}
+          inputSetting={control}
+        />
+      );
+    case SettingVariant.Button:
+    default:
+      return control;
+  }
+};
+
+export default FileAlignmentSetting;
diff --git a/src/components/item/settings/file/FileMaxWidthSetting.tsx b/src/components/item/settings/file/FileMaxWidthSetting.tsx
new file mode 100644
index 000000000..d42a09edb
--- /dev/null
+++ b/src/components/item/settings/file/FileMaxWidthSetting.tsx
@@ -0,0 +1,89 @@
+import { ChangeEvent } from 'react';
+
+import { styled } from '@mui/material';
+
+import { LocalFileItemType, MaxWidth, S3FileItemType } from '@graasp/sdk';
+
+import { ExpandIcon } from 'lucide-react';
+
+import { useBuilderTranslation, useEnumsTranslation } from '@/config/i18n';
+import { mutations } from '@/config/queryClient';
+import { FILE_SETTING_MAX_WIDTH_ID } from '@/config/selectors';
+import { BUILDER } from '@/langs/constants';
+
+import ItemSettingProperty from '../ItemSettingProperty';
+import { SettingVariant, SettingVariantType } from '../settingTypes';
+
+const StyledSelect = styled('select')(({ theme }) => ({
+  // A reset of styles, including removing the default dropdown arrow
+  // appearance: 'none',
+  // Additional resets for further consistency
+  backgroundColor: 'white',
+  margin: 0,
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  lineHeight: 'inherit',
+
+  // width: '100%',
+  minWidth: '15ch',
+  maxWidth: 'min-content',
+  height: theme.spacing(6),
+  cursor: 'pointer',
+  borderRadius: theme.spacing(0.5),
+  border: `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+}));
+
+export const FileMaxWidthSetting = ({
+  variant = SettingVariant.List,
+  item,
+}: {
+  variant: SettingVariantType;
+  item: S3FileItemType | LocalFileItemType;
+}): JSX.Element => {
+  const { t } = useBuilderTranslation();
+  const { t: translateEnum } = useEnumsTranslation();
+
+  const { mutate: editItem } = mutations.useEditItem();
+
+  const { maxWidth } = item.settings;
+
+  const onChangeMaxWidth = (e: ChangeEvent<HTMLSelectElement>) => {
+    editItem({
+      id: item.id,
+      settings: { maxWidth: e.target.value as MaxWidth },
+    });
+  };
+
+  const control = (
+    <StyledSelect
+      id={FILE_SETTING_MAX_WIDTH_ID}
+      onChange={onChangeMaxWidth}
+      value={maxWidth}
+    >
+      {/* option used when the maxWidth is not set */}
+      <option value={undefined} hidden>
+        {translateEnum('default')}
+      </option>
+      {Object.values(MaxWidth).map((s) => (
+        <option value={s}>{translateEnum(s)}</option>
+      ))}
+    </StyledSelect>
+  );
+
+  switch (variant) {
+    case SettingVariant.List:
+      return (
+        <ItemSettingProperty
+          title={t(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
+          valueText={t(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
+          icon={<ExpandIcon />}
+          inputSetting={control}
+        />
+      );
+    case SettingVariant.Button:
+    default:
+      return control;
+  }
+};
+export default FileMaxWidthSetting;
diff --git a/src/components/item/settings/settingTypes.ts b/src/components/item/settings/settingTypes.ts
new file mode 100644
index 000000000..1f40f7896
--- /dev/null
+++ b/src/components/item/settings/settingTypes.ts
@@ -0,0 +1,7 @@
+import { UnionOfConst } from '@graasp/sdk';
+
+export const SettingVariant = {
+  List: 'list',
+  Button: 'button',
+} as const;
+export type SettingVariantType = UnionOfConst<typeof SettingVariant>;
diff --git a/src/components/item/sharing/CreateItemMembershipForm.tsx b/src/components/item/sharing/CreateItemMembershipForm.tsx
index b5a241491..940e5a516 100644
--- a/src/components/item/sharing/CreateItemMembershipForm.tsx
+++ b/src/components/item/sharing/CreateItemMembershipForm.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react';
 
 import { ErrorOutline } from '@mui/icons-material';
 import {
-  Grid,
   IconButton,
+  Stack,
   TextField,
   TextFieldProps,
   Tooltip,
@@ -140,59 +140,43 @@ const CreateItemMembershipForm = ({
     }
   };
 
-  const renderInvitationStatus = () => (
-    <Tooltip
-      title={translateBuilder(BUILDER.SHARE_ITEM_FORM_INVITATION_TOOLTIP)}
+  return (
+    <Stack
+      id={CREATE_MEMBERSHIP_FORM_ID}
+      direction="row"
+      alignItems="center"
+      justifyContent="center"
+      spacing={1}
     >
-      <span>
-        <IconButton aria-label="status">
-          <ErrorOutline />
-        </IconButton>
-      </span>
-    </Tooltip>
-  );
-
-  const renderButton = () => {
-    const disabled = Boolean(error);
-    return (
+      <TextField
+        id={SHARE_ITEM_EMAIL_INPUT_ID}
+        variant="outlined"
+        label={translateBuilder(BUILDER.SHARE_ITEM_FORM_EMAIL_LABEL)}
+        helperText={error}
+        value={invitation.email}
+        onChange={onChangeEmail}
+        error={Boolean(error)}
+        sx={{ flexGrow: 1 }}
+      />
+      <ItemMembershipSelect
+        value={invitation.permission}
+        onChange={onChangePermission}
+      />
       <Button
         onClick={handleShare}
-        disabled={disabled}
+        disabled={Boolean(error)}
         id={SHARE_ITEM_SHARE_BUTTON_ID}
       >
         {translateBuilder(BUILDER.SHARE_ITEM_FORM_CONFIRM_BUTTON)}
       </Button>
-    );
-  };
-
-  return (
-    <Grid container id={CREATE_MEMBERSHIP_FORM_ID}>
-      <Grid container alignItems="center" justifyContent="center" spacing={1}>
-        <Grid item xs={5}>
-          <TextField
-            value={invitation.email}
-            sx={{
-              width: '100%',
-              marginTop: 1,
-            }}
-            id={SHARE_ITEM_EMAIL_INPUT_ID}
-            variant="outlined"
-            label={translateBuilder(BUILDER.SHARE_ITEM_FORM_EMAIL_LABEL)}
-            error={Boolean(error)}
-            helperText={error}
-            onChange={onChangeEmail}
-          />
-        </Grid>
-        <Grid item>
-          <ItemMembershipSelect
-            value={invitation.permission}
-            onChange={onChangePermission}
-          />
-        </Grid>
-        <Grid item>{renderButton()}</Grid>
-        <Grid item>{renderInvitationStatus()}</Grid>
-      </Grid>
-    </Grid>
+      <Tooltip
+        title={translateBuilder(BUILDER.SHARE_ITEM_FORM_INVITATION_TOOLTIP)}
+      >
+        <IconButton aria-label="status">
+          <ErrorOutline />
+        </IconButton>
+      </Tooltip>
+    </Stack>
   );
 };
 
diff --git a/src/config/i18n.ts b/src/config/i18n.ts
index b567152ad..45cd309c5 100644
--- a/src/config/i18n.ts
+++ b/src/config/i18n.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { initReactI18next, useTranslation } from 'react-i18next';
 
-import buildI18n, { namespaces } from '@graasp/translations';
+import { buildI18n, namespaces } from '@graasp/translations';
 
 import ar from '../langs/ar.json';
 import de from '../langs/de.json';
diff --git a/src/config/notifier.ts b/src/config/notifier.ts
index b232d86df..caee1950a 100644
--- a/src/config/notifier.ts
+++ b/src/config/notifier.ts
@@ -8,9 +8,10 @@ import {
   isNotificationEnabled,
   routines,
 } from '@graasp/query-client';
-import buildI18n, {
+import {
   FAILURE_MESSAGES,
   REQUEST_MESSAGES,
+  buildI18n,
 } from '@graasp/translations';
 
 import axios from 'axios';
diff --git a/src/langs/constants.ts b/src/langs/constants.ts
index 015ed0288..fc0ac47b1 100644
--- a/src/langs/constants.ts
+++ b/src/langs/constants.ts
@@ -118,6 +118,12 @@ export const BUILDER = {
   SETTINGS_SHOW_CHAT_LABEL: 'SETTINGS_SHOW_CHAT_LABEL',
   SETTINGS_RESIZE_LABEL: 'SETTINGS_RESIZE_LABEL',
   SETTINGS_MAX_WIDTH_LABEL: 'SETTINGS_MAX_WIDTH_LABEL',
+  SETTINGS_ALIGNMENT_LABEL: 'SETTINGS_ALIGNMENT_LABEL',
+  SETTINGS_ALIGNMENT_HELPER: 'SETTINGS_ALIGNMENT_HELPER',
+  SETTINGS_ALIGNMENT_ARIA_LABEL: 'SETTINGS_ALIGNMENT_ARIA_LABEL',
+  SETTINGS_ALIGNMENT_CENTER_ARIA_LABEL: 'SETTINGS_ALIGNMENT_CENTER_ARIA_LABEL',
+  SETTINGS_ALIGNMENT_LEFT_ARIA_LABEL: 'SETTINGS_ALIGNMENT_LEFT_ARIA_LABEL',
+  SETTINGS_ALIGNMENT_RIGHT_ARIA_LABEL: 'SETTINGS_ALIGNMENT_RIGHT_ARIA_LABEL',
   SETTINGS_TITLE: 'SETTINGS_TITLE',
   SETTINGS_COLLAPSE_FOLDER_INFORMATION: 'SETTINGS_COLLAPSE_FOLDER_INFORMATION',
 
@@ -497,12 +503,11 @@ export const BUILDER = {
     'ITEM_SETTINGS_IS_COLLAPSED_DISABLED_TEXT',
   ITEM_SETTINGS_IS_COLLAPSED_ENABLED_TEXT:
     'ITEM_SETTINGS_IS_COLLAPSED_ENABLED_TEXT',
-  ITEM_SETTINGS_DESCRIPTION_PLACEMENT_ABOVE:
-    'ITEM_SETTINGS_DESCRIPTION_PLACEMENT_ABOVE',
-  ITEM_SETTINGS_DESCRIPTION_PLACEMENT_BELOW:
-    'ITEM_SETTINGS_DESCRIPTION_PLACEMENT_BELOW',
+  ITEM_SETTINGS_DESCRIPTION_PLACEMENT: 'ITEM_SETTINGS_DESCRIPTION_PLACEMENT',
   ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE:
     'ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE',
+  ITEM_SETTINGS_DESCRIPTION_PLACEMENT_HELPER:
+    'ITEM_SETTINGS_DESCRIPTION_PLACEMENT_HELPER',
   ITEM_SETTINGS_LICENSE_TITLE: 'ITEM_SETTINGS_LICENSE_TITLE',
   CANCEL_BUTTON: 'CANCEL_BUTTON',
   CLOSE_BUTTON: 'CLOSE_BUTTON',
diff --git a/src/langs/en.json b/src/langs/en.json
index 5353c5bb0..9c9d794bd 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -268,6 +268,12 @@
   "SETTINGS_PIN_ITEM_LABEL": "Pin",
   "SETTINGS_RESIZE_LABEL": "Allow Manual Resizing",
   "SETTINGS_MAX_WIDTH_LABEL": "Display size of the image",
+  "SETTINGS_ALIGNMENT_LABEL": "Alignment of the image",
+  "SETTINGS_ALIGNMENT_HELPER": "Defines if image should be centered, left or right aligned",
+  "SETTINGS_ALIGNMENT_ARIA_LABEL": "Text alignment",
+  "SETTINGS_ALIGNMENT_CENTER_ARIA_LABEL": "Centered",
+  "SETTINGS_ALIGNMENT_LEFT_ARIA_LABEL": "Left aligned",
+  "SETTINGS_ALIGNMENT_RIGHT_ARIA_LABEL": "Right aligned",
   "SETTINGS_SAVE_ACTIONS": "Enable Analytics",
   "SETTINGS_SHOW_CHAT_LABEL": "Show Chat",
   "SETTINGS_THUMBNAIL_SETTINGS_INFORMATIONS": "Provide an image to update the thumbnail. You might need to refresh the page to see the changes.",
@@ -410,9 +416,10 @@
   "ITEM_SETTINGS_IS_COLLAPSED_DISABLED_TEXT": "This item is not collapsed",
   "ITEM_SETTINGS_IS_COLLAPSED_ENABLED_TEXT": "This item is collapsed",
   "ITEM_SETTINGS_IS_COLLAPSED_TITLE": "Collapse item",
-  "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_ABOVE": "Above the content",
-  "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_BELOW": "Below the content",
+  "below": "Below",
+  "above": "Above",
   "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE": "Placement of the description",
+  "ITEM_SETTINGS_DESCRIPTION_PLACEMENT_HELPER": "The description will appear {{placement}} the content",
   "ITEM_SETTINGS_LICENSE_TITLE": "License Settings",
   "CANCEL_BUTTON": "Cancel",
   "CLOSE_BUTTON": "Close",
diff --git a/yarn.lock b/yarn.lock
index 7bc87d74b..5c8b3cfad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -70,7 +70,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ag-grid-community/react@npm:^31.3.1":
+"@ag-grid-community/react@npm:^31.3.2":
   version: 31.3.2
   resolution: "@ag-grid-community/react@npm:31.3.2"
   dependencies:
@@ -83,7 +83,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ag-grid-community/styles@npm:31.3.2":
+"@ag-grid-community/styles@npm:31.3.2, @ag-grid-community/styles@npm:^31.3.2":
   version: 31.3.2
   resolution: "@ag-grid-community/styles@npm:31.3.2"
   checksum: 10/b651750803577419e6bbbc45b64d717d64c500332364f4523f84d9d384351f69a7d8eb83bd8343a4ec1530b0db0f26288e91e69516c6ade6e5f7dcf9a7e3078c
@@ -97,13 +97,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ag-grid-community/styles@npm:^31.3.1":
-  version: 31.3.1
-  resolution: "@ag-grid-community/styles@npm:31.3.1"
-  checksum: 10/34c4e80f62891fe1d8881e233df38ace6ba03eb2934b3015bb8537937164dc2c261479d8d15d5c06e36f2bb84c3b27c7b65aaab773236190729bdfe32ec2c225
-  languageName: node
-  linkType: hard
-
 "@ampproject/remapping@npm:^2.2.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
@@ -1768,9 +1761,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/sdk@npm:4.15.0":
-  version: 4.15.0
-  resolution: "@graasp/sdk@npm:4.15.0"
+"@graasp/sdk@npm:4.15.1":
+  version: 4.15.1
+  resolution: "@graasp/sdk@npm:4.15.1"
   dependencies:
     "@faker-js/faker": "npm:8.4.1"
     filesize: "npm:10.1.2"
@@ -1779,7 +1772,7 @@ __metadata:
   peerDependencies:
     date-fns: ^3
     uuid: ^9 || ^10.0.0
-  checksum: 10/02bd822171627b980804d702ac772635ba7288e10da9f8e2cce47893b79c663c410c51e3152e527151449c20f902b08e518a0aac420e059b027e387fb0b6f9e4
+  checksum: 10/17722029c75b0d43d0cbcbef24f7947434980ad26792c2fbb14ac3dc5b1a4a7dfc791b3d273c7a03b0650dbad7074598ac2bc04d307ea43d5d66bacaf3bc6edd
   languageName: node
   linkType: hard
 
@@ -1806,12 +1799,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/translations@npm:1.28.0":
-  version: 1.28.0
-  resolution: "@graasp/translations@npm:1.28.0"
+"@graasp/translations@npm:1.30.3":
+  version: 1.30.3
+  resolution: "@graasp/translations@npm:1.30.3"
   peerDependencies:
     i18next: ^23.8.1
-  checksum: 10/b085ca521f4b65d69ee4154b6d3f96682259acab212605cd221dbe7d3d7867eeeeffac60f1294115849221570cad8a418c576edb8cc405ee6cb031d18e20414b
+  checksum: 10/4b1dce4a5dba01994607337698c9dd57d1c1d2bb82a8bb14b5bc8dc184376255e764891457310d3f030b8ac15fec1cda48cbbb427ba247f8c3fc1f30a96436da
   languageName: node
   linkType: hard
 
@@ -1854,19 +1847,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.20.0":
-  version: 4.20.0
-  resolution: "@graasp/ui@npm:4.20.0"
+"@graasp/ui@npm:4.20.2":
+  version: 4.20.2
+  resolution: "@graasp/ui@npm:4.20.2"
   dependencies:
     "@ag-grid-community/client-side-row-model": "npm:31.3.2"
-    "@ag-grid-community/react": "npm:^31.3.1"
-    "@ag-grid-community/styles": "npm:^31.3.1"
+    "@ag-grid-community/react": "npm:^31.3.2"
+    "@ag-grid-community/styles": "npm:^31.3.2"
     "@storybook/react-vite": "npm:8.1.10"
     http-status-codes: "npm:2.3.0"
     interweave: "npm:13.1.0"
     katex: "npm:0.16.10"
     lodash.truncate: "npm:4.4.2"
-    lucide-react: "npm:0.395.0"
+    lucide-react: "npm:0.399.0"
     react-cookie-consent: "npm:9.0.0"
     react-dnd: "npm:16.0.1"
     react-dnd-html5-backend: "npm:16.0.1"
@@ -1891,7 +1884,7 @@ __metadata:
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
     stylis-plugin-rtl: ^2.1.1
-  checksum: 10/2259b603ddffb00187f5684215a9e16e91a192612a84f7807759f385b7121fe198bdb20ae17fc978b1996a0b921dd2381283f22a3a84ad40c3b8a0031efdaf05
+  checksum: 10/0ed092f9b0a90c832ee90bb9caf4b074f84defe6cd03314127943ccfad229cc3f06f3ce6489eb4e287d57c4e72dc0524e8822e264f49f07afd9764432e3d1a6d
   languageName: node
   linkType: hard
 
@@ -7804,9 +7797,9 @@ __metadata:
     "@graasp/chatbox": "npm:3.1.0"
     "@graasp/map": "npm:1.15.0"
     "@graasp/query-client": "npm:3.14.0"
-    "@graasp/sdk": "npm:4.15.0"
-    "@graasp/translations": "npm:1.28.0"
-    "@graasp/ui": "npm:4.20.0"
+    "@graasp/sdk": "npm:4.15.1"
+    "@graasp/translations": "npm:1.30.3"
+    "@graasp/ui": "npm:4.20.2"
     "@mui/icons-material": "npm:5.15.19"
     "@mui/lab": "npm:5.0.0-alpha.170"
     "@mui/material": "npm:5.15.19"
@@ -9549,12 +9542,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react@npm:0.395.0":
-  version: 0.395.0
-  resolution: "lucide-react@npm:0.395.0"
+"lucide-react@npm:0.399.0":
+  version: 0.399.0
+  resolution: "lucide-react@npm:0.399.0"
   peerDependencies:
-    react: ^16.5.1 || ^17.0.0 || ^18.0.0
-  checksum: 10/6ba49ba045b250e2d5de9ce431ac146fab3464f082ddfd6ffc7d1e8ccdd74f5d5d82e3288a1c965dff90fa0353aba116549ffc5349041c068be65cb48dd890e2
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/89212e54dc58c99f6d7593fc4ac5020771ec57bf334a4f5c1280df131cfb99b2c2ffabcf44a7c26670bee29979d687e7b4318b5d8681d404714faa1e9cc2a6ce
   languageName: node
   linkType: hard