diff --git a/packages/portal-admin/src/components/ActiveStepOne.tsx b/packages/portal-admin/src/components/ActiveStepOne.tsx
index 794e1670..f4bc590a 100644
--- a/packages/portal-admin/src/components/ActiveStepOne.tsx
+++ b/packages/portal-admin/src/components/ActiveStepOne.tsx
@@ -159,21 +159,6 @@ const ActiveStepOne: React.FC<ActiveStepOneProps> = ({
           }
           label="Display in Portal Apps Shelf"
         />
-        <FormControlLabel
-          control={
-            <Switch
-              name="showInSideBar"
-              id="showInSideBar"
-              sx={{'& .MuiSvgIcon-root': {fontSize: 18}}}
-              onChange={e => {
-                setShowInSideBarValue(e.target.checked)
-                handleChange(e)
-              }}
-              checked={values.showInSideBar}
-            />
-          }
-          label="Display in Sidebar Menu"
-        />
       </FormGroup>
     </>
   )
diff --git a/packages/portal-admin/src/components/ActiveStepZero.tsx b/packages/portal-admin/src/components/ActiveStepZero.tsx
index d9e062e6..6ebe2e4b 100644
--- a/packages/portal-admin/src/components/ActiveStepZero.tsx
+++ b/packages/portal-admin/src/components/ActiveStepZero.tsx
@@ -8,7 +8,8 @@ import {
   FormHelperText,
   FormControlLabel,
   MenuItem,
-  Radio
+  Radio,
+  Autocomplete
 } from '@mui/material'
 import {AppProps} from './FormInputProps'
 import {useEffect} from 'react'
@@ -110,7 +111,7 @@ const ActiveStepZero: React.FC<ActiveStepZeroProps> = ({
       )
     })
   }
