diff --git a/cypress/fixtures/apps.js b/cypress/fixtures/apps.js
index 8a2c94255..3ec9b02f0 100644
--- a/cypress/fixtures/apps.js
+++ b/cypress/fixtures/apps.js
@@ -1,3 +1,4 @@
+import { APP_NAME } from './apps/apps';
 import { ITEM_TYPES } from '../../src/enums';
 import { DEFAULT_FOLDER_ITEM } from './items';
 import { CURRENT_USER } from './members';
@@ -16,7 +17,7 @@ export const GRAASP_APP_ITEM = {
   description: 'my app description',
   type: ITEM_TYPES.APP,
   extra: {
-    [ITEM_TYPES.APP]: { url: 'http://localhost.com:3333' },
+    [ITEM_TYPES.APP]: { url: 'http://localhost.com:3333', name: APP_NAME },
   },
   creator: CURRENT_USER.id,
 };
@@ -28,6 +29,7 @@ export const GRAASP_APP_PARENT_FOLDER = {
   path: 'bdf09f5a_5688_11eb_ae93_0242ac130002',
   extra: {
     image: 'someimageurl',
+    name: APP_NAME
   },
 };
 
@@ -39,7 +41,10 @@ export const GRAASP_APP_CHILDREN_ITEM = {
   description: 'my app description',
   type: ITEM_TYPES.APP,
   extra: {
-    [ITEM_TYPES.APP]: { url: 'http://localhost.com:3333' },
+    [ITEM_TYPES.APP]: { 
+      url: 'http://localhost.com:3333',
+      name: APP_NAME 
+    },
   },
   creator: CURRENT_USER.id,
 };
