diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
index 72bbde0d5..df17dee96 100644
--- a/src/components/item/form/AppForm.tsx
+++ b/src/components/item/form/AppForm.tsx
@@ -3,11 +3,12 @@ import { ChangeEventHandler, useState } from 'react';
 import { Add, ArrowBack } from '@mui/icons-material';
 import { Alert, Stack, TextField, Typography, alpha } from '@mui/material';
 
-import { DiscriminatedItem, ItemType, buildAppExtra } from '@graasp/sdk';
+import { App, DiscriminatedItem, ItemType, buildAppExtra } from '@graasp/sdk';
 import { Button } from '@graasp/ui';
 
 import AppCard from '@/components/main/AppCard';
-import { CUSTOM_APP_CYPRESS_ID, CUSTOM_APP_URL_ID } from '@/config/selectors';
+import { CUSTOM_APP_BUTTON_ID, CUSTOM_APP_URL_ID } from '@/config/selectors';
+import defaultImage from '@/resources/defaultApp.png';
 import { sortByName } from '@/utils/item';
 
 import { useBuilderTranslation } from '../../../config/i18n';
@@ -17,78 +18,92 @@ import NameForm from './NameForm';
 
 type AppGridProps = {
   showFull: boolean;
-  setHasMostUsedData: (value: boolean) => void;
   currentUrl: string;
   handleSelection: (value: null | { name: string; url: string }) => void;
   searchQuery?: string;
 };
 
