diff --git a/cypress/support/commands/navigation.js b/cypress/support/commands/navigation.js
index 454f556dd..90aeca87d 100644
--- a/cypress/support/commands/navigation.js
+++ b/cypress/support/commands/navigation.js
@@ -24,8 +24,10 @@ Cypress.Commands.add('goToHome', () => {
   cy.get(`#${NAVIGATION_HOME_LINK_ID}`).click();
 });
 
-Cypress.Commands.add('goToItemWithNavigation', (id) => {
+Cypress.Commands.add('goToItemWithNavigation', (id, openHidden = false) => {
   cy.wait(NAVIGATE_PAUSE);
-  cy.get(`#${NAVIGATION_HIDDEN_PARENTS_ID}`).click();
+  if (openHidden) {
+    cy.get(`#${NAVIGATION_HIDDEN_PARENTS_ID}`).click();
+  }
   cy.get(`#${buildNavigationLink(id)}`).click();
 });
diff --git a/package.json b/package.json
index 069795d49..510fcc180 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
   "license": "AGPL-3.0-only",
   "dependencies": {
     "@graasp/chatbox": "git://github.com/graasp/graasp-chatbox.git#main",
-    "@graasp/query-client": "git://github.com/graasp/graasp-query-client.git#82/updateDeleteItemsRoute",
-    "@graasp/ui": "git://github.com/graasp/graasp-ui.git#master",
+    "@graasp/query-client": "git://github.com/graasp/graasp-query-client.git#85/thumbnails",
+    "@graasp/ui": "git://github.com/graasp/graasp-ui.git",
     "@material-ui/core": "4.11.2",
     "@material-ui/icons": "5.0.0-beta.4",
     "@material-ui/lab": "4.0.0-alpha.57",
@@ -56,6 +56,7 @@
     "start:ci": "react-scripts -r @cypress/instrument-cra start",
     "build": "react-scripts build",
     "dist": "env-cmd -f ./.env.production react-scripts build",
+    "dist:dev": "env-cmd -f ./.env.development react-scripts build",
     "test": "env-cmd -f ./.env.test react-scripts test",
     "test:once": "env-cmd -f ./.env.test react-scripts test --watchAll=false",
     "eject": "react-scripts eject",
diff --git a/src/components/context/LayoutContext.js b/src/components/context/LayoutContext.js
index bab97a869..e740baa04 100644
--- a/src/components/context/LayoutContext.js
+++ b/src/components/context/LayoutContext.js
@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  DEFAULT_ITEM_LAYOUT_MODE,
-  MIN_SCREEN_WIDTH,
-} from '../../config/constants';
+import { DEFAULT_ITEM_LAYOUT_MODE } from '../../config/constants';
 
 const LayoutContext = React.createContext();
 
@@ -22,11 +19,7 @@ const LayoutContextProvider = ({ children }) => {
 
   const [isMainMenuOpen, setIsMainMenuOpen] = useState(true);
 
-  // open item panel by default if width allows it
-  const isItemPanelOpen = window.innerWidth > MIN_SCREEN_WIDTH;
-  const [isItemMetadataMenuOpen, setIsItemMetadataMenuOpen] = useState(
-    isItemPanelOpen,
-  );
+  const [isItemMetadataMenuOpen, setIsItemMetadataMenuOpen] = useState(false);
   const [isChatboxMenuOpen, setIsChatboxMenuOpen] = useState(false);
 
   return (
diff --git a/src/components/layout/Navigation.js b/src/components/layout/Navigation.js
index 3e200701a..eb14f3b8d 100644
--- a/src/components/layout/Navigation.js
+++ b/src/components/layout/Navigation.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core';
@@ -42,7 +43,7 @@ const Navigation = () => {
   const { data: parents, isLoading: parentIsLoading } = useParents({
     id: itemId,
     path: itemPath,
-    enabled: parentsOpen,
+    enabled: true,
   });
 
   if (isItemLoading) {
@@ -84,6 +85,16 @@ const Navigation = () => {
     );
   };
 
+  const ParentLink = ({ id, name }) => (
+    <Link key={id} to={buildItemPath(id)}>
+      <Typography id={buildNavigationLink(id)}>{name}</Typography>
+    </Link>
+  );
+  ParentLink.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  };
+
   const renderParents = () => {
     // nothing to display if no parents
     const p = item?.get('path');
@@ -91,29 +102,40 @@ const Navigation = () => {
       return null;
     }
 
-    // display parents only when needed
-    // todo: display parents if in database
-    if (!parentsOpen) {
+    if (parentIsLoading) {
       return (
         <Typography
           id={NAVIGATION_HIDDEN_PARENTS_ID}
           className={classes.parents}
-          onClick={onParentsClick}
         >
           {LOADING_CONTENT}
         </Typography>
       );
     }
 
-    if (parentIsLoading) {
-      return <Loader />;
+    // display parents only when needed
+    // always display last and first parent
+    if (!parentsOpen) {
+      return [
+        parents?.size >= 1 && (
+          <ParentLink name={parents.first().name} id={parents.first().id} />
+        ),
+        parents?.size >= 3 && (
+          <Typography
+            id={NAVIGATION_HIDDEN_PARENTS_ID}
+            className={classes.parents}
+            onClick={onParentsClick}
+          >
+            {LOADING_CONTENT}
+          </Typography>
+        ),
+        parents?.size >= 2 && (
+          <ParentLink name={parents.last().name} id={parents.last().id} />
+        ),
+      ];
     }
 
-    return parents?.map(({ name, id }) => (
-      <Link key={id} to={buildItemPath(id)}>
-        <Typography id={buildNavigationLink(id)}>{name}</Typography>
-      </Link>
-    ));
+    return parents?.map(({ name, id }) => <ParentLink name={name} id={id} />);
   };
 
   return (
diff --git a/src/components/main/CustomCardHeader.js b/src/components/main/CustomCardHeader.js
deleted file mode 100644
index 8a97298e0..000000000
--- a/src/components/main/CustomCardHeader.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import Avatar from '@material-ui/core/Avatar';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
-import { buildItemPath } from '../../config/paths';
-import { hooks } from '../../config/queryClient';
-import { buildItemLink } from '../../config/selectors';
-import ItemMenu from './ItemMenu';
-
-const { useMember } = hooks;
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
-  },
-  header: {
-    display: 'flex',
-  },
-  avatar: {
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  },
-  title: {
-    fontSize: '0.9rem',
-    fontWeight: 'bold',
-  },
-  link: {
-    textDecoration: 'none',
-    color: 'inherit',
-  },
-  subtitle: {
-    fontSize: '0.72rem',
-  },
-}));
-
-const CustomCardHeader = ({ item, canEdit }) => {
-  const { id, creator, name, type } = item;
-  const classes = useStyles();
-  const { t } = useTranslation();
-
-  const { data: member } = useMember(creator);
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.header}>
-        {/* todo: add avatar for member */}
-        <Avatar src={member?.get('extra')?.avatar} className={classes.avatar} />
-        <div>
-          <Link to={buildItemPath(id)} className={classes.link}>
-            <Typography id={buildItemLink(id)} className={classes.title}>
-              {name}
-            </Typography>
-          </Link>
-          <Typography className={classes.subtitle}>
-            {t('Type by author', {
-              type,
-              author: member?.get('name'),
-            })}
-          </Typography>
-        </div>
-      </div>
-      <ItemMenu item={item} canEdit={canEdit} />
-    </div>
-  );
-};
-
-CustomCardHeader.propTypes = {
-  item: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    creator: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-  }).isRequired,
-  canEdit: PropTypes.bool.isRequired,
-};
-
-export default CustomCardHeader;
diff --git a/src/components/main/Item.js b/src/components/main/Item.js
index ad7b677c0..9f74a3346 100644
--- a/src/components/main/Item.js
+++ b/src/components/main/Item.js
@@ -1,31 +1,26 @@
 import React, { useContext } from 'react';