@@ -53,6 +58,7 @@ export const APP_USING_CONTEXT_ITEM = {
   extra: {
     [ITEM_TYPES.APP]: {
       url: `${API_HOST}/${buildAppItemLinkForTest('app.html')}`,
+      name: APP_NAME
     },
   },
   creator: CURRENT_USER.id,
diff --git a/cypress/fixtures/apps/apps.js b/cypress/fixtures/apps/apps.js
index d0c5e8be5..cdfd48a4d 100644
--- a/cypress/fixtures/apps/apps.js
+++ b/cypress/fixtures/apps/apps.js
@@ -1,9 +1,10 @@
-// eslint-disable-next-line import/prefer-default-export
+export const APP_NAME = "test app";
+
 export const APPS_LIST = [
     {
-        name: "test",
+        name: APP_NAME,
         url: "http://localhost.com:3333",
-        extra:{
+        extra: {
             image: "https://pbs.twimg.com/profile_images/1300707321262346240/IsQAyu7q_400x400.jpg"
         }
     }
diff --git a/cypress/support/commands/item.js b/cypress/support/commands/item.js
index 0eba6c144..678c931d3 100644
--- a/cypress/support/commands/item.js
+++ b/cypress/support/commands/item.js
@@ -131,7 +131,7 @@ Cypress.Commands.add(
     if(type){
       cy.get(`#${ITEM_FORM_APP_URL_ID}`).type(getAppExtra(extra)?.url);
     }else{
-      cy.get(`#${buildItemFormAppOptionId(getAppExtra(extra)?.url)}`).click();
+      cy.get(`#${buildItemFormAppOptionId(getAppExtra(extra)?.name)}`).click();
     }
 
     if (confirm) {
diff --git a/src/components/common/PinButton.js b/src/components/common/PinButton.js
index 5d775f290..5e1a77656 100644
--- a/src/components/common/PinButton.js
+++ b/src/components/common/PinButton.js
@@ -17,12 +17,12 @@ const PinButton = ({ item }) => {
 
   const handlePin = () => {
     setPinned(!isPinned);
-    
+
     editItem.mutate({
       id: item.id,
       name: item.name,
       settings: {
-        isPinned: !isPinned
+        isPinned: !isPinned,
       },
     });
   };
diff --git a/src/components/item/form/AppForm.js b/src/components/item/form/AppForm.js
index 2dc78b631..6279613af 100644
--- a/src/components/item/form/AppForm.js
+++ b/src/components/item/form/AppForm.js
@@ -7,13 +7,16 @@ import { Autocomplete } from '@material-ui/lab';
 import BaseItemForm from './BaseItemForm';
 import { buildAppExtra, getAppExtra } from '../../../utils/itemExtra';
 import { hooks } from '../../../config/queryClient';
-import { ITEM_FORM_APP_URL_ID, buildItemFormAppOptionId } from '../../../config/selectors';
+import {
+  ITEM_FORM_APP_URL_ID,
+  buildItemFormAppOptionId,
+} from '../../../config/selectors';
 
 const useStyles = makeStyles((theme) => ({
   img: {
     verticalAlign: 'middle',
     margin: theme.spacing(1),
-    height: '30px'
+    height: '30px',
   },
 }));
 
@@ -25,7 +28,7 @@ const AppForm = ({ onChange, item }) => {
     onChange({ ...item, extra: buildAppExtra({ url }) });
   };
 
-  const classes = useStyles()
+  const classes = useStyles();
   const { useApps } = hooks;
   const { data } = useApps();
 
@@ -35,7 +38,7 @@ const AppForm = ({ onChange, item }) => {
     <div>
       <Typography variant="h6">{t('Create an App')}</Typography>
       <BaseItemForm onChange={onChange} item={item} />
-     
+
       <Autocomplete
         id={ITEM_FORM_APP_URL_ID}
         freeSolo
@@ -46,7 +49,11 @@ const AppForm = ({ onChange, item }) => {
         onInputChange={handleAppUrlInput}
         renderOption={(option) => (
           <div id={buildItemFormAppOptionId(option.name)}>
-            <img className={classes.img} src={option.extra.image} alt={option.name} />
+            <img
+              className={classes.img}
+              src={option.extra.image}
+              alt={option.name}
+            />
             {option.name}
           </div>
         )}
diff --git a/src/components/item/settings/ItemSettings.js b/src/components/item/settings/ItemSettings.js
index 3cd55753b..f485eb9c1 100644
--- a/src/components/item/settings/ItemSettings.js
+++ b/src/components/item/settings/ItemSettings.js
@@ -42,7 +42,7 @@ const ItemSettings = ({ item }) => {
       id: item.get('id'),
       name: item.get('name'),
       settings: {
-        showChatbox: event.target.checked
+        showChatbox: event.target.checked,
       },
     });
   };
@@ -52,7 +52,7 @@ const ItemSettings = ({ item }) => {
       id: item.get('id'),
       name: item.get('name'),
       settings: {
-        isPinned: event.target.checked
+        isPinned: event.target.checked,
       },
     });
   };
diff --git a/src/config/selectors.js b/src/config/selectors.js
index 991726b6e..4ec8f55dc 100644
--- a/src/config/selectors.js
+++ b/src/config/selectors.js
@@ -88,7 +88,8 @@ export const DOCUMENT_ITEM_TEXT_EDITOR_ID = 'documentItemTextEditor';
 export const DOCUMENT_ITEM_TEXT_EDITOR_SELECTOR = `#${DOCUMENT_ITEM_TEXT_EDITOR_ID} .ql-editor`;
 export const CREATE_ITEM_APP_ID = 'createItemApp';
 export const ITEM_FORM_APP_URL_ID = 'itemFormAppUrl';
-export const buildItemFormAppOptionId = (name) => `${name.replaceAll(/\s/g, '-')}`;
+export const buildItemFormAppOptionId = (name) =>
+  `${name.replaceAll(/\s/g, '-')}`;
 export const TEXT_EDITOR_CLASS = 'ql-editor';
 export const buildSaveButtonId = (id) => `saveButton-${id}`;
 export const MEMBER_PROFILE_MEMBER_ID_ID = 'memberProfileMemberId';