+type MostUsedApp = {
+  url: string;
+  name: string;
+  count: number;
+};
+
+type AppCardListProps = {
+  apps: (App | MostUsedApp)[];
+  currentUrl: string;
+  handleSelection: (value: null | { name: string; url: string }) => void;
+  searchQuery?: string;
+};
+
+const AppCardList = ({
+  apps,
+  currentUrl,
+  handleSelection,
+  searchQuery,
+}: AppCardListProps) => {
+  // filter out with search query
+  const dataToShow = searchQuery
+    ? apps.filter((app) =>
+        app.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : apps;
+  dataToShow.sort(sortByName);
+  return (
+    <>
+      {dataToShow.map((ele) => (
+        <AppCard
+          key={ele.name}
+          id={'id' in ele ? ele.id : ''}
+          name={ele.name}
+          description={'description' in ele ? ele.description : ''}
+          image={'extra' in ele ? ele.extra?.image : defaultImage}
+          selected={ele.url === currentUrl}
+          onClick={() => {
+            if (ele.url === currentUrl) {
+              // reset fields
+              handleSelection(null);
+            } else {
+              handleSelection({ url: ele.url, name: ele.name });
+            }
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
 const AppGrid = ({
   showFull,
-  setHasMostUsedData,
   currentUrl,
   handleSelection,
   searchQuery,
 }: AppGridProps): JSX.Element | JSX.Element[] => {
   const { useApps, useMostUsedApps } = hooks;
-  const { data, isLoading } = useApps();
-  const { data: dataMostUsed } = useMostUsedApps();
+  const { data: allApps, isLoading } = useApps();
+  const { data: mostUsedApps } = useMostUsedApps();
   const { t: translateBuilder } = useBuilderTranslation();
 
   // at first, try to present the user the 'most used' data
-  if (dataMostUsed && dataMostUsed.length !== 0 && !showFull) {
-    setHasMostUsedData(true);
+  if (mostUsedApps && mostUsedApps.length !== 0 && !showFull) {
     return (
-      <>
-        {dataMostUsed.map((ele) => (
-          <AppCard
-            key={ele.name}
-            name={ele.name}
-            selected={ele.url === currentUrl}
-            onClick={() => {
-              if (ele.url === currentUrl) {
-                // reset fields
-                handleSelection(null);
-              } else {
-                handleSelection({ url: ele.url, name: ele.name });
-              }
-            }}
-          />
-        ))}
-      </>
+      <AppCardList
+        apps={mostUsedApps}
+        currentUrl={currentUrl}
+        handleSelection={handleSelection}
+        searchQuery={searchQuery}
+      />
     );
   }
 
-  if (data) {
-    // filter out with search query
-    const dataToShow = searchQuery
-      ? data.filter((d) =>
-          d.name.toLowerCase().includes(searchQuery.toLowerCase()),
-        )
-      : data;
-    dataToShow.sort(sortByName);
-
+  if (allApps) {
     return (
-      <>
-        {dataToShow.map((ele) => (
-          <AppCard
-            id={ele.id}
-            key={ele.name}
-            name={ele.name}
-            description={ele.description}
-            image={ele.extra.image}
-            selected={ele.url === currentUrl}
-            onClick={() => {
-              if (ele.url === currentUrl) {
-                // reset fields
-                handleSelection(null);
-              } else {
-                handleSelection({ url: ele.url, name: ele.name });
-              }
-            }}
-          />
-        ))}
-      </>
+      <AppCardList
+        apps={allApps}
+        currentUrl={currentUrl}
+        handleSelection={handleSelection}
+        searchQuery={searchQuery}
+      />
     );
   }
 
@@ -112,7 +127,6 @@ type Props = {
 
 const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
   const [showFull, setShowFull] = useState<boolean>(false);
-  const [hasMostUsedData, setHasMostUsedData] = useState<boolean>(false);
   const { t: translateBuilder } = useBuilderTranslation();
   const [isCustomApp, setIsCustomApp] = useState<boolean>(false);
 
@@ -196,10 +210,10 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
     );
   }
   return (
-    <Stack spacing={2} mt={0.5}>
+    <Stack spacing={2} mt={1}>
       <Stack
         direction="column"
-        height="100%"
+        maxHeight={400}
         spacing={1}
         bgcolor={alpha('#ADADAD', 0.06)}
         padding={2}
@@ -213,9 +227,9 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
           size="small"
           onChange={searchAnApp}
         />
-        <Stack direction="row" alignItems="center" spacing={1}>
+        <Stack direction="row" alignItems="center">
           <Typography variant="label">
-            {hasMostUsedData && !showFull
+            {!showFull
               ? translateBuilder(BUILDER.APP_SECTION_MOST_USED)
               : translateBuilder(BUILDER.APP_SECTION_ALL_APP)}
           </Typography>
@@ -223,44 +237,48 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
             size="small"
             variant="text"
             onClick={() => setShowFull(!showFull)}
-            id={CUSTOM_APP_CYPRESS_ID}
+            id={CUSTOM_APP_BUTTON_ID}
           >
-            {hasMostUsedData &&
-              (!showFull
-                ? translateBuilder(BUILDER.APP_SECTION_ALL_APP_BUTTON_TEXT)
-                : translateBuilder(BUILDER.APP_SECTION_MOST_USED_BUTTON_TEXT))}
+            {!showFull
+              ? translateBuilder(BUILDER.APP_SECTION_ALL_APP_BUTTON_TEXT)
+              : translateBuilder(BUILDER.APP_SECTION_MOST_USED_BUTTON_TEXT)}
           </Button>
         </Stack>
         <Stack
+          flex={2}
           flexDirection="row"
           flexWrap="wrap"
           width="100%"
           gap={1}
-          height="300px"
-          overflow="scroll"
+          sx={{
+            overflowY: 'scroll',
+          }}
           padding={1}
           alignContent="flex-start"
+          direction={{ xs: 'column', sm: 'row' }}
         >
           <AppGrid
             showFull={showFull}
-            setHasMostUsedData={setHasMostUsedData}
             currentUrl={currentUrl}
             handleSelection={handleAppSelection}
             searchQuery={searchQuery}
           />
         </Stack>
       </Stack>
-      <Typography variant="body2">
-        {translateBuilder(BUILDER.CREATE_CUSTOM_APP_LABEL)}
-      </Typography>
-      <Button
-        startIcon={<Add fontSize="small" />}
-        variant="contained"
-        onClick={addCustomApp}
-        id={CUSTOM_APP_CYPRESS_ID}
-      >
-        {translateBuilder(BUILDER.CREATE_CUSTOM_APP_DESCRIPTION)}
-      </Button>
+      <Stack direction="row" alignItems="center" gap={1} flex={1}>
+        <Typography variant="body2">
+          {translateBuilder(BUILDER.CREATE_CUSTOM_APP_LABEL)}
+        </Typography>
+        <Button
+          startIcon={<Add fontSize="small" />}
+          variant="outlined"
+          onClick={addCustomApp}
+          id={CUSTOM_APP_BUTTON_ID}
+          size="small"
+        >
+          {translateBuilder(BUILDER.CREATE_CUSTOM_APP_DESCRIPTION)}
+        </Button>
+      </Stack>
       <NameForm
         setChanges={onChange}
         updatedProperties={updatedProperties}