+import truncate from 'lodash.truncate';
 import PropTypes from 'prop-types';
+import { Card as GraaspCard } from '@graasp/ui';
 import { makeStyles } from '@material-ui/core/styles';
-import truncate from 'lodash.truncate';
-import Card from '@material-ui/core/Card';
-import CardMedia from '@material-ui/core/CardMedia';
-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import Typography from '@material-ui/core/Typography';
-import CustomCardHeader from './CustomCardHeader';
+import { Link } from 'react-router-dom';
 import { DESCRIPTION_MAX_LENGTH } from '../../config/constants';
-import { buildItemCard } from '../../config/selectors';
+import { buildItemCard, buildItemLink } from '../../config/selectors';
 import EditButton from '../common/EditButton';
 import { isItemUpdateAllowedForUser } from '../../utils/membership';
 import { getItemImage, stripHtml } from '../../utils/item';
+import ItemMenu from './ItemMenu';
 import FavoriteButton from '../common/FavoriteButton';
 import PinButton from '../common/PinButton';
 import { CurrentUserContext } from '../context/CurrentUserContext';
+import { buildItemPath } from '../../config/paths';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 0,
-    paddingTop: '56.25%', // 16:9
+const useStyles = makeStyles({
+  link: {
+    textDecoration: 'none',
+    color: 'inherit',
   },
-}));
+});
 
 const Item = ({ item, memberships }) => {
   const classes = useStyles();
@@ -39,25 +34,39 @@ const Item = ({ item, memberships }) => {
     memberId: member?.get('id'),
   });
 