-
+ 
   return (
     <>
       <FormControl fullWidth component="fieldset" required>
@@ -130,23 +131,30 @@ const ActiveStepZero: React.FC<ActiveStepZeroProps> = ({
         </RadioGroup>
       </FormControl>
       <FormControl fullWidth required sx={{mt: 1}}>
-        <InputLabel>{'category'}</InputLabel>
-        <Select
-          margin="dense"
-          fullWidth
-          inputRef={appCategoryFieldRef}
-          onChange={e => {
+        <Autocomplete
+          freeSolo
+          renderInput={params => (
+            <TextField
+              {...params}
+              id="category"
+              name="category"
+              label="Category *"
+              inputRef={appCategoryFieldRef}
+              onChange={e => {
+                appCategoryFieldRef.current.value = e.target.value
+              }}
+            />
+          )}
+          options={categoryOptions}
+          value={values.category}
+          onBlur={e => {
+            console.log(`appCategoryFieldRef.current.value: ${appCategoryFieldRef.current.value}`)
+            
             handleChange(e)
             setAppCategoryHelperMessage('')
           }}
-          id={'category'}
-          error={appCategoryHelperMessage ? true : false}
-          name={'category'}
-          value={values.category}
-          label={'category'}
-        >
-          {generateSingleOptions(categoryOptions)}
-        </Select>
+          
+        />
         <FormHelperText error={appCategoryHelperMessage ? true : false}>
           {appCategoryHelperMessage}
         </FormHelperText>
diff --git a/packages/portal-admin/src/components/AppsDataGrid.tsx b/packages/portal-admin/src/components/AppsDataGrid.tsx
index 8a31d666..0e834800 100644
--- a/packages/portal-admin/src/components/AppsDataGrid.tsx
+++ b/packages/portal-admin/src/components/AppsDataGrid.tsx
@@ -196,21 +196,6 @@ const AppsDataGrid = () => {
         />
       )
     },
-    {
-      field: 'showInSideBar',
-      headerName: 'Show In Side Bar',
-      type: 'boolean',
-      renderCell: params => (
-        <Checkbox
-          disabled
-          checked={params.value}
-          icon={<VisibilityOffIcon />}
-          checkedIcon={<VisibilityIcon />}
-          name="showInSideBar"
-          inputProps={{'aria-label': 'Show In Side Bar'}}
-        />
-      )
-    },
     {
       field: 'actions',
       headerName: 'Actions',
@@ -264,7 +249,16 @@ const AppsDataGrid = () => {
     try {
       setLoading(true)
       await getAllApps().then(apps => {
-        setApps(apps)
+        const mappings = {
+          internal: 'Built-in',
+          external: 'Shortcut',
+          esmodule: 'Extension'
+        }
+        const updatedApps = apps.map(app => ({
+          ...app,
+          type: mappings[app.type]
+        }))
+        setApps(updatedApps)
       })
     } catch (error) {
       enqueueSnackbar('Unable to fetch Apps', {variant: 'error'})
diff --git a/packages/portal-app/src/components/PortalHome/PortalHome.tsx b/packages/portal-app/src/components/PortalHome/PortalHome.tsx
index b9a042c1..fbb6ef89 100644
--- a/packages/portal-app/src/components/PortalHome/PortalHome.tsx
+++ b/packages/portal-app/src/components/PortalHome/PortalHome.tsx
@@ -8,6 +8,87 @@ import AppsShelfSkeleton from '../AppsShelfSkeleton/AppsShelfSkeleton'
 import AppsShelf from '../AppsShelf/AppsShelf'
 import {fetchApps} from '@jembi/openhim-core-api'
 
+const preloadedPortalApps = [
+  {
+    _id: '66f6ab7dd13af5ffa0d8aef7',
+    name: 'OpenHIM Docs',
+    description: 'Documentation for the OpenHIM',
+    icon: 'https://fonts.gstatic.com/s/i/materialicons/cloud/v12/24px.svg',
+    type: 'external',
+    category: 'Documentation',
+    access_roles: ['admin'],
+    url: 'https://openhim.org/docs/introduction/about',
+    showInPortal: true,
+    showInSideBar: false,
+    __v: 0
+  },
+  {
+    _id: '671621d593a136387ce3048c',
+    name: 'OpenHIM Platform Docs',
+    description: 'Documentation for the OpenHIM Platform',
+    icon: 'https://fonts.gstatic.com/s/i/materialicons/dashboard/v12/24px.svg',
+    type: 'external',
+    category: 'Documentation',
+    access_roles: ['admin'],
+    url: `https://jembi.gitbook.io/openhim-platform`,
+    showInPortal: true,
+    showInSideBar: false,
+    __v: 0
+  },
+  {
+    _id: '671621d593a136387ce3048c',
+    name: 'Transactions',
+    description: 'View incoming API requests',
+    icon: 'https://fonts.gstatic.com/s/i/materialicons/dashboard/v12/24px.svg',
+    type: 'internal',
+    category: 'OpenHIM',
+    access_roles: ['admin'],
+    url: `${window.location.origin}/#!/transactions`,
+    showInPortal: true,
+    showInSideBar: false,
+    __v: 0
+  },
+  {
+    _id: '671621d593a136387ce3048c',
+    name: 'Manage Channels',
+    description: 'View and manage channels',
+    icon: 'https://fonts.gstatic.com/s/i/materialicons/dashboard/v12/24px.svg',
+    type: 'internal',
+    category: 'OpenHIM',
+    access_roles: ['admin'],
+    url: `${window.location.origin}/#!/channels`,
+    showInPortal: true,
+    showInSideBar: false,
+    __v: 0
+  },
+  {
+    _id: '671621d593a136387ce3048c',
+    name: 'Manage Clients',
+    description: 'View and manage clients',
+    icon: 'https://fonts.gstatic.com/s/i/materialicons/dashboard/v12/24px.svg',
+    type: 'internal',
+    category: 'OpenHIM',
+    access_roles: ['admin'],
+    url: `${window.location.origin}/#!/clients`,
+    showInPortal: true,
+    showInSideBar: false,
+    __v: 0
+  },
+  {
+    _id: '671621d593a136387ce3048c',
+    name: 'Manage Users',
+    description: 'View and manage users',
+    icon: 'https://fonts.gstatic.com/s/i/materialicons/dashboard/v12/24px.svg',
+    type: 'internal',
+    category: 'OpenHIM',
+    access_roles: ['admin'],
+    url: `${window.location.origin}/#!/users`,
+    showInPortal: true,
+    showInSideBar: false,
+    __v: 0
+  }
+]
+
 function PortalHome() {
   const [isLoading, setLoading] = useState(true)
   const [portalApps, setApps] = useState([])
@@ -35,10 +116,10 @@ function PortalHome() {
   async function loadContent() {
     try {
       const updatedPortalApps = await fetchApps()
-      setApps(updatedPortalApps)
+      setApps([...preloadedPortalApps, ...updatedPortalApps])
     } catch (error) {
       enqueueSnackbar('Unable to fetch apps', {variant: 'error'})
-      setApps([]) // Clear the apps list on error
+      setApps([...preloadedPortalApps]) // Clear the apps list on error
     } finally {
       setLoading(false)
     }
@@ -49,11 +130,7 @@ function PortalHome() {
   }, [])
 
   return (
-    <Box
-      mt={'5%'}
-      ml={'10%'}
-      mr={'10%'}
-    >
+    <Box mt={'5%'} ml={'10%'} mr={'10%'}>
       <section id="PortalHeader">
         <Grid sx={{ml: 0, mt: 0}}>
           <Box width="100%" display="flex" justifyContent="space-between">