diff --git a/app/layout/project/navigation/types.ts b/app/layout/project/navigation/types.ts
index 325b538052..1e8a58aaa3 100644
--- a/app/layout/project/navigation/types.ts
+++ b/app/layout/project/navigation/types.ts
@@ -4,3 +4,5 @@ export type NavigationTreeCategories =
   | 'gridSetup'
   | 'solutions'
   | 'advancedSettings';
+
+export type NavigationInventoryTabs = 'protected-areas' | 'cost-surface' | 'features';
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
new file mode 100644
index 0000000000..45285a4b0c
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/index.tsx
@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+import { ArrowDown, ArrowUp } from 'lucide-react';
+
+import { cn } from 'utils/cn';
+
+import { HeaderItem } from './types';
+
+const HeaderItem = ({
+  className,
+  text,
+  name,
+  columns,
+  sorting,
+  onClick,
+}: HeaderItem): JSX.Element => {
+  const sortingMatches = /^(-?)(.+)$/.exec(sorting);
+  const sortField = sortingMatches[2];
+  const sortOrder = sortingMatches[1] === '-' ? 'desc' : 'asc';
+
+  const isActive = columns[name] === sortField;
+
+  const handleClick = useCallback(() => {
+    onClick(columns[name]);
+  }, [onClick, columns, name]);
+
+  return (
+    <button
+      type="button"
+      className={cn({
+        'inline-flex items-center space-x-2': true,
+        [className]: !!className,
+      })}
+      onClick={handleClick}
+    >
+      <span
+        className={cn({
+          'text-xs font-semibold uppercase leading-none text-gray-400': true,
+          'text-white': isActive,
+          [className]: !!className,
+        })}
+      >
+        {text}
+      </span>
+      {sortOrder === 'asc' && isActive ? (
+        <ArrowDown className={isActive ? 'text-blue-400' : 'text-gray-400'} size={20} />
+      ) : (
+        <ArrowUp className={isActive ? 'text-blue-400' : 'text-gray-400'} size={20} />
+      )}
+    </button>
+  );
+};
+
+export default HeaderItem;
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts
new file mode 100644
index 0000000000..b550e8447d
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/header-item/types.ts
@@ -0,0 +1,10 @@
+export type HeaderItem = {
+  className?: string;
+  text: string;
+  name: string;
+  columns: {
+    [key: string]: string;
+  };
+  sorting: string;
+  onClick?: (field: string) => void;
+};
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
new file mode 100644
index 0000000000..906bb73aa3
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/index.tsx
@@ -0,0 +1,87 @@
+import Checkbox from 'components/forms/checkbox';
+import Loading from 'components/loading';
+
+import HeaderItem from './header-item';
+import RowItem from './row-item';
+import { InventoryTable } from './types';
+
+const InventoryTable = ({
+  loading,
+  data,
+  noDataMessage,
+  columns,
+  sorting,
+  selectedIds,
+  onSortChange,
+  onToggleSeeOnMap,
+  onSelectRow,
+  onSelectAll,
+  ActionsComponent,
+}: InventoryTable): JSX.Element => {
+  const noData = !loading && data?.length === 0;
+
+  return (
+    <>
+      {loading && !data.length && (
+        <div className="relative min-h-[200px]">
+          <Loading
+            visible={true}
+            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          />
+        </div>
+      )}
+      {noData && <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>}
+      {!!data?.length && (
+        <table className="w-full table-auto space-y-2">
+          <thead className="text-left text-xs font-semibold uppercase">
+            <tr className="flex w-full items-center pl-1">
+              <th>
+                <Checkbox
+                  id="select-all"
+                  theme="light"
+                  className="block h-4 w-4 checked:bg-blue-400"
+                  onChange={onSelectAll}
+                />
+              </th>
+              <th className="flex-1 pl-2">
+                <HeaderItem
+                  text={'Name'}
+                  name={'name'}
+                  columns={columns}
+                  sorting={sorting}
+                  onClick={onSortChange}
+                />
+              </th>
+              <th className="flex flex-1 justify-start py-2 pl-14">
+                <HeaderItem
+                  className="justify-center"
+                  text={'Type'}
+                  name={'tag'}
+                  columns={columns}
+                  sorting={sorting}
+                  onClick={onSortChange}
+                />
+              </th>
+            </tr>
+          </thead>
+          <tbody className="block max-h-[calc(100vh-430px)] divide-y divide-gray-400 overflow-y-auto overflow-x-hidden pl-1 align-baseline text-sm">
+            {data.map((item) => (
+              <RowItem
+                key={item.id}
+                item={item}
+                selectedIds={selectedIds}
+                onSelectRow={onSelectRow}
+                onToggleSeeOnMap={onToggleSeeOnMap}
+                ActionsComponent={ActionsComponent}
+              />
+            ))}
+          </tbody>
+        </table>
+      )}
+    </>
+  );
+};
+
+export { type DataItem } from './types';
+
+export default InventoryTable;
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
new file mode 100644
index 0000000000..9facd7eb38
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/index.tsx
@@ -0,0 +1,85 @@
+import { MoreHorizontal } from 'lucide-react';
+
+import Checkbox from 'components/forms/checkbox';
+import Icon from 'components/icon';
+import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
+import { cn } from 'utils/cn';
+
+import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
+import SHOW_SVG from 'svgs/ui/show.svg?sprite';
+
+import { RowItem } from './types';
+
+const RowItem = ({
+  item,
+  selectedIds,
+  onSelectRow,
+  onToggleSeeOnMap,
+  ActionsComponent,
+}: RowItem) => {
+  const { id, name, scenarios, tag, isVisibleOnMap } = item;
+
+  return (
+    <tr key={id} className="align-top">
+      <td className="pb-2 pr-1 pt-5">
+        <Checkbox
+          id={`select-${id}`}
+          theme="light"
+          className="block h-4 w-4 checked:bg-blue-400"
+          onChange={onSelectRow}
+          value={id}
+          checked={selectedIds.includes(id)}
+        />
+      </td>
+      <td className="px-1 pb-2 pt-5">
+        <span className="inline-flex">{name}</span>
+        <div className="mt-1.5 text-xs text-gray-300">
+          Currently in use in
+          <span className="rounded bg-blue-500 bg-opacity-10 px-1 text-blue-500">
+            {scenarios}
+          </span>{' '}
+          scenarios.
+        </div>
+      </td>
+      <td className="px-6 pb-2 pt-5 text-xs">
+        {tag && (
+          <div className="flex justify-center">
+            <span className="whitespace-nowrap rounded-full bg-yellow-600 bg-opacity-10 px-2 py-1 text-yellow-600">
+              {tag}
+            </span>
+          </div>
+        )}
+      </td>
+      <td className="pb-2 pl-1 pr-2 pt-5">
+        <div className="flex gap-6">
+          <button type="button" onClick={() => onToggleSeeOnMap(id)}>
+            <Icon
+              className={cn({
+                'h-5 w-5 text-gray-400': true,
+                'text-blue-400': isVisibleOnMap,
+              })}
+              icon={isVisibleOnMap ? SHOW_SVG : HIDE_SVG}
+            />
+          </button>
+          <Popover>
+            <PopoverTrigger asChild>
+              <button type="button" className="h-5 w-5">
+                <MoreHorizontal className="h-4 w-4 text-white" />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-auto rounded-2xl border-transparent p-0"
+              side="bottom"
+              sideOffset={5}
+              align="start"
+            >
+              <ActionsComponent item={item} />
+            </PopoverContent>
+          </Popover>
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default RowItem;
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts
new file mode 100644
index 0000000000..350ee574ec
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/row-item/types.ts
@@ -0,0 +1,11 @@
+import { ChangeEvent } from 'react';
+
+import { DataItem } from '../types';
+
+export type RowItem = {
+  item: DataItem;
+  selectedIds: string[];
+  onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
+  onToggleSeeOnMap: (id: string) => void;
+  ActionsComponent: ({ item }) => JSX.Element;
+};
diff --git a/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts
new file mode 100644
index 0000000000..b89b6d68c8
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/components/inventory-table/types.ts
@@ -0,0 +1,25 @@
+import { ChangeEvent } from 'react';
+
+export type DataItem = {
+  id: string;
+  name: string;
+  scenarios: number;
+  tag: string;
+  isVisibleOnMap: boolean;
+};
+
+export type InventoryTable = {
+  loading: boolean;
+  data: DataItem[];
+  noDataMessage: string;
+  columns: {
+    [key: string]: string;
+  };
+  sorting: string;
+  selectedIds: string[];
+  onSortChange: (field: string) => void;
+  onToggleSeeOnMap: (id: string) => void;
+  onSelectRow: (evt: ChangeEvent<HTMLInputElement>) => void;
+  onSelectAll: (evt: ChangeEvent<HTMLInputElement>) => void;
+  ActionsComponent: ({ item }) => JSX.Element;
+};
diff --git a/app/layout/project/sidebar/project/inventory-panel/constants.ts b/app/layout/project/sidebar/project/inventory-panel/constants.ts
new file mode 100644
index 0000000000..7acacc1f3d
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/constants.ts
@@ -0,0 +1,37 @@
+import { NavigationInventoryTabs } from 'layout/project/navigation/types';
+
+import CostSurfaceTable from './cost-surface';
+import CostSurfaceInfo from './cost-surface/info';
+import FeaturesTable from './features';
+import FeaturesInfo from './features/info';
+import FeatureUploadModal from './features/modals/upload';
+import ProtectedAreasTable from './protected-areas';
+import ProtectedAreasFooter from './protected-areas/footer';
+import { InventoryPanel } from './types';
+
+export const INVENTORY_TABS = {
+  'protected-areas': {
+    title: 'Protected Areas',
+    search: 'Search protected areas',
+    noData: 'No protected areas found.',
+    TableComponent: ProtectedAreasTable,
+    FooterComponent: ProtectedAreasFooter,
+  },
+  'cost-surface': {
+    title: 'Cost Surface',
+    search: 'Search cost surfaces',
+    noData: 'No cost surfaces found.',
+    InfoComponent: CostSurfaceInfo,
+    TableComponent: CostSurfaceTable,
+  },
+  features: {
+    title: 'Features',
+    search: 'Search features',
+    noData: 'No features found.',
+    InfoComponent: FeaturesInfo,
+    UploadModalComponent: FeatureUploadModal,
+    TableComponent: FeaturesTable,
+  },
+} satisfies {
+  [key in NavigationInventoryTabs]: InventoryPanel;
+};
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surface/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surface/index.tsx
index e54c0cc7bb..20c04506aa 100644
--- a/app/layout/project/sidebar/project/inventory-panel/cost-surface/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surface/index.tsx
@@ -1,7 +1,5 @@
-import Section from 'layout/section';
-
-const InventoryPanelCostSurface = (): JSX.Element => {
-  return <Section>InventoryPanelCostSurface</Section>;
+const InventoryPanelCostSurface = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
+  return <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>;
 };
 
 export default InventoryPanelCostSurface;
diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surface/info/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surface/info/index.tsx
new file mode 100644
index 0000000000..6c5bc50ae0
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/cost-surface/info/index.tsx
@@ -0,0 +1,28 @@
+import COST_LAND_IMG from 'images/info-buttons/img_cost_surface_marine.png';
+import COST_SEA_IMG from 'images/info-buttons/img_cost_surface_terrestrial.png';
+
+const CostSurfaceInfo = (): JSX.Element => {
+  return (
+    <>
+      <h4 className="mb-2.5 font-heading text-lg">What is a Cost Surface?</h4>
+      <div className="space-y-2">
+        <p>
+          Marxan aims to minimize socio-economic impacts and conflicts between uses through what is
+          called the “cost” surface. In conservation planning, cost data may reflect acquisition,
+          management, or opportunity costs ($), but may also reflect non-monetary impacts. Proxies
+          are commonly used in absence of fine-scale socio-economic information. A default value for
+          cost will be the planning unit area but you can upload your cost surface.
+        </p>
+        <p>
+          In the examples below, we illustrate how distance from a city, road or port can be used as
+          a proxy cost surface. In these examples, areas with many competing activities will make a
+          planning unit cost more than areas further away with less competition for access.
+        </p>
+        <img src={COST_SEA_IMG} alt="Cost sea" />
+        <img src={COST_LAND_IMG} alt="Cost Land" />
+      </div>
+    </>
+  );
+};
+
+export default CostSurfaceInfo;
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/item/actions/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
similarity index 65%
rename from app/layout/project/sidebar/project/inventory-panel/features/list/item/actions/index.tsx
rename to app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
index c64032733a..9d5cf5c54d 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/item/actions/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/actions-menu/index.tsx
@@ -1,27 +1,33 @@
-import { useCallback, useState, ButtonHTMLAttributes } from 'react';
-
-import { FileEdit, Trash2, Tag } from 'lucide-react';
+import { useCallback, useState } from 'react';
 
+import Icon from 'components/icon';
 import Modal from 'components/modal/component';
 import DeleteModal from 'layout/project/sidebar/project/inventory-panel/features/modals/delete';
 import EditModal from 'layout/project/sidebar/project/inventory-panel/features/modals/edit';
-import { Feature } from 'types/api/feature';
 import { cn } from 'utils/cn';
 
+import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
+import TAG_SVG from 'svgs/ui/tag.svg?sprite';
+
 const BUTTON_CLASSES =
   'flex items-center px-4 py-2 w-full text-sm cursor-pointer bg-gray-700 hover:bg-gray-500 transition transition-colors space-x-2 group';
 
-const ICON_CLASSES = 'text-gray-400 group-hover:text-white';
+const ICON_CLASSES = 'h-5 w-5 text-gray-400 group-hover:text-white';
 
-const FeatureActions = ({
-  feature,
-  onEditName,
-  isDeletable,
+const ActionsMenu = ({
+  item,
 }: {
-  feature: Feature;
-  isDeletable: boolean;
-  onEditName: (evt: Parameters<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>[0]) => void;
+  item: {
+    id: string;
+    name: string;
+    scenarios: number;
+    tag: string;
+    custom: boolean;
+  };
 }): JSX.Element => {
+  const isDeletable = !item.custom && !item.scenarios;
+
+  // item.isCustom && !item.scenarioUsageCount
   const [modalState, setModalState] = useState<{ edit: boolean; delete: boolean }>({
     edit: false,
     delete: false,
@@ -33,39 +39,27 @@ const FeatureActions = ({
 
   return (
     <ul className="rounded-2xl border-gray-500">
-      <li>
-        <button
-          type="button"
-          onClick={onEditName}
-          className={cn({
-            [BUTTON_CLASSES]: true,
-            'rounded-t-2xl': true,
-          })}
-        >
-          <FileEdit className={ICON_CLASSES} size={20} />
-          <span>Rename</span>
-        </button>
-      </li>
       <li>
         <button
           type="button"
           onClick={() => handleModal('edit', true)}
           className={cn({
             [BUTTON_CLASSES]: true,
+            'rounded-t-2xl': true,
             'last:rounded-b-2xl': !isDeletable,
           })}
         >
-          <Tag className={ICON_CLASSES} size={20} />
+          <Icon icon={TAG_SVG} className={ICON_CLASSES} />
           <span>Edit</span>
         </button>
         <Modal
-          id="edit-feaure-modal"
+          id="edit-feature-modal"
           title="All features"
           open={modalState.edit}
           size="narrow"
           onDismiss={() => handleModal('edit', false)}
         >
-          <EditModal featureId={feature.id} handleModal={handleModal} />
+          <EditModal featureId={item.id} handleModal={handleModal} />
         </Modal>
       </li>
       {isDeletable && (
@@ -80,7 +74,7 @@ const FeatureActions = ({
               'rounded-b-2xl': true,
             })}
           >
-            <Trash2 className={ICON_CLASSES} size={20} />
+            <Icon icon={DELETE_SVG} className={ICON_CLASSES} />
             <span>Delete</span>
           </button>
           <Modal
@@ -92,7 +86,7 @@ const FeatureActions = ({
               handleModal('delete', false);
             }}
           >
-            <DeleteModal selectedFeaturesIds={[feature.id]} />
+            <DeleteModal selectedFeaturesIds={[item.id]} />
           </Modal>
         </li>
       )}
@@ -100,4 +94,4 @@ const FeatureActions = ({
   );
 };
 
-export default FeatureActions;
+export default ActionsMenu;
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
index b692fed2f6..ab35ef62c6 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/index.tsx
@@ -7,7 +7,7 @@ import DeleteModal from 'layout/project/sidebar/project/inventory-panel/features
 import EditBulkModal from 'layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk';
 import { Feature } from 'types/api/feature';
 
-import EDIT_SVG from 'svgs/project/edit.svg?sprite';
+import EDIT_SVG from 'svgs/ui/edit.svg?sprite';
 import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite';
 
 const BUTTON_CLASSES =
@@ -30,7 +30,7 @@ const FeaturesBulkActionMenu = ({
 
   return (
     <>
-      <div className="mt-1 grid w-full grid-cols-3 items-center space-x-2 rounded-xl bg-gray-500 p-1">
+      <div className="grid w-full grid-cols-3 items-center space-x-2 rounded-xl bg-gray-500 p-1">
         <span className="col-span-1 flex items-center justify-center space-x-2">
           <span className="block w-[20px] rounded-[4px] bg-blue-400/25 px-1 text-center text-xs font-semibold text-blue-400">
             {selectedFeaturesIds.length}
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
index e032a977ed..2e5f5967a2 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
@@ -1,87 +1,131 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState, ChangeEvent, useEffect } from 'react';
 
-import { useAppDispatch } from 'store/hooks';
-import { setSearch } from 'store/slices/projects/[id]';
+import { useRouter } from 'next/router';
 
-import Button from 'components/button';
-import Icon from 'components/icon';
-import InfoButton from 'components/info-button';
-import Search, { SearchProps } from 'components/search';
-import Section from 'layout/section';
+import { useAppDispatch, useAppSelector } from 'store/hooks';
+import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
 
-import FEATURE_ABUND_IMG from 'images/info-buttons/img_abundance_data.png';
-import FEATURE_SOCIAL_IMG from 'images/info-buttons/img_social_uses.png';
-import FEATURE_SPECIES_IMG from 'images/info-buttons/img_species_range.png';
+import { useAllFeatures } from 'hooks/features';
 
-import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite';
+import { Feature } from 'types/api/feature';
 
-import ProjectFeatureList from './list';
-import FeatureUploadModal from './modals/upload';
+import InventoryTable, { type DataItem } from '../components/inventory-table';
 
-const InventoryPanelFeatures = (): JSX.Element => {
+import ActionsMenu from './actions-menu';
+import FeaturesBulkActionMenu from './bulk-action-menu';
+
+const FEATURES_TABLE_COLUMNS = {
+  name: 'featureClassName',
+  tag: 'tag',
+};
+
+const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
   const dispatch = useAppDispatch();
 
-  const handleSearch = useCallback(
-    (value: Parameters<SearchProps['onChange']>[0]) => {
-      dispatch(setSearch(value));
+  const { selectedFeatures: visibleFeatures, search } = useAppSelector(
+    (state) => state['/projects/[id]']
+  );
+
+  const [filters, setFilters] = useState<Parameters<typeof useAllFeatures>[1]>({
+    sort: 'featureClassName',
+  });
+  const [selectedFeaturesIds, setSelectedFeaturesIds] = useState<Feature['id'][]>([]);
+  const { query } = useRouter();
+  const { pid } = query as { pid: string };
+
+  const allFeaturesQuery = useAllFeatures(
+    pid,
+    {
+      ...filters,
+      search,
     },
-    [dispatch]
+    {
+      select: ({ data }) =>
+        data?.map((feature) => ({
+          id: feature.id,
+          name: feature.featureClassName,
+          scenarios: feature.scenarioUsageCount,
+          tag: feature.tag,
+          isCustom: feature.isCustom,
+        })),
+      placeholderData: { data: [] },
+      keepPreviousData: true,
+    }
   );
-  const [isOpenFeatureUploader, setOpenFeatureUploader] = useState(false);
 
-  const handleFeatureUploader = useCallback(() => {
-    setOpenFeatureUploader(true);
-  }, []);
+  const featureIds = allFeaturesQuery.data?.map((feature) => feature.id);
+
+  const handleSelectAll = useCallback(
+    (evt: ChangeEvent<HTMLInputElement>) => {
+      setSelectedFeaturesIds(evt.target.checked ? featureIds : []);
+    },
+    [featureIds]
+  );
 
-  const closeFeatureUploadModal = useCallback(() => {
-    setOpenFeatureUploader(false);
+  const handleSelectFeature = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
+    if (evt.target.checked) {
+      setSelectedFeaturesIds((prevSelectedFeatures) => [...prevSelectedFeatures, evt.target.value]);
+    } else {
+      setSelectedFeaturesIds((prevSelectedFeatures) =>
+        prevSelectedFeatures.filter((featureId) => featureId !== evt.target.value)
+      );
+    }
   }, []);
 
+  const handleSort = useCallback(
+    (_sortType: (typeof filters)['sort']) => {
+      const sort = filters.sort === _sortType ? `-${_sortType}` : _sortType;
+
+      setFilters((prevFilters) => ({
+        ...prevFilters,
+        sort,
+      }));
+    },
+    [filters.sort]
+  );
+
+  useEffect(() => {
+    setSelectedFeaturesIds([]);
+  }, [search]);
+
+  const toggleSeeOnMap = useCallback(
+    (featureId: Feature['id']) => {
+      const newSelectedFeatures = [...visibleFeatures];
+      if (!newSelectedFeatures.includes(featureId)) {
+        newSelectedFeatures.push(featureId);
+      } else {
+        const i = newSelectedFeatures.indexOf(featureId);
+        newSelectedFeatures.splice(i, 1);
+      }
+      dispatch(setVisibleFeatures(newSelectedFeatures));
+    },
+    [dispatch, visibleFeatures]
+  );
+
+  const displayBulkActions = selectedFeaturesIds.length > 0;
+
+  const data: DataItem[] = allFeaturesQuery.data?.map((feature) => ({
+    ...feature,
+    isVisibleOnMap: visibleFeatures.includes(feature.id),
+  }));
+
   return (
-    <Section className="relative">
-      <header className="flex items-center justify-between">
-        <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-400">Inventory Panel</span>
-          <h3 className="flex items-center space-x-2">
-            <span className="text-lg font-medium">Features</span>
-            <InfoButton theme="tertiary">
-              <>
-                <h4 className="mb-2.5 font-heading text-lg">What are features?</h4>
-                <div className="space-y-2">
-                  <p>
-                    Features are the important habitats, species, processes, activities, and
-                    discrete areas that you want to consider in your planning process. Common
-                    feature data formats are range maps, polygons, abundances, and continuous scale
-                    or probability of occurrence maps (e.g. 0-1). Features can include more than
-                    just ecological data but also be cultural and socio-economic areas like
-                    community fishing grounds or traditional-use areas, and other human activities
-                    and industries. Every feature must have a minimum target amount set. Some
-                    examples include:
-                  </p>
-                  <img src={FEATURE_SPECIES_IMG} alt="Feature-Range" />
-                  <img src={FEATURE_ABUND_IMG} alt="Feature-Abundance" />
-                  <img src={FEATURE_SOCIAL_IMG} alt="Feature-Social" />
-                </div>
-              </>
-            </InfoButton>
-          </h3>
-        </div>
-        <Button theme="primary" size="base" onClick={handleFeatureUploader} className="space-x-3">
-          <span>Upload</span>
-          <Icon icon={UPLOAD_SVG} className="h-5 w-5 stroke-current" />
-        </Button>
-      </header>
-      <Search
-        id="feature-search"
-        size="sm"
-        placeholder="Search features"
-        aria-label="Search features"
-        onChange={handleSearch}
-        theme="dark"
+    <div className="space-y-6">
+      <InventoryTable
+        loading={allFeaturesQuery.isFetching}
+        data={data}
+        noDataMessage={noDataMessage}
+        columns={FEATURES_TABLE_COLUMNS}
+        sorting={filters.sort}
+        selectedIds={selectedFeaturesIds}
+        onSortChange={handleSort}
+        onSelectAll={handleSelectAll}
+        onSelectRow={handleSelectFeature}
+        onToggleSeeOnMap={toggleSeeOnMap}
+        ActionsComponent={ActionsMenu}
       />
-      <ProjectFeatureList />
-      <FeatureUploadModal isOpen={isOpenFeatureUploader} onDismiss={closeFeatureUploadModal} />
-    </Section>
+      {displayBulkActions && <FeaturesBulkActionMenu selectedFeaturesIds={selectedFeaturesIds} />}
+    </div>
   );
 };
 
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/info/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/info/index.tsx
new file mode 100644
index 0000000000..2b3160e600
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/features/info/index.tsx
@@ -0,0 +1,27 @@
+import FEATURE_ABUND_IMG from 'images/info-buttons/img_abundance_data.png';
+import FEATURE_SOCIAL_IMG from 'images/info-buttons/img_social_uses.png';
+import FEATURE_SPECIES_IMG from 'images/info-buttons/img_species_range.png';
+
+const FeaturesInfo = (): JSX.Element => {
+  return (
+    <>
+      <h4 className="mb-2.5 font-heading text-lg">What are features?</h4>
+      <div className="space-y-2">
+        <p>
+          Features are the important habitats, species, processes, activities, and discrete areas
+          that you want to consider in your planning process. Common feature data formats are range
+          maps, polygons, abundances, and continuous scale or probability of occurrence maps (e.g.
+          0-1). Features can include more than just ecological data but also be cultural and
+          socio-economic areas like community fishing grounds or traditional-use areas, and other
+          human activities and industries. Every feature must have a minimum target amount set. Some
+          examples include:
+        </p>
+        <img src={FEATURE_SPECIES_IMG} alt="Feature-Range" />
+        <img src={FEATURE_ABUND_IMG} alt="Feature-Abundance" />
+        <img src={FEATURE_SOCIAL_IMG} alt="Feature-Social" />
+      </div>
+    </>
+  );
+};
+
+export default FeaturesInfo;
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
deleted file mode 100644
index 34218148fa..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/index.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { useCallback, useState, ChangeEvent, useEffect } from 'react';
-
-import { useRouter } from 'next/router';
-
-import { useAppDispatch, useAppSelector } from 'store/hooks';
-import { setSelectedFeatures as setVisibleFeatures } from 'store/slices/projects/[id]';
-
-import { ArrowDown, ArrowUp } from 'lucide-react';
-
-import { useAllFeatures } from 'hooks/features';
-
-import Checkbox from 'components/forms/checkbox';
-import Loading from 'components/loading';
-import { Feature } from 'types/api/feature';
-import { cn } from 'utils/cn';
-
-import FeaturesBulkActionMenu from '../bulk-action-menu';
-
-import FeatureItemList from './item';
-
-export const ProjectFeatureList = (): JSX.Element => {
-  const dispatch = useAppDispatch();
-  const { selectedFeatures: visibleFeatures, search } = useAppSelector(
-    (state) => state['/projects/[id]']
-  );
-
-  const [filters, setFilters] = useState<Parameters<typeof useAllFeatures>[1]>({
-    sort: 'featureClassName',
-  });
-  const [selectedFeaturesIds, setSelectedFeaturesIds] = useState<Feature['id'][]>([]);
-  const { query } = useRouter();
-  const { pid } = query as { pid: string };
-  const allFeaturesQuery = useAllFeatures<Feature[]>(
-    pid,
-    {
-      ...filters,
-      search,
-    },
-    {
-      select: ({ data }) => data,
-      placeholderData: { data: [] },
-    }
-  );
-  const featureIds = allFeaturesQuery.data?.map((feature) => feature.id);
-
-  const handleSelectAll = useCallback(
-    (evt: ChangeEvent<HTMLInputElement>) => {
-      setSelectedFeaturesIds(evt.target.checked ? featureIds : []);
-    },
-    [featureIds]
-  );
-
-  const handleSelectFeature = useCallback((evt: ChangeEvent<HTMLInputElement>) => {
-    if (evt.target.checked) {
-      setSelectedFeaturesIds((prevSelectedFeatures) => [...prevSelectedFeatures, evt.target.value]);
-    } else {
-      setSelectedFeaturesIds((prevSelectedFeatures) =>
-        prevSelectedFeatures.filter((featureId) => featureId !== evt.target.value)
-      );
-    }
-  }, []);
-
-  const handleSort = useCallback(
-    (_sortType: (typeof filters)['sort']) => {
-      const sort = filters.sort === _sortType ? `-${_sortType}` : _sortType;
-
-      setFilters((prevFilters) => ({
-        ...prevFilters,
-        sort,
-      }));
-    },
-    [filters.sort]
-  );
-
-  const toggleSeeOnMap = useCallback(
-    (featureId: Feature['id']) => {
-      const newSelectedFeatures = [...visibleFeatures];
-
-      if (!newSelectedFeatures.includes(featureId)) {
-        newSelectedFeatures.push(featureId);
-      } else {
-        const i = newSelectedFeatures.indexOf(featureId);
-        newSelectedFeatures.splice(i, 1);
-      }
-      dispatch(setVisibleFeatures(newSelectedFeatures));
-    },
-    [dispatch, visibleFeatures]
-  );
-
-  useEffect(() => {
-    setSelectedFeaturesIds([]);
-  }, [search]);
-
-  return (
-    <div className="space-y-4">
-      <div className="grid grid-cols-2 gap-8 py-2 pl-1">
-        <div className="col-span-1 flex items-center space-x-2">
-          <Checkbox
-            id="select-all"
-            theme="light"
-            className="block h-4 w-4 checked:bg-blue-400"
-            onChange={handleSelectAll}
-          />
-          <button
-            type="button"
-            className="flex items-center space-x-2"
-            onClick={() => handleSort('featureClassName')}
-          >
-            <span
-              className={cn({
-                'leading-none text-gray-400': true,
-                'text-white': filters.sort.includes('featureClassName'),
-              })}
-            >
-              Name
-            </span>
-            {filters.sort === 'featureClassName' ? (
-              <ArrowDown
-                className={filters.sort === 'featureClassName' ? 'text-blue-400' : 'text-gray-400'}
-                size={20}
-              />
-            ) : (
-              <ArrowUp
-                className={filters.sort === '-featureClassName' ? 'text-blue-400' : 'text-gray-400'}
-                size={20}
-              />
-            )}
-          </button>
-        </div>
-        <div className="col-span-1 flex items-center space-x-2">
-          <button
-            type="button"
-            className="flex items-center space-x-2"
-            onClick={() => handleSort('tag')}
-          >
-            <span
-              className={cn({
-                'leading-none text-gray-400': true,
-                'text-white': filters.sort.includes('tag'),
-              })}
-            >
-              Type
-            </span>
-            {filters.sort === 'tag' ? (
-              <ArrowDown
-                className={filters.sort === 'tag' ? 'text-blue-400' : 'text-gray-400'}
-                size={20}
-              />
-            ) : (
-              <ArrowUp
-                className={filters.sort === '-tag' ? 'text-blue-400' : 'text-gray-400'}
-                size={20}
-              />
-            )}
-          </button>
-        </div>
-      </div>
-      <div className="relative">
-        {allFeaturesQuery.isFetching && (
-          <div className="relative min-h-[200px]">
-            <Loading
-              visible={allFeaturesQuery.isFetching}
-              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-            />
-          </div>
-        )}
-
-        {!allFeaturesQuery.data?.length && allFeaturesQuery.isFetching === false && (
-          <div className="flex h-[200px] items-center justify-center">No features found.</div>
-        )}
-        {!allFeaturesQuery.isFetching && (
-          <div
-            className={cn({
-              "flex min-h-0 flex-grow flex-col overflow-hidden before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-[calc(100%-20px)] before:bg-gradient-to-b before:from-gray-700 before:content-[''] after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-[calc(100%-20px)] after:bg-gradient-to-t after:from-gray-700 after:content-['']":
-                true,
-              'after:bottom-12': selectedFeaturesIds.length > 0,
-            })}
-          >
-            <ul className="max-h-[calc(100vh-400px)] divide-y divide-gray-400 overflow-y-auto py-3 pl-1 pr-2">
-              {allFeaturesQuery.data?.map((feature) => (
-                <li key={feature.id} className="flex items-center justify-between py-3">
-                  <FeatureItemList
-                    feature={feature}
-                    projectId={pid}
-                    onSelectFeature={handleSelectFeature}
-                    isSelected={selectedFeaturesIds.includes(feature.id)}
-                    toggleSeeOnMap={() => toggleSeeOnMap(feature.id)}
-                    isShown={visibleFeatures.includes(feature.id)}
-                  />
-                </li>
-              ))}
-            </ul>
-
-            {selectedFeaturesIds.length > 0 && (
-              <FeaturesBulkActionMenu selectedFeaturesIds={selectedFeaturesIds} />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ProjectFeatureList;
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/list/item/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/list/item/index.tsx
deleted file mode 100644
index a7ad4068fc..0000000000
--- a/app/layout/project/sidebar/project/inventory-panel/features/list/item/index.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useCallback, useState, ChangeEvent, useRef, InputHTMLAttributes } from 'react';
-
-import { useQueryClient } from 'react-query';
-
-import { MoreHorizontal } from 'lucide-react';
-
-import { useEditFeature } from 'hooks/features';
-import { useToasts } from 'hooks/toast';
-
-import Checkbox from 'components/forms/checkbox';
-import Icon from 'components/icon';
-import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
-import Tag from 'components/tag';
-import { Feature } from 'types/api/feature';
-import { Project } from 'types/api/project';
-import { cn } from 'utils/cn';
-
-import HIDE_SVG from 'svgs/ui/hide.svg?sprite';
-import SHOW_SVG from 'svgs/ui/show.svg?sprite';
-
-import FeatureActions from './actions';
-
-const FeatureItemList = ({
-  feature,
-  projectId,
-  isSelected,
-  onSelectFeature,
-  toggleSeeOnMap,
-  isShown,
-}: {
-  feature: Feature;
-  projectId: Project['id'];
-  isSelected: boolean;
-  onSelectFeature: (evt: ChangeEvent<HTMLInputElement>) => void;
-  toggleSeeOnMap: () => void;
-  isShown: boolean;
-}): JSX.Element => {
-  const queryClient = useQueryClient();
-  const { addToast } = useToasts();
-
-  const [isEditable, setEditable] = useState(false);
-  const nameInputRef = useRef<HTMLInputElement>(null);
-  const { mutate: editFeature } = useEditFeature();
-
-  const handleRename = useCallback(() => {
-    setEditable(true);
-    nameInputRef.current?.focus();
-  }, [nameInputRef]);
-
-  const handleNameChanges = useCallback(
-    (evt: Parameters<InputHTMLAttributes<HTMLInputElement>['onKeyDown']>[0]) => {
-      if (evt.key === 'Enter') {
-        setEditable(false);
-        nameInputRef.current?.blur();
-
-        editFeature(
-          {
-            fid: feature.id,
-            body: {
-              featureClassName: evt.currentTarget.value,
-            },
-          },
-          {
-            onSuccess: async () => {
-              await queryClient.invalidateQueries(['all-features', projectId]);
-
-              addToast(
-                'edit-project-features',
-                <>
-                  <h2 className="font-medium">Success</h2>
-                  <p className="text-sm">The feature was updated successfully.</p>
-                </>,
-                {
-                  level: 'success',
-                }
-              );
-            },
-            onError: () => {
-              addToast(
-                'edit-project-features',
-                <>
-                  <h2 className="font-medium">Error</h2>
-                  <p className="text-sm">Something went wrong editing the feature.</p>
-                </>,
-                {
-                  level: 'error',
-                }
-              );
-            },
-          }
-        );
-      }
-    },
-    [nameInputRef, projectId, feature.id, editFeature, addToast, queryClient]
-  );
-
-  return (
-    <>
-      <div className="col-span-3 flex space-x-2">
-        <Checkbox
-          id={`item-${feature.id}`}
-          theme="light"
-          className="block h-4 w-4 checked:bg-blue-400"
-          onChange={onSelectFeature}
-          checked={isSelected}
-          value={feature.id}
-        />
-        <div className="flex flex-col space-y-2">
-          <input
-            ref={nameInputRef}
-            defaultValue={feature.featureClassName}
-            readOnly={!isEditable}
-            className={cn({
-              'text-ellipsis bg-transparent p-0 text-sm font-medium leading-none': true,
-              'border-transparent': isEditable,
-            })}
-            onKeyDown={handleNameChanges}
-          />
-          {Boolean(feature.scenarioUsageCount) && (
-            <span className="flex space-x-1 text-xs">
-              <span>Currently in use in</span>
-              <span className="block rounded-[4px]  bg-blue-400/25 px-1 text-xs font-semibold text-blue-400">
-                {feature.scenarioUsageCount}
-              </span>
-              <span>scenarios.</span>
-            </span>
-          )}
-        </div>
-      </div>
-      <div className="col-span-2">
-        {feature.tag && (
-          <Tag className="rounded-2xl bg-yellow-500/10 px-3 py-[2px] font-medium text-yellow-500">
-            <span className="text-xs">{feature.tag}</span>
-          </Tag>
-        )}
-      </div>
-      <div className="col-span-1 flex space-x-3">
-        <button type="button" onClick={toggleSeeOnMap}>
-          <Icon
-            className={cn({
-              'h-4 w-4': true,
-              'text-blue-400': isShown,
-            })}
-            icon={isShown ? SHOW_SVG : HIDE_SVG}
-          />
-        </button>
-        <Popover>
-          <PopoverTrigger asChild>
-            <button type="button" className="rounded-full bg-black">
-              <MoreHorizontal className="text-white" />
-            </button>
-          </PopoverTrigger>
-          <PopoverContent
-            className="w-auto rounded-2xl border-transparent p-0"
-            side="bottom"
-            sideOffset={5}
-            align="start"
-          >
-            <FeatureActions
-              feature={feature}
-              onEditName={handleRename}
-              isDeletable={feature.isCustom && !feature.scenarioUsageCount}
-            />
-          </PopoverContent>
-        </Popover>
-      </div>
-    </>
-  );
-};
-
-export default FeatureItemList;
diff --git a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
index 3b9b66ca29..33b30b7824 100644
--- a/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/features/modals/edit-bulk/index.tsx
@@ -216,7 +216,7 @@ const EditBulkModal = ({
                       {values.tag && tagIsDone && (
                         <div className="flex items-center space-x-1">
                           <div className="inline-block items-center space-x-2 rounded-2xl border border-yellow-600 bg-yellow-400/50 px-3 py-0.5 hover:bg-yellow-600">
-                            <p className="text-sm first-letter:text-gray-800">{values.tag}</p>
+                            <p className="text-sm text-gray-800">{values.tag}</p>
                           </div>
                           <button
                             className="group flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-gray-300 hover:bg-gray-500"
diff --git a/app/layout/project/sidebar/project/inventory-panel/index.tsx b/app/layout/project/sidebar/project/inventory-panel/index.tsx
new file mode 100644
index 0000000000..16902534ef
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/index.tsx
@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useRouter } from 'next/router';
+
+import { useAppDispatch } from 'store/hooks';
+import { setSearch } from 'store/slices/projects/[id]';
+
+import Button from 'components/button';
+import Icon from 'components/icon';
+import InfoButton from 'components/info-button';
+import Search, { SearchProps } from 'components/search';
+import { NavigationInventoryTabs } from 'layout/project/navigation/types';
+
+import UPLOAD_SVG from 'svgs/ui/upload.svg?sprite';
+
+import { INVENTORY_TABS } from './constants';
+import { InventoryPanel } from './types';
+
+const InventoryPanel = (): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const { query } = useRouter();
+  const { tab } = query as { tab: NavigationInventoryTabs };
+
+  const panel = INVENTORY_TABS[tab] as InventoryPanel;
+
+  const [isOpenUploader, setOpenUploader] = useState(false);
+
+  // Ensure uploader modals are closed if we change panels
+  useEffect(() => {
+    setOpenUploader(false);
+  }, [panel]);
+
+  // Handle upload modals
+  const handleUploader = useCallback(() => {
+    setOpenUploader(true);
+  }, []);
+
+  const closeUploadModal = useCallback(() => {
+    setOpenUploader(false);
+  }, []);
+
+  // Handle search
+  const handleSearch = useCallback(
+    (value: Parameters<SearchProps['onChange']>[0]) => {
+      dispatch(setSearch(value));
+    },
+    [dispatch]
+  );
+
+  // Shouldn't happen that the panel/tab doesn't exist, but in case it happens let's
+  // add a guard to prevent the app from crashing.
+  if (!panel) return null;
+
+  const {
+    title,
+    search,
+    noData,
+    InfoComponent,
+    UploadModalComponent,
+    TableComponent,
+    FooterComponent,
+  } = panel;
+
+  return (
+    <section className="relative mt-6 space-y-2 rounded-[20px] bg-gray-700 p-6">
+      <header className="flex items-center justify-between">
+        <div className="space-y-1">
+          <span className="text-xs font-semibold text-blue-400">Inventory Panel</span>
+          <h3 className="flex items-center space-x-2">
+            <span className="text-lg font-medium">{title}</span>
+            {/* Not all panels have an InfoComponent */}
+            {InfoComponent && (
+              <InfoButton theme="tertiary">
+                <InfoComponent />
+              </InfoButton>
+            )}
+          </h3>
+        </div>
+        <Button theme="primary" size="base" className="space-x-3" onClick={handleUploader}>
+          <span>Upload</span>
+          <Icon icon={UPLOAD_SVG} className="h-5 w-5 stroke-current" />
+        </Button>
+      </header>
+      <Search
+        id="inventory-search"
+        size="sm"
+        placeholder={search}
+        aria-label={search}
+        onChange={handleSearch}
+        theme="dark"
+      />
+      {TableComponent && <TableComponent noData={noData} />}
+      {/* TODO: Upload modal won't be optional; currently checking their existence only for development purposes */}
+      {UploadModalComponent && (
+        <UploadModalComponent isOpen={isOpenUploader} onDismiss={closeUploadModal} />
+      )}
+      {/* Not all panels have a FooterComponent */}
+      {FooterComponent && <FooterComponent />}
+    </section>
+  );
+};
+
+export default InventoryPanel;
diff --git a/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx b/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx
new file mode 100644
index 0000000000..081684cc67
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/protected-areas/footer/index.tsx
@@ -0,0 +1,24 @@
+const ProtectedAreasFooter = (): JSX.Element => {
+  return (
+    <div className="mt-8 text-xs">
+      <p className="text-gray-300">
+        UNEP-WCMC and IUCN (2022), Protected Planet: The World Database on Protected Areas (WDPA)
+        [On-line], [05/2022], Cambridge, UK: UNEP-WCMC and IUCN.
+      </p>
+
+      <p className="mt-7">
+        Available at:{' '}
+        <a
+          className="text-blue-400"
+          href="https://www.protectedplanet.net/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          www.protectedplanet.net
+        </a>
+      </p>
+    </div>
+  );
+};
+
+export default ProtectedAreasFooter;
diff --git a/app/layout/project/sidebar/project/inventory-panel/protected-areas/index.tsx b/app/layout/project/sidebar/project/inventory-panel/protected-areas/index.tsx
index 08698c3301..c564d99d16 100644
--- a/app/layout/project/sidebar/project/inventory-panel/protected-areas/index.tsx
+++ b/app/layout/project/sidebar/project/inventory-panel/protected-areas/index.tsx
@@ -1,7 +1,9 @@
-import Section from 'layout/section';
-
-const InventoryPanelProtectedAreas = (): JSX.Element => {
-  return <Section>InventoryPanelProtectedAreas</Section>;
+const InventoryPanelProtectedAreas = ({
+  noData: noDataMessage,
+}: {
+  noData: string;
+}): JSX.Element => {
+  return <div className="flex h-[200px] items-center justify-center">{noDataMessage}</div>;
 };
 
 export default InventoryPanelProtectedAreas;
diff --git a/app/layout/project/sidebar/project/inventory-panel/types.ts b/app/layout/project/sidebar/project/inventory-panel/types.ts
new file mode 100644
index 0000000000..644c32bccd
--- /dev/null
+++ b/app/layout/project/sidebar/project/inventory-panel/types.ts
@@ -0,0 +1,17 @@
+export type InventoryPanel = {
+  title: string;
+  search: string;
+  noData: string;
+  InfoComponent?: () => JSX.Element;
+  // TODO: Remove optional when we have upload modals for all tabs
+  UploadModalComponent?: ({
+    isOpen,
+    onDismiss,
+  }: {
+    isOpen?: boolean;
+    onDismiss: () => void;
+  }) => JSX.Element;
+  // TODO: Remove optional when we have table components for all tabs
+  TableComponent?: (props) => JSX.Element;
+  FooterComponent?: () => JSX.Element;
+};
diff --git a/app/layout/sidebar/constants.ts b/app/layout/sidebar/constants.ts
deleted file mode 100644
index 50ead6fd76..0000000000
--- a/app/layout/sidebar/constants.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { SidebarTreeCategories } from './types';
-
-export const SIDEBAR_TREE = {
-  user: [],
-  inventory: ['protected-areas', 'cost-surface', 'features'],
-  gridSetup: ['protected-areas', 'cost-surface', 'planning-unit-status'],
-  solutions: ['solutions', 'target-achievement'],
-  advancedSettings: ['advanced-settings', 'blm-calibration'],
-} satisfies { [key in SidebarTreeCategories]: string[] };
-
-export const MENU_COMMON_CLASSES = 'flex flex-col items-center space-y-2';
-export const MENU_ITEM_COMMON_CLASSES =
-  'flex group rounded-xl cursor-pointer bg-transparent transition-colors first:mt-2';
-
-export const MENU_ITEM_ACTIVE_CLASSES =
-  'group/active bg-primary-400 border-primary-400 hover:border-primary-400';
-
-export const ICONS_COMMON_CLASSES =
-  'h-5 w-5 text-gray-500 group-hover:text-white group-hover/active:!text-gray-500';
-
-export const MENU_ITEM_BUTTON_COMMON_CLASSES = 'flex p-[10px]';
diff --git a/app/layout/sidebar/hooks.tsx b/app/layout/sidebar/hooks.tsx
deleted file mode 100644
index 4e9d3cdb98..0000000000
--- a/app/layout/sidebar/hooks.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { useRouter } from 'next/router';
-
-import COST_SURFACE_SVG from 'svgs/sidebar/cost-surface.svg?sprite';
-import FEATURES_SVG from 'svgs/sidebar/features.svg?sprite';
-import PLANNING_UNIT_STATUS_SVG from 'svgs/sidebar/planning-unit-status.svg?sprite';
-import PROTECTED_AREA_SVG from 'svgs/sidebar/protected-area.svg?sprite';
-
-import type { SubMenuItem } from './submenu';
-
-const SCENARIO_ROUTE = '/projects/[pid]/scenarios/[sid]/edit';
-
-export const useInventoryItems = (): SubMenuItem[] => {
-  const { query, route } = useRouter();
-  const { pid, tab } = query as { pid: string; tab: string };
-  const isProjectRoute = route === '/projects/[pid]';
-
-  return [
-    {
-      name: 'Protected areas',
-      route: `/projects/${pid}?tab=protected-areas`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isProjectRoute && tab === 'protected-areas',
-    },
-    {
-      name: 'Cost surface',
-      route: `/projects/${pid}?tab=cost-surface`,
-      icon: COST_SURFACE_SVG,
-      selected: isProjectRoute && tab === 'cost-surface',
-    },
-
-    {
-      name: 'Features',
-      route: `/projects/${pid}?tab=features`,
-      icon: FEATURES_SVG,
-      selected: isProjectRoute && tab === 'features',
-    },
-  ];
-};
-
-export const useGridSetupItems = (): SubMenuItem[] => {
-  const { query, route } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-  const isScenarioRoute = route === SCENARIO_ROUTE;
-
-  return [
-    {
-      name: 'Protected areas',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=protected-areas`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'protected-areas',
-    },
-    {
-      name: 'Cost Surface',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=cost-surface`,
-      icon: COST_SURFACE_SVG,
-      selected: isScenarioRoute && tab === 'cost-surface',
-    },
-    {
-      name: 'Planning unit status',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=planning-unit-status`,
-      icon: PLANNING_UNIT_STATUS_SVG,
-      selected: isScenarioRoute && tab === 'planning-unit-status',
-    },
-    {
-      name: 'Features',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=features`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'features',
-    },
-  ];
-};
-
-export const useSolutionItems = (): SubMenuItem[] => {
-  const { query, route } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-  const isScenarioRoute = route === SCENARIO_ROUTE;
-
-  return [
-    {
-      name: 'Overview',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=solutions`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'solutions',
-    },
-    {
-      name: 'Target achievement',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=target-achievement`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'target-achievement',
-    },
-  ];
-};
-
-export const useAdvancedSettingsItems = (): SubMenuItem[] => {
-  const { query, route } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-  const isScenarioRoute = route === SCENARIO_ROUTE;
-
-  return [
-    {
-      name: 'Overview',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=advanced-settings`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'advanced-settings',
-    },
-    {
-      name: 'BLM calibration',
-      route: `/projects/${pid}/scenarios/${sid}/edit?tab=blm-calibration`,
-      icon: PROTECTED_AREA_SVG,
-      selected: isScenarioRoute && tab === 'blm-calibration',
-    },
-  ];
-};
diff --git a/app/layout/sidebar/index.tsx b/app/layout/sidebar/index.tsx
deleted file mode 100644
index a83291f674..0000000000
--- a/app/layout/sidebar/index.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import { PropsWithChildren, useCallback, useState } from 'react';
-
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-
-import { TippyProps } from '@tippyjs/react/headless';
-
-import Icon from 'components/icon';
-import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
-import Tooltip from 'components/tooltip';
-import { cn } from 'utils/cn';
-
-import ADVANCED_SETTINGS_SVG from 'svgs/sidebar/advanced-settings.svg?sprite';
-import GRID_SETUP_SVG from 'svgs/sidebar/grid-setup.svg?sprite';
-import INVENTORY_SVG from 'svgs/sidebar/inventory.svg?sprite';
-import WHITE_LOGO_SVG from 'svgs/sidebar/logo-white.svg';
-import MENU_SVG from 'svgs/sidebar/menu.svg?sprite';
-import RUN_SCENARIO_SVG from 'svgs/sidebar/run-scenario.svg?sprite';
-import SCENARIO_LIST_SVG from 'svgs/sidebar/scenario-list.svg?sprite';
-import SOLUTIONS_SVG from 'svgs/sidebar/solutions.svg?sprite';
-
-import {
-  MENU_COMMON_CLASSES,
-  MENU_ITEM_COMMON_CLASSES,
-  MENU_ITEM_ACTIVE_CLASSES,
-  MENU_ITEM_BUTTON_COMMON_CLASSES,
-  ICONS_COMMON_CLASSES,
-  SIDEBAR_TREE,
-} from './constants';
-import {
-  useInventoryItems,
-  useGridSetupItems,
-  useSolutionItems,
-  useAdvancedSettingsItems,
-} from './hooks';
-import SubMenu from './submenu';
-import type { SidebarTreeCategories } from './types';
-import UserMenu from './user-menu';
-
-export const MenuTooltip = ({ children }: PropsWithChildren): JSX.Element => {
-  return (
-    <div className="rounded-xl border border-gray-400 bg-gray-700 px-2 py-[0.5px] text-sm text-blue-300">
-      {children}
-    </div>
-  );
-};
-
-export const TOOLTIP_OFFSET: TippyProps['offset'] = [0, 10];
-
-export const Sidebar = (): JSX.Element => {
-  const { query, route } = useRouter();
-  const { pid, sid, tab } = query as { pid: string; sid: string; tab: string };
-
-  const isProjectRoute = route === '/projects/[pid]';
-  const isScenarioRoute = route === '/projects/[pid]/scenarios/[sid]/edit';
-
-  const [submenuState, setSubmenuState] = useState<{ [key in SidebarTreeCategories]: boolean }>({
-    user: false,
-    inventory: isProjectRoute && SIDEBAR_TREE.inventory.includes(tab),
-    gridSetup: isScenarioRoute && SIDEBAR_TREE.gridSetup.includes(tab),
-    solutions: isScenarioRoute && SIDEBAR_TREE.solutions.includes(tab),
-    advancedSettings: isScenarioRoute && SIDEBAR_TREE.advancedSettings.includes(tab),
-  });
-
-  const inventoryItems = useInventoryItems();
-  const gridSetupItems = useGridSetupItems();
-  const solutionsItems = useSolutionItems();
-  const advancedSettingsItems = useAdvancedSettingsItems();
-
-  const toggleSubmenu = useCallback((submenuKey: SidebarTreeCategories) => {
-    if (submenuKey === 'user') {
-      return setSubmenuState((prevState) => ({
-        ...prevState,
-        [submenuKey]: !prevState[submenuKey],
-      }));
-    }
-
-    return setSubmenuState((prevState) => {
-      return Object.keys(prevState).reduce<typeof submenuState>(
-        (acc, key) => ({
-          ...acc,
-          [key]: key === submenuKey ? !prevState[key] : false,
-        }),
-        prevState
-      );
-    });
-  }, []);
-
-  const handleRunScenario = useCallback(() => {
-    // todo: define run scenario button behaviour
-    console.log('handleRunScenario', sid);
-  }, [sid]);
-
-  return (
-    <nav className="flex h-screen max-w-[70px] flex-col items-center justify-between bg-gray-700 px-2 py-8">
-      <div className="flex flex-col">
-        <Link href="/">
-          <Image alt="Marxan logo" width={55} height={7} src={WHITE_LOGO_SVG} />
-        </Link>
-        <div className="space-y-2 divide-y divide-gray-400">
-          {/* // ? Common menu */}
-          <div className="flex flex-col items-center">
-            <ul className={MENU_COMMON_CLASSES}>
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]: submenuState.user,
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Menu</MenuTooltip>}
-                >
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <button
-                        type="button"
-                        className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                        onClick={() => toggleSubmenu('user')}
-                      >
-                        <Icon className={ICONS_COMMON_CLASSES} icon={MENU_SVG} />
-                      </button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      side="right"
-                      sideOffset={20}
-                      className="w-80 rounded-b-4xl rounded-tl-xl rounded-tr-4xl bg-white p-4"
-                      collisionPadding={48}
-                      onInteractOutside={() => toggleSubmenu('user')}
-                    >
-                      <UserMenu />
-                    </PopoverContent>
-                  </Popover>
-                </Tooltip>
-              </li>
-            </ul>
-          </div>
-          {/* // ? Project menu */}
-          {(isProjectRoute || isScenarioRoute) && (
-            <ul className={MENU_COMMON_CLASSES}>
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]: isProjectRoute && tab,
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Inventory</MenuTooltip>}
-                >
-                  <button
-                    type="button"
-                    className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                    onClick={() => toggleSubmenu('inventory')}
-                  >
-                    <Icon
-                      className={cn({
-                        [ICONS_COMMON_CLASSES]: true,
-                        'pointer-events-none': true,
-                      })}
-                      icon={INVENTORY_SVG}
-                    />
-                  </button>
-                </Tooltip>
-              </li>
-              {submenuState.inventory && (
-                <li>
-                  <SubMenu items={inventoryItems} />
-                </li>
-              )}
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]: isProjectRoute && !tab,
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Scenario</MenuTooltip>}
-                >
-                  <Link href={`/projects/${pid}`} className={MENU_ITEM_BUTTON_COMMON_CLASSES}>
-                    <Icon className={ICONS_COMMON_CLASSES} icon={SCENARIO_LIST_SVG} />
-                  </Link>
-                </Tooltip>
-              </li>
-            </ul>
-          )}
-          {/* // ? Scenario menu */}
-          {isScenarioRoute && (
-            <ul className={MENU_COMMON_CLASSES}>
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]:
-                    isScenarioRoute && SIDEBAR_TREE.gridSetup.includes(tab),
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Grid setup</MenuTooltip>}
-                >
-                  <button
-                    type="button"
-                    className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                    onClick={() => toggleSubmenu('gridSetup')}
-                  >
-                    <Icon className={ICONS_COMMON_CLASSES} icon={GRID_SETUP_SVG} />
-                  </button>
-                </Tooltip>
-              </li>
-              {submenuState.gridSetup && (
-                <li>
-                  <SubMenu items={gridSetupItems} />
-                </li>
-              )}
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]:
-                    isScenarioRoute && SIDEBAR_TREE.advancedSettings.includes(tab),
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Advanced settings</MenuTooltip>}
-                >
-                  <button
-                    type="button"
-                    className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                    onClick={() => toggleSubmenu('advancedSettings')}
-                  >
-                    <Icon className={ICONS_COMMON_CLASSES} icon={ADVANCED_SETTINGS_SVG} />
-                  </button>
-                </Tooltip>
-              </li>
-              {submenuState.advancedSettings && (
-                <li>
-                  <SubMenu items={advancedSettingsItems} />
-                </li>
-              )}
-              <li
-                className={cn({
-                  [MENU_ITEM_COMMON_CLASSES]: true,
-                  [MENU_ITEM_ACTIVE_CLASSES]:
-                    isScenarioRoute && SIDEBAR_TREE.solutions.includes(tab),
-                })}
-              >
-                <Tooltip
-                  placement="right"
-                  offset={TOOLTIP_OFFSET}
-                  content={<MenuTooltip>Solutions</MenuTooltip>}
-                >
-                  <button
-                    type="button"
-                    className={MENU_ITEM_BUTTON_COMMON_CLASSES}
-                    onClick={() => toggleSubmenu('solutions')}
-                  >
-                    <Icon className={ICONS_COMMON_CLASSES} icon={SOLUTIONS_SVG} />
-                  </button>
-                </Tooltip>
-              </li>
-              {submenuState.solutions && (
-                <li>
-                  <SubMenu items={solutionsItems} />
-                </li>
-              )}
-            </ul>
-          )}
-        </div>
-      </div>
-      {sid && (
-        <div className="group flex flex-col-reverse items-center">
-          <button
-            type="button"
-            className="peer relative flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-tl from-[#01BDFE] to-[#843DC0] transition-colors after:absolute after:left-1/2 after:top-1/2 after:block after:h-[calc(100%-1px)] after:w-[calc(100%-1px)] after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:border after:border-transparent after:bg-gray-700 hover:after:bg-transparent"
-            onClick={handleRunScenario}
-          >
-            <Icon className="z-10 h-6 w-6" icon={RUN_SCENARIO_SVG} />
-          </button>
-          <span className="mb-2 block text-center text-xs text-gray-400 transition-colors peer-hover:text-primary-200">
-            Run scenario
-          </span>
-        </div>
-      )}
-    </nav>
-  );
-};
-
-export default Sidebar;
diff --git a/app/layout/sidebar/submenu/index.tsx b/app/layout/sidebar/submenu/index.tsx
deleted file mode 100644
index 052cbea826..0000000000
--- a/app/layout/sidebar/submenu/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import Link from 'next/link';
-
-import { cn } from 'utils/cn';
-
-import Icon, { IconProps } from 'components/icon';
-import Tooltip from 'components/tooltip';
-
-import { MenuTooltip, TOOLTIP_OFFSET } from '../';
-
-export interface SubMenuItem {
-  name: string;
-  icon: IconProps['icon'];
-  route: string;
-  selected: boolean;
-}
-
-export const SubMenu = ({ items }: { items: SubMenuItem[] }): JSX.Element => {
-  return (
-    <ul className="space-y-5 rounded-xl border border-gray-400 py-4">
-      {items.map((item) => (
-        <Tooltip
-          key={item.route}
-          placement="right"
-          offset={TOOLTIP_OFFSET}
-          content={<MenuTooltip>{item.name}</MenuTooltip>}
-        >
-          <li className="group">
-            <Link
-              href={item.route}
-              className={cn({
-                'flex px-[10px]': true,
-                'relative overflow-hidden before:absolute before:-left-[1px] before:block before:h-full before:w-[3px] before:rounded-sm before:bg-blue-400 before:drop-shadow-blue after:absolute after:-right-[1px] after:block after:h-full after:w-[3px] after:rounded-sm after:bg-blue-400 after:drop-shadow-blue':
-                  item.selected,
-              })}
-            >
-              <Icon
-                icon={item.icon}
-                className={cn({
-                  'h-5 w-5 group-hover:text-primary-400': true,
-                  'text-primary-400': item.selected,
-                })}
-              />
-            </Link>
-          </li>
-        </Tooltip>
-      ))}
-    </ul>
-  );
-};
-
-export default SubMenu;
diff --git a/app/layout/sidebar/types.ts b/app/layout/sidebar/types.ts
deleted file mode 100644
index c1877a3ee4..0000000000
--- a/app/layout/sidebar/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type SidebarTreeCategories =
-  | 'user'
-  | 'inventory'
-  | 'gridSetup'
-  | 'solutions'
-  | 'advancedSettings';
diff --git a/app/layout/sidebar/user-menu/constants.ts b/app/layout/sidebar/user-menu/constants.ts
deleted file mode 100644
index fdd86b29fc..0000000000
--- a/app/layout/sidebar/user-menu/constants.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const ITEM_COMMON_CLASSES = 'flex items-center justify-between rounded-3xl bg-gray-50 p-4';
-export const ITEM_TITLE_COMMON_CLASSES = 'flex items-center space-x-2 font-medium text-black';
-export const ITEM_DESCRIPTION_COMMON_CLASSES = 'text-gray-400 leading-normal';
diff --git a/app/layout/sidebar/user-menu/index.tsx b/app/layout/sidebar/user-menu/index.tsx
deleted file mode 100644
index 5e3be10301..0000000000
--- a/app/layout/sidebar/user-menu/index.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { useCallback } from 'react';
-
-import { useQuery } from 'react-query';
-
-import Link from 'next/link';
-
-import axios from 'axios';
-import { signOut, useSession } from 'next-auth/react';
-import { usePlausible } from 'next-plausible';
-
-import { useHelp } from 'hooks/help';
-import { useMe } from 'hooks/me';
-import { COLOR_ME } from 'hooks/project-users';
-
-import Avatar from 'components/avatar';
-import Button from 'components/button';
-import { Switch } from 'components/forms/switch';
-import Icon from 'components/icon';
-import { cn } from 'utils/cn';
-
-import HELP_GUIDE_SVG from 'svgs/sidebar/help-guide.svg?sprite';
-import EDIT_PROFILE_SVG from 'svgs/sidebar/pencil.svg?sprite';
-import DOCUMENTATION_SVG from 'svgs/ui/documentation.svg?sprite';
-import SIGN_OUT_SVG from 'svgs/ui/sign-out.svg?sprite';
-
-import {
-  ITEM_COMMON_CLASSES,
-  ITEM_TITLE_COMMON_CLASSES,
-  ITEM_DESCRIPTION_COMMON_CLASSES,
-} from './constants';
-
-export const UserMenu = (): JSX.Element => {
-  const { data: session } = useSession();
-  const { user } = useMe();
-  const { active, onActive } = useHelp();
-  const plausible = usePlausible();
-
-  const { data: totalProjects } = useQuery(['user-total-projects', user.id], {
-    queryFn: () =>
-      axios
-        .get(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/projects`, {
-          headers: {
-            Authorization: `Bearer ${session.accessToken}`,
-          },
-        })
-        .then((response) => response.data),
-    enabled: Boolean(session),
-    select: ({ meta }) => meta.totalItems,
-  });
-
-  const handleSignOut = useCallback(async () => {
-    await signOut();
-  }, []);
-
-  const onToggleHelpGuide = useCallback(() => {
-    onActive(!active);
-    if (active) {
-      plausible('Activate help guide', {
-        props: {
-          userId: `${user.id}`,
-          userEmail: `${user.email}`,
-        },
-      });
-    }
-  }, [active, onActive, plausible, user.id, user.email]);
-
-  return (
-    <div className="flex flex-col divide-y divide-gray-200 text-gray-500">
-      <div className="mb-3 flex space-x-2">
-        <div>
-          <Avatar
-            bgImage={user.avatar}
-            {...(!user.avatar && { bgColor: COLOR_ME })}
-            className="border-transparent"
-          >
-            {!user.avatar && user.displayName.slice(0, 2).toUpperCase()}
-          </Avatar>
-        </div>
-        <div className="flex flex-col space-y-2">
-          <div className="">
-            <h2>{user.displayName}</h2>
-            <h3 className="text-sm text-gray-400">{user.email}</h3>
-          </div>
-          <div className="flex space-x-2">
-            <Button
-              href="/me"
-              theme="clear"
-              size="s"
-              className="flex items-center space-x-2 rounded-xl border border-gray-500"
-            >
-              <Icon icon={EDIT_PROFILE_SVG} className="h-5 w-5" />
-              <span>Edit profile</span>
-            </Button>
-            <Button
-              theme="clear"
-              size="s"
-              onClick={handleSignOut}
-              className="flex items-center space-x-2 rounded-xl border border-gray-500"
-            >
-              <Icon icon={SIGN_OUT_SVG} className="h-5 w-5" />
-              <span>Log out</span>
-            </Button>
-          </div>
-        </div>
-      </div>
-      <div>
-        <ul className="mt-2 space-y-2">
-          <li>
-            <Link
-              href="/projects"
-              className={cn({
-                [ITEM_COMMON_CLASSES]: true,
-                'items-start space-x-5 bg-transparent': true,
-              })}
-            >
-              <div className="rounded-xl bg-gray-50 p-2">
-                <Icon icon={EDIT_PROFILE_SVG} className="h-5 w-5" />
-              </div>
-              <div className="space-y-1">
-                <h4 className={ITEM_TITLE_COMMON_CLASSES}>
-                  <span>Projects dashboard</span>
-                  <span className="block rounded-[4px] border border-blue-300 bg-blue-100 px-1 text-xs font-semibold">
-                    {totalProjects}
-                  </span>
-                </h4>
-                <span className={ITEM_DESCRIPTION_COMMON_CLASSES}>
-                  Get a high-level summary of your projects and progress.
-                </span>
-              </div>
-            </Link>
-          </li>
-          {/* <li>
-            <Link
-              href="/team"
-              className={cn({
-                [ITEM_COMMON_CLASSES]: true,
-                'items-start space-x-5 bg-transparent': true,
-              })}
-            >
-              <div className="rounded-xl bg-gray-50 p-2">
-                <Icon icon={COMMUNITY_SVG} className="h-5 w-5" />
-              </div>
-              <div>
-                <h4 className={ITEM_TITLE_COMMON_CLASSES}>Manage team</h4>
-                <span className={ITEM_DESCRIPTION_COMMON_CLASSES}>
-                  Lorem ipsum dolor sit amet augue fringilla consequat
-                </span>
-              </div>
-            </Link>
-          </li> */}
-          <li className={ITEM_COMMON_CLASSES}>
-            <div className="flex items-center space-x-2">
-              <div className="rounded-xl bg-white p-2">
-                <Icon icon={HELP_GUIDE_SVG} className="h-5 w-5" />
-              </div>
-              <span className={ITEM_TITLE_COMMON_CLASSES}>Help Guide</span>
-            </div>
-            <Switch onCheckedChange={onToggleHelpGuide} className="bg-gray-500" />
-          </li>
-          <li>
-            <Link
-              href="/community/projects"
-              className="flex items-center space-x-2 rounded-3xl bg-[url('/images/bg-community-projects.png')] bg-right-bottom p-4"
-            >
-              <div className="rounded-xl bg-blue-400 p-2 text-white">
-                <Icon icon={DOCUMENTATION_SVG} className="h-5 w-5" />
-              </div>
-              <h4
-                className={cn({
-                  [ITEM_TITLE_COMMON_CLASSES]: true,
-                  'text-white': true,
-                })}
-              >
-                Community projects
-              </h4>
-            </Link>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-export default UserMenu;
diff --git a/app/pages/projects/[pid]/index.tsx b/app/pages/projects/[pid]/index.tsx
index b4a76068a9..a8389d9596 100644
--- a/app/pages/projects/[pid]/index.tsx
+++ b/app/pages/projects/[pid]/index.tsx
@@ -8,9 +8,7 @@ import ProjectLayout from 'layout/project';
 import Breadcrumbs from 'layout/project/navigation/breadcrumbs';
 import Sidebar from 'layout/project/sidebar';
 import InventoryProjectHeader from 'layout/project/sidebar/project/header';
-import InventoryPanelCostSurface from 'layout/project/sidebar/project/inventory-panel/cost-surface';
-import InventoryPanelFeatures from 'layout/project/sidebar/project/inventory-panel/features';
-import InventoryPanelProtectedAreas from 'layout/project/sidebar/project/inventory-panel/protected-areas';
+import InventoryPanel from 'layout/project/sidebar/project/inventory-panel';
 import ScenariosList from 'layout/project/sidebar/project/scenarios-list';
 import ProjectMap from 'layout/projects/show/map';
 import ProjectStatus from 'layout/projects/show/status';
@@ -30,12 +28,8 @@ const ShowProjectsPage = (): JSX.Element => {
       <ProjectLayout className="relative z-10">
         <Sidebar className="flex-col">
           <Breadcrumbs />
-
           <InventoryProjectHeader />
-
-          {tab === 'features' && <InventoryPanelFeatures />}
-          {tab === 'protected-areas' && <InventoryPanelProtectedAreas />}
-          {tab === 'cost-surface' && <InventoryPanelCostSurface />}
+          {tab && <InventoryPanel />}
           {!tab && <ScenariosList />}
         </Sidebar>
         <ProjectStatus />
diff --git a/app/svgs/ui/edit.svg b/app/svgs/ui/edit.svg
new file mode 100644
index 0000000000..2ce49b14ad
--- /dev/null
+++ b/app/svgs/ui/edit.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.43327 13.9172L6.69527 10.7622C6.89641 10.2596 7.19749 9.80302 7.58027 9.42018L14.5003 2.50218C14.8981 2.10436 15.4377 1.88086 16.0003 1.88086C16.5629 1.88086 17.1024 2.10436 17.5003 2.50218C17.8981 2.9 18.1216 3.43957 18.1216 4.00218C18.1216 4.56479 17.8981 5.10435 17.5003 5.50218L10.5803 12.4202C10.1973 12.8032 9.74027 13.1052 9.23727 13.3062L6.08327 14.5682C5.9924 14.6046 5.89286 14.6135 5.79699 14.5938C5.70111 14.5741 5.61311 14.5267 5.54391 14.4575C5.4747 14.3883 5.42733 14.3003 5.40766 14.2045C5.38799 14.1086 5.3969 14.009 5.43327 13.9182V13.9172Z" />
+<path d="M3.5 5.75C3.5 5.06 4.06 4.5 4.75 4.5H10C10.1989 4.5 10.3897 4.42098 10.5303 4.28033C10.671 4.13968 10.75 3.94891 10.75 3.75C10.75 3.55109 10.671 3.36032 10.5303 3.21967C10.3897 3.07902 10.1989 3 10 3H4.75C4.02065 3 3.32118 3.28973 2.80546 3.80546C2.28973 4.32118 2 5.02065 2 5.75V15.25C2 15.9793 2.28973 16.6788 2.80546 17.1945C3.32118 17.7103 4.02065 18 4.75 18H14.25C14.9793 18 15.6788 17.7103 16.1945 17.1945C16.7103 16.6788 17 15.9793 17 15.25V10C17 9.80109 16.921 9.61032 16.7803 9.46967C16.6397 9.32902 16.4489 9.25 16.25 9.25C16.0511 9.25 15.8603 9.32902 15.7197 9.46967C15.579 9.61032 15.5 9.80109 15.5 10V15.25C15.5 15.94 14.94 16.5 14.25 16.5H4.75C4.06 16.5 3.5 15.94 3.5 15.25V5.75Z" />
+</svg>
diff --git a/app/svgs/ui/tag.svg b/app/svgs/ui/tag.svg
new file mode 100644
index 0000000000..a8f174ebd0
--- /dev/null
+++ b/app/svgs/ui/tag.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 3C4.83696 3 4.20107 3.26339 3.73223 3.73223C3.26339 4.20107 3 4.83696 3 5.5V8.379C3.00014 9.04174 3.26343 9.67731 3.732 10.146L10.232 16.646C10.4642 16.8782 10.7398 17.0624 11.0431 17.1881C11.3465 17.3138 11.6716 17.3785 12 17.3785C12.3284 17.3785 12.6535 17.3138 12.9569 17.1881C13.2602 17.0624 13.5358 16.8782 13.768 16.646L16.646 13.768C16.8782 13.5358 17.0624 13.2602 17.1881 12.9569C17.3138 12.6535 17.3785 12.3284 17.3785 12C17.3785 11.6716 17.3138 11.3465 17.1881 11.0431C17.0624 10.7398 16.8782 10.4642 16.646 10.232L10.146 3.732C9.67755 3.26368 9.0424 3.00041 8.38 3H5.5ZM6 7C6.26522 7 6.51957 6.89464 6.70711 6.70711C6.89464 6.51957 7 6.26522 7 6C7 5.73478 6.89464 5.48043 6.70711 5.29289C6.51957 5.10536 6.26522 5 6 5C5.73478 5 5.48043 5.10536 5.29289 5.29289C5.10536 5.48043 5 5.73478 5 6C5 6.26522 5.10536 6.51957 5.29289 6.70711C5.48043 6.89464 5.73478 7 6 7Z" />
+</svg>