+  const Actions = (
+    <>
+      {!member.isEmpty() && <FavoriteButton member={member} item={item} />}
+      {enableEdition && (
+        <>
+          <EditButton item={item} />
+          <PinButton item={item} />
+        </>
+      )}
+    </>
+  );
+
   return (
-    <Card className={classes.root} id={buildItemCard(id)}>
-      <CustomCardHeader item={item} canEdit={enableEdition} />
-      <CardMedia className={classes.media} image={image} title={name} />
-      <CardContent>
-        <Typography variant="body2" color="textSecondary" component="p">
-          {truncate(stripHtml(description), { length: DESCRIPTION_MAX_LENGTH })}
-        </Typography>
-      </CardContent>
-      <CardActions disableSpacing>
-        {!member.isEmpty() && <FavoriteButton member={member} item={item} />}
-        {enableEdition && (
-          <>
-            <EditButton item={item} />
-            <PinButton item={item} />
-          </>
-        )}
-      </CardActions>
-    </Card>
+    <GraaspCard
+      description={truncate(stripHtml(description), {
+        length: DESCRIPTION_MAX_LENGTH,
+      })}
+      Actions={Actions}
+      name={name}
+      creator={member?.get('name')}
+      ItemMenu={<ItemMenu item={item} canEdit={enableEdition} />}
+      image={image}
+      cardId={buildItemCard(id)}
+      NameWrapper={({ children }) => (
+        <Link
+          to={buildItemPath(id)}
+          id={buildItemLink(id)}
+          className={classes.link}
+        >
+          {children}
+        </Link>
+      )}
+    />
   );
 };
 
