diff --git a/src/app.css b/src/app.css
index 192b1c818..a1010c20b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -22,3 +22,6 @@
     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+html {
+  font-family: 'Nunito', sans-serif;
+}
diff --git a/src/modules/account/MainMenu.tsx b/src/modules/account/MainMenu.tsx
index bb4ab8dcd..745ba1a08 100644
--- a/src/modules/account/MainMenu.tsx
+++ b/src/modules/account/MainMenu.tsx
@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
-import { Stack } from '@mui/material';
-import List from '@mui/material/List';
+import { List, Stack } from '@mui/material';
 
 import { DRAWER_WIDTH } from '@graasp/ui';
 
diff --git a/src/modules/account/settings/DeleteMemberDialogContent.tsx b/src/modules/account/settings/DeleteMemberDialogContent.tsx
index 067d086a0..0fad343a1 100644
--- a/src/modules/account/settings/DeleteMemberDialogContent.tsx
+++ b/src/modules/account/settings/DeleteMemberDialogContent.tsx
@@ -1,11 +1,14 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Stack, TextField } from '@mui/material';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
+import {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Stack,
+  TextField,
+} from '@mui/material';
 
 import { Button } from '@graasp/ui';
 
diff --git a/src/modules/account/settings/password/CreatePassword.tsx b/src/modules/account/settings/password/CreatePassword.tsx
index 3dae260c7..aa38904c8 100644
--- a/src/modules/account/settings/password/CreatePassword.tsx
+++ b/src/modules/account/settings/password/CreatePassword.tsx
@@ -2,8 +2,7 @@ import { FieldError, SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { LoadingButton } from '@mui/lab';
-import { Alert, Button, Stack } from '@mui/material';
-import Typography from '@mui/material/Typography';
+import { Alert, Button, Stack, Typography } from '@mui/material';
 
 import { isPasswordStrong } from '@graasp/sdk';
 import { FAILURE_MESSAGES } from '@graasp/translations';
diff --git a/src/modules/account/settings/password/EditPassword.tsx b/src/modules/account/settings/password/EditPassword.tsx
index 35972fb9a..7fba578f3 100644
--- a/src/modules/account/settings/password/EditPassword.tsx
+++ b/src/modules/account/settings/password/EditPassword.tsx
@@ -2,8 +2,7 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import { LoadingButton } from '@mui/lab';
-import { Alert, Box, Button, Stack } from '@mui/material';
-import Typography from '@mui/material/Typography';
+import { Alert, Box, Button, Stack, Typography } from '@mui/material';
 
 import { isPasswordStrong } from '@graasp/sdk';
 import { FAILURE_MESSAGES } from '@graasp/translations';
diff --git a/src/modules/analytics/charts-layout/ChartsAlerts.tsx b/src/modules/analytics/charts-layout/ChartsAlerts.tsx
index 12927b8b6..46493c092 100644
--- a/src/modules/analytics/charts-layout/ChartsAlerts.tsx
+++ b/src/modules/analytics/charts-layout/ChartsAlerts.tsx
@@ -1,9 +1,8 @@
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Info from '@mui/icons-material/Info';
-import Tooltip from '@mui/material/Tooltip';
-import { styled } from '@mui/material/styles';
+import { Info } from '@mui/icons-material';
+import { Tooltip, styled } from '@mui/material';
 
 import { NS } from '@/config/constants';
 
diff --git a/src/modules/analytics/charts-layout/ItemsAnalytics.tsx b/src/modules/analytics/charts-layout/ItemsAnalytics.tsx
index b1ec4e6dc..ba1ff6143 100644
--- a/src/modules/analytics/charts-layout/ItemsAnalytics.tsx
+++ b/src/modules/analytics/charts-layout/ItemsAnalytics.tsx
@@ -1,4 +1,4 @@
-import Grid from '@mui/material/Grid';
+import { Grid } from '@mui/material';
 
 import ItemsByActionChart from '../charts/ItemsByActionChart';
 import ItemsByUserChart from '../charts/ItemsByUserChart';
diff --git a/src/modules/analytics/charts/ActionsByVerbChart.tsx b/src/modules/analytics/charts/ActionsByVerbChart.tsx
index 2d5de0f02..11984cd1c 100644
--- a/src/modules/analytics/charts/ActionsByVerbChart.tsx
+++ b/src/modules/analytics/charts/ActionsByVerbChart.tsx
@@ -1,8 +1,7 @@
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
+import { Typography, styled } from '@mui/material';
 
 import { ActionTriggers } from '@graasp/sdk';
 
diff --git a/src/modules/analytics/charts/ActionsMap.tsx b/src/modules/analytics/charts/ActionsMap.tsx
index 2942a3616..3e98f4ee2 100644
--- a/src/modules/analytics/charts/ActionsMap.tsx
+++ b/src/modules/analytics/charts/ActionsMap.tsx
@@ -1,7 +1,7 @@
 import { useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material';
 
 import GoogleMapReact from 'google-map-react';
 import useSupercluster from 'use-supercluster';
diff --git a/src/modules/analytics/common/ChartTitle.tsx b/src/modules/analytics/common/ChartTitle.tsx
index 99041aeae..bbd4c572b 100644
--- a/src/modules/analytics/common/ChartTitle.tsx
+++ b/src/modules/analytics/common/ChartTitle.tsx
@@ -1,6 +1,8 @@
-import InfoIcon from '@mui/icons-material/Info';
-import { Stack, Tooltip } from '@mui/material';
-import Typography from '@mui/material/Typography';
+import { Stack, Tooltip, Typography } from '@mui/material';
+
+import { useButtonColor } from '@graasp/ui';
+
+import { Info } from 'lucide-react';
 
 const ChartTitle = ({
   title,
@@ -8,21 +10,24 @@ const ChartTitle = ({
 }: {
   title: string;
   description?: string;
-}): JSX.Element => (
-  <Stack
-    spacing={1}
-    pt={2}
-    direction="row"
-    alignItems="center"
-    justifyContent="center"
-  >
-    <Typography variant="h6" align="center">
-      {title}
-    </Typography>
-    <Tooltip title={description}>
-      <InfoIcon color="primary" />
-    </Tooltip>
-  </Stack>
-);
+}): JSX.Element => {
+  const { color } = useButtonColor('primary');
+  return (
+    <Stack
+      spacing={1}
+      pt={2}
+      direction="row"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Typography variant="h6" align="center">
+        {title}
+      </Typography>
+      <Tooltip title={description}>
+        <Info color={color} />
+      </Tooltip>
+    </Stack>
+  );
+};
 
 export default ChartTitle;
diff --git a/src/modules/analytics/common/SectionTitle.tsx b/src/modules/analytics/common/SectionTitle.tsx
index 74f2e4102..e8649ff75 100644
--- a/src/modules/analytics/common/SectionTitle.tsx
+++ b/src/modules/analytics/common/SectionTitle.tsx
@@ -1,5 +1,4 @@
-import { Stack } from '@mui/material';
-import Typography from '@mui/material/Typography';
+import { Stack, Typography } from '@mui/material';
 
 const SectionTitle = ({
   title,
diff --git a/src/modules/analytics/functionality/ViewSelect.tsx b/src/modules/analytics/functionality/ViewSelect.tsx
index a55f9a6a7..10f41e809 100644
--- a/src/modules/analytics/functionality/ViewSelect.tsx
+++ b/src/modules/analytics/functionality/ViewSelect.tsx
@@ -1,17 +1,19 @@
 import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import InfoIcon from '@mui/icons-material/Info';
 import {
   FormControl,
   InputLabel,
   MenuItem,
   Select,
   Stack,
+  Tooltip,
 } from '@mui/material';
-import Tooltip from '@mui/material/Tooltip';
 
 import { Context } from '@graasp/sdk';
+import { useButtonColor } from '@graasp/ui';
+
+import { Info } from 'lucide-react';
 
 import { NS } from '@/config/constants';
 
@@ -29,6 +31,7 @@ import { ViewDataContext } from '~analytics/context/ViewDataProvider';
 const ViewSelect = (): JSX.Element => {
   const { t } = useTranslation(NS.Analytics);
   const { t: enumT } = useTranslation(NS.Enums);
+  const { color } = useButtonColor('primary');
 
   const { view, setView } = useContext(ViewDataContext);
 
@@ -92,7 +95,7 @@ const ViewSelect = (): JSX.Element => {
         </Select>
       </FormControl>
       <Tooltip title={viewMessage}>
-        <InfoIcon color="primary" />
+        <Info color={color} />
       </Tooltip>
     </Stack>
   );
diff --git a/src/modules/auth/components/common/StyledTextField.tsx b/src/modules/auth/components/common/StyledTextField.tsx
index 9e5b28f6d..72ee101a7 100644
--- a/src/modules/auth/components/common/StyledTextField.tsx
+++ b/src/modules/auth/components/common/StyledTextField.tsx
@@ -1,5 +1,4 @@
-import { styled } from '@mui/material';
-import TextField from '@mui/material/TextField';
+import { TextField, styled } from '@mui/material';
 
 const FORM_INPUT_MIN_WIDTH = 300;
 
diff --git a/src/modules/landing/support/Faq.tsx b/src/modules/landing/support/Faq.tsx
index 9d8786093..60bdb67b5 100644
--- a/src/modules/landing/support/Faq.tsx
+++ b/src/modules/landing/support/Faq.tsx
@@ -1,9 +1,13 @@
 import { useTranslation } from 'react-i18next';
 
-import { Box, Stack, Typography } from '@mui/material';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Stack,
+  Typography,
+} from '@mui/material';
 
 import { ChevronDown } from 'lucide-react';
 
diff --git a/src/modules/player/.DS_Store b/src/modules/player/.DS_Store
deleted file mode 100644
index 6344412e4..000000000
Binary files a/src/modules/player/.DS_Store and /dev/null differ
diff --git a/src/modules/player/ItemNavigation.tsx b/src/modules/player/ItemNavigation.tsx
index 3f633c28f..d2d4b54b7 100644
--- a/src/modules/player/ItemNavigation.tsx
+++ b/src/modules/player/ItemNavigation.tsx
@@ -12,9 +12,9 @@ import { NS } from '@/config/constants.ts';
 import { axios, hooks } from '@/config/queryClient';
 import { MAIN_MENU_ID, TREE_VIEW_ID } from '@/config/selectors';
 
-import { LoadingTree } from './tree/LoadingTree.tsx';
-import { TreeView } from './tree/TreeView.tsx';
-import { combineUuids, shuffleAllButLastItemInArray } from './utils/shuffle.ts';
+import { LoadingTree } from './tree/LoadingTree';
+import { TreeView } from './tree/TreeView';
+import { combineUuids, shuffleAllButLastItemInArray } from './utils/shuffle';
 
 const { useItem, useDescendants } = hooks;
 const playerRoute = getRouteApi('/player/$rootId/$itemId');
diff --git a/src/modules/player/common/ItemCard.tsx b/src/modules/player/common/ItemCard.tsx
index 9c96abd05..cff531c51 100644
--- a/src/modules/player/common/ItemCard.tsx
+++ b/src/modules/player/common/ItemCard.tsx
@@ -1,8 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
-import { Box, Stack } from '@mui/material';
-import Card from '@mui/material/Card';
-import Typography from '@mui/material/Typography';
+import { Box, Card, Stack, Typography } from '@mui/material';
 
 import { PackedItem, formatDate } from '@graasp/sdk';
 import { AnalyticsIcon, PlayIcon } from '@graasp/ui';
diff --git a/src/modules/player/rightPanel/SideContent.tsx b/src/modules/player/rightPanel/SideContent.tsx
index 35e97e33d..9a50ef703 100644
--- a/src/modules/player/rightPanel/SideContent.tsx
+++ b/src/modules/player/rightPanel/SideContent.tsx
@@ -1,15 +1,13 @@
 import Fullscreen from 'react-fullscreen-crossbrowser';
 import { useTranslation } from 'react-i18next';
 
-import EnterFullscreenIcon from '@mui/icons-material/Fullscreen';
-import ExitFullscreenIcon from '@mui/icons-material/FullscreenExit';
-import { Stack, Tooltip, styled } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import { IconButton, Stack, Tooltip, styled } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
 import { useMobileView } from '@graasp/ui';
 
 import { useParams, useSearch } from '@tanstack/react-router';
+import { ExpandIcon, ShrinkIcon } from 'lucide-react';
 
 import { NS } from '@/config/constants';
 import { hooks } from '@/config/queryClient';
@@ -121,7 +119,7 @@ const SideContent = ({ content, item }: Props): JSX.Element | null => {
           }
           onClick={toggleFullscreen}
         >
-          {isFullscreen ? <ExitFullscreenIcon /> : <EnterFullscreenIcon />}
+          {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
         </StyledIconButton>
       </Tooltip>
     );
diff --git a/src/modules/player/tree/Node.tsx b/src/modules/player/tree/Node.tsx
index fa36f434f..a8e762f9b 100644
--- a/src/modules/player/tree/Node.tsx
+++ b/src/modules/player/tree/Node.tsx
@@ -1,7 +1,6 @@
 import type { IBranchProps, INode, LeafProps } from 'react-accessible-treeview';
 
-import { Box, IconButton, Typography } from '@mui/material';
-import { deepPurple } from '@mui/material/colors';
+import { Box, IconButton, Typography, colors } from '@mui/material';
 
 import { UUID } from '@graasp/sdk';
 import { ItemIcon } from '@graasp/ui';
@@ -41,7 +40,7 @@ export function TreeNode({
       sx={{
         width: '100%',
         pl: 1,
-        background: isSelected ? deepPurple[50] : 'none',
+        background: isSelected ? colors.deepPurple[50] : 'none',
       }}
     >
       {/* icon type for root level items */}
diff --git a/src/modules/player/utils/shuffle.test.ts b/src/modules/player/utils/shuffle.test.ts
index 02cc8b8f4..c983557d6 100644
--- a/src/modules/player/utils/shuffle.test.ts
+++ b/src/modules/player/utils/shuffle.test.ts
@@ -5,7 +5,7 @@ import {
   combineUuids,
   getRandomValue,
   shuffleAllButLastItemInArray,
-} from './shuffle.ts';
+} from './shuffle';
 
 describe('shuffleAllButLastItemInArray', () => {
   // check if the function shuffles all items except the last one with different UUID seeds
diff --git a/src/routes/auth/reset-password.tsx b/src/routes/auth/reset-password.tsx
index 81c990cd5..6ed10f878 100644
--- a/src/routes/auth/reset-password.tsx
+++ b/src/routes/auth/reset-password.tsx
@@ -9,8 +9,8 @@ import {
   FormControlLabel,
   Stack,
   TextField,
+  Typography,
 } from '@mui/material';
-import Typography from '@mui/material/Typography';
 
 import { isPasswordStrong } from '@graasp/sdk';