diff --git a/src/components/main/ItemsGrid.js b/src/components/main/ItemsGrid.js
index 41f7b4927..11443a303 100644
--- a/src/components/main/ItemsGrid.js
+++ b/src/components/main/ItemsGrid.js
@@ -90,7 +90,7 @@ const ItemsGrid = (props) => {
     }
 
     return itemsInPage.map((item) => (
-      <Grid key={item.id} item xs={12} sm={6} md={4} lg={3} xl={2}>
+      <Grid key={item.id} item xs={12} sm={12} md={6} lg={4} xl={2}>
         <Item
           item={item}
           memberships={getMembershipsForItem({ items, memberships, item })}
diff --git a/src/components/main/ItemsTable.js b/src/components/main/ItemsTable.js
index 897bb27b6..028e03701 100644
--- a/src/components/main/ItemsTable.js
+++ b/src/components/main/ItemsTable.js
@@ -214,16 +214,6 @@ const ItemsTable = ({
             comparator={textComparator}
             sort={defautSortedColumn?.type}
           />
-          <AgGridColumn
-            headerName={t('Created At')}
-            field="createdAt"
-            flex={3}
-            type="rightAligned"
-            valueFormatter={dateColumnFormatter}
-            sortable
-            comparator={dateComparator}
-            sort={defautSortedColumn?.createdAt}
-          />
           <AgGridColumn
             headerName={t('Updated At')}
             field="updatedAt"
diff --git a/src/config/constants.js b/src/config/constants.js
index 7f126bd63..4a92ea0f9 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -95,6 +95,7 @@ export const UPLOAD_METHOD =
 export const ITEM_ICON_MAX_SIZE = 25;
 
 export const USERNAME_MAX_LENGTH = 15;
+export const ITEM_NAME_MAX_LENGTH = 15;
 export const HEADER_USERNAME_MAX_WIDTH = 120;
 
 export const SHARE_ITEM_MODAL_MIN_WIDTH = 120;
diff --git a/yarn.lock b/yarn.lock
index 8b2cccf85..8ad497dbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2167,26 +2167,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@git://github.com/graasp/graasp-query-client.git#82/updateDeleteItemsRoute":
+"@graasp/query-client@git://github.com/graasp/graasp-query-client.git#85/thumbnails":
   version: 0.1.0
-  resolution: "@graasp/query-client@git://github.com/graasp/graasp-query-client.git#commit=3a5a27349848341bf7745497c8ce89532dcadcfa"
+  resolution: "@graasp/query-client@git://github.com/graasp/graasp-query-client.git#commit=c7e430fa32df97b4dfc8d609280c20cb3484c7cc"
   dependencies:
     axios: 0.21.4
     http-status-codes: 2.1.4
     immutable: 4.0.0-rc.12
     js-cookie: 3.0.0
     qs: 6.10.1
-    react-query: 3.16.0
+    react-query: 3.31.0
     uuid: 8.3.2
   peerDependencies:
     react: ^17.0.0
-  checksum: 841ba7e9ab4e90ba7534f23ed572eec4c4b85e282aaf438ad0fefa4f279c4e42fac32e60c1f669c88a7d64bf7b28992a694b12e4c70fd01ad3aae5601fb41ded
+  checksum: 4c2315d07f96bd4fa899e62ef08a0f0a3a1cb4902f95b0b4943f32bb0c371dd33ce586be0de00763f01d3c1e557224aecff1834f8ba0f70a1910623b9697ace1
   languageName: node
   linkType: hard
 
-"@graasp/ui@git://github.com/graasp/graasp-ui.git#master":
+"@graasp/ui@git://github.com/graasp/graasp-ui.git":
   version: 0.2.0
-  resolution: "@graasp/ui@git://github.com/graasp/graasp-ui.git#commit=11cba0f355ec7efc763b7568dc44ea43904d5edd"
+  resolution: "@graasp/ui@git://github.com/graasp/graasp-ui.git#commit=c780060af6afcd6955c284911eb958b5a84db5bd"
   dependencies:
     clsx: 1.1.1
     http-status-codes: 2.1.4
@@ -2203,7 +2203,7 @@ __metadata:
     i18next: 21.3.1
     react: ^16.13.1
     react-dom: 16.13.1
-  checksum: f8721bf93f81c328cf199e92d1196a035aac0205ae0312e7e8b1b69cee08dedd0d9d815816465ef2c52a8b7ab832b6f964458fe5a6d31011978e11a7ee171322
+  checksum: d92a45efd7324c0753bf76426afd6e3c8563fd556edb19d642f6f4a74056e0e3cebdc4c906e6d9db8cb1a3ceaebfe5c00bcd63c62dfe25ba2301f2e22c01dc24
   languageName: node
   linkType: hard
 
@@ -10252,8 +10252,8 @@ fsevents@^1.2.7:
     "@cypress/code-coverage": 3.9.2
     "@cypress/instrument-cra": 1.4.0
     "@graasp/chatbox": "git://github.com/graasp/graasp-chatbox.git#main"
-    "@graasp/query-client": "git://github.com/graasp/graasp-query-client.git#82/updateDeleteItemsRoute"
-    "@graasp/ui": "git://github.com/graasp/graasp-ui.git#master"
+    "@graasp/query-client": "git://github.com/graasp/graasp-query-client.git#85/thumbnails"
+    "@graasp/ui": "git://github.com/graasp/graasp-ui.git"
     "@graasp/websockets": "git://github.com/graasp/graasp-websockets.git#master"
     "@material-ui/core": 4.11.2
     "@material-ui/icons": 5.0.0-beta.4
@@ -16866,6 +16866,24 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"react-query@npm:3.31.0":
+  version: 3.31.0
+  resolution: "react-query@npm:3.31.0"
+  dependencies:
+    "@babel/runtime": ^7.5.5
+    broadcast-channel: ^3.4.1
+    match-sorter: ^6.0.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: a00e05ea485f61a63686b98e7bd591112f321c732dc313e43ba4787ae9d767666e2cfff3da0dc2a3626fe229b87b3e5433d32c5d45f3647a031f24366678f586
+  languageName: node
+  linkType: hard
+
 "react-quill@npm:1.3.5":
   version: 1.3.5
   resolution: "react-quill@npm:1.3.5"