diff --git a/web-components/src/components/icons/SvgThemeWrapper.tsx b/web-components/src/components/icons/SvgThemeWrapper.tsx
new file mode 100644
index 0000000000..0dc6a4c2c0
--- /dev/null
+++ b/web-components/src/components/icons/SvgThemeWrapper.tsx
@@ -0,0 +1,39 @@
+import { Box, SxProps, SvgIcon } from '@mui/material';
+
+export default function SvgThemeWrapper({
+  src,
+  sx,
+  color,
+}: {
+  src: string;
+  sx: SxProps;
+  color: string;
+}) {
+  // TODO: support svg react components
+  return (
+    // <Box
+    //   sx={{
+    //     maskImage: `url(${src})`,
+    //     maskSize: 'contain',
+    //     maskRepeat: 'no-repeat',
+    //     maskPosition: 'center',
+    //     boxSizing: 'border-box',
+    //     width: '30px',
+    //     height: '30px',
+    //     background: color,
+    //     ...sx,
+    //   }}
+    // />
+    <SvgIcon sx={sx}>
+      <mask id="mask_123">
+        <image
+          href={src}
+          style={{ filter: 'brightness(10)' }}
+          height="100%"
+          width="100%"
+        />
+      </mask>
+      <rect mask="url(#mask_123)" width="100%" height="100%" fill={color} />
+    </SvgIcon>
+  );
+}
diff --git a/web-components/src/components/icons/terassos/RegionIndicatorIcon.tsx b/web-components/src/components/icons/terassos/ColombiaRegionIndicatorIcon.tsx
similarity index 99%
rename from web-components/src/components/icons/terassos/RegionIndicatorIcon.tsx
rename to web-components/src/components/icons/terassos/ColombiaRegionIndicatorIcon.tsx
index 229f70a21e..8d67b56bf0 100644
--- a/web-components/src/components/icons/terassos/RegionIndicatorIcon.tsx
+++ b/web-components/src/components/icons/terassos/ColombiaRegionIndicatorIcon.tsx
@@ -1,8 +1,8 @@
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
-import path from 'path';
 
 import { sxToArray } from '../../../utils/mui/sxToArray';
 
+// TODO: utilize theme colors?
 const selectedFill = '#BD9A11';
 const selectedStroke = '#8A6E0B';
 
@@ -26,7 +26,6 @@ const ANDEAN_PATH =
 export type Region = 'PACIFIC' | 'ORINOCO' | 'CARIBBEAN' | 'AMAZON' | 'ANDEAN';
 
 interface RegionPaths {
-  // [key in Region]: string;
   PACIFIC: string;
   ORINOCO: string;
   CARIBBEAN: string;
@@ -73,20 +72,24 @@ export default function RegionIndicatorIcon({
 }: RegionIndicatorIconProps): JSX.Element {
   const activeRegionPath = Object.entries(regionPaths).filter(
     ([key, value]) => key === region,
+    // TODO: review this
   )[0][1];
   const otherRegionPaths = Object.entries(regionPaths)
     .filter(([key, value]) => key !== region)
     .map(([_, value]) => value);
   return (
     <SvgIcon
-      sx={[{ color: '#4FB573' }, ...sxToArray(sx)]}
+      sx={[
+        { color: '#4FB573', mr: 1, width: '30px', height: '30px' },
+        ...sxToArray(sx),
+      ]}
       width="30"
       height="30"
       viewBox="0 0 30 30"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g clip-path="url(#clip0_1479_22775)">
+      <g clipPath="url(#clip0_1479_22775)">
         {otherRegionPaths.map((path: string, index: number) => (
           <RegionPath key={index} path={path} />
         ))}
diff --git a/web-components/src/components/icons/terassos/terassosIcons.stories.tsx b/web-components/src/components/icons/terassos/terassosIcons.stories.tsx
index 94874d717f..655da2d223 100644
--- a/web-components/src/components/icons/terassos/terassosIcons.stories.tsx
+++ b/web-components/src/components/icons/terassos/terassosIcons.stories.tsx
@@ -3,7 +3,7 @@ import { Grid } from '@mui/material';
 import { Meta } from '@storybook/react';
 
 import { LabeledIcon } from '../icons.stories';
-import RegionIndicatorIcon from './RegionIndicatorIcon';
+import RegionIndicatorIcon from './ColombiaRegionIndicatorIcon';
 
 export default {
   title: 'Terassos/Icons',
diff --git a/web-components/src/components/organisms/ProjectFilters/ProjectFilters.stories.tsx b/web-components/src/components/organisms/ProjectFilters/ProjectFilters.stories.tsx
index 6c90256147..9c00a00610 100644
--- a/web-components/src/components/organisms/ProjectFilters/ProjectFilters.stories.tsx
+++ b/web-components/src/components/organisms/ProjectFilters/ProjectFilters.stories.tsx
@@ -1,16 +1,208 @@
+import { Box } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
 
-import ProjectFilters from './ProjectFilters';
+import SvgThemeWrapper from '../../icons/SvgThemeWrapper';
+import RegionIndicatorIcon, {
+  Region,
+} from '../../icons/terassos/ColombiaRegionIndicatorIcon';
+import ProjectFilters, { Filter, FilterOptions } from './ProjectFilters';
 
 export default {
   title: 'Organisms/ProjectFilters',
   component: ProjectFilters,
 } as Meta;
 
-const Template: StoryFn = args => <ProjectFilters {...args} />;
+const activeFilters = ['AMAZON', 'TROPICAL_VERY_HUMID_FOREST'];
 
-export const Default = Template.bind({});
-Default.args = {};
+export function ComplianceBadge() {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      width="24px"
+      height="24px"
+      padding="3px"
+      borderRadius="50%"
+      fontSize="12px"
+      fontWeight={700}
+      sx={{
+        borderRadius: '40px',
+        border: '1px dashed var(--surface-stroke, #D2D5D9)',
+        background: 'var(--surface-selected-item-background, #EFEFEF)',
+        ml: 2,
+      }}
+    >
+      ha.
+    </Box>
+  );
+}
+
+const Template: StoryFn = args => (
+  <ProjectFilters
+    {...args}
+    filters={args.filters}
+    activeFilterIds={activeFilters}
+  />
+);
+// add another component
+
+const ecosystemIconSx = {
+  width: '30px',
+  height: '30px',
+  mr: 2,
+};
+
+const ecosystemTags: FilterOptions[] = [
+  {
+    name: 'Tropical very humid forest',
+    id: 'TROPICAL_VERY_HUMID_FOREST',
+    icon: (
+      <SvgThemeWrapper
+        src="/tag/forest.svg"
+        sx={ecosystemIconSx}
+        color="#A5A4A4"
+      />
+    ),
+  },
+  {
+    name: 'Tropical humid forest',
+    id: 'TROPICAL_HUMID_FOREST',
+    icon: (
+      <SvgThemeWrapper
+        src="/tag/forest.svg"
+        sx={ecosystemIconSx}
+        color="#A5A4A4"
+      />
+    ),
+  },
+  {
+    name: 'Tropical dry forest',
+    id: 'TROPICAL_DRY_FOREST',
+    icon: (
+      <SvgThemeWrapper
+        src="/tag/forest.svg"
+        sx={ecosystemIconSx}
+        color="#A5A4A4"
+      />
+    ),
+  },
+  {
+    name: 'Premontane humid forest',
+    id: 'PREMONTANE_HUMID_FOREST',
+    icon: (
+      <SvgThemeWrapper
+        src="/tag/forest.svg"
+        sx={ecosystemIconSx}
+        color="#A5A4A4"
+      />
+    ),
+  },
+  {
+    name: 'Low montane very humid forest',
+    id: 'LOW_MONTANE_VERY_HUMID_FOREST',
+    icon: (
+      <SvgThemeWrapper
+        src="/tag/forest.svg"
+        sx={ecosystemIconSx}
+        color="#A5A4A4"
+      />
+    ),
+  },
+];
 
-export const WithCustomProps = Template.bind({});
-WithCustomProps.args = {};
+const regionTags: FilterOptions[] = [
+  {
+    name: 'Amazon',
+    id: 'AMAZON',
+    icon: (
+      <RegionIndicatorIcon
+        isSelected={activeFilters.includes('AMAZON')}
+        region={'AMAZON'}
+      />
+    ),
+  },
+  {
+    name: 'Pacific',
+    id: 'PACIFIC',
+    icon: (
+      <RegionIndicatorIcon
+        isSelected={activeFilters.includes('PACIFIC')}
+        region="PACIFIC"
+      />
+    ),
+  },
+  {
+    name: 'Orinoco',
+    id: 'ORINOCO',
+    icon: (
+      <RegionIndicatorIcon
+        isSelected={activeFilters.includes('ORINOCO')}
+        region="ORINOCO"
+      />
+    ),
+  },
+  {
+    name: 'Caribbean',
+    id: 'CARIBBEAN',
+    icon: (
+      <RegionIndicatorIcon
+        isSelected={activeFilters.includes('CARIBBEAN')}
+        region="CARIBBEAN"
+      />
+    ),
+  },
+  {
+    name: 'Andean',
+    id: 'ANDEAN',
+    icon: (
+      <RegionIndicatorIcon
+        isSelected={activeFilters.includes('ANDEAN')}
+        region="ANDEAN"
+      />
+    ),
+  },
+];
+
+const marketCheckboxes = [
+  {
+    name: 'Voluntary',
+    id: 'VOLUNTARY',
+    icon: (
+      <Box
+        component="img"
+        sx={{ width: '24px', ml: 2 }}
+        src="/logos/tebu-badge.png"
+        alt="Tebu"
+      />
+    ),
+  },
+  {
+    name: 'Compliance',
+    id: 'COMPLIANCE',
+    icon: <ComplianceBadge />,
+  },
+];
+
+const filters: Filter[] = [
+  {
+    displayType: 'tag',
+    title: 'Region',
+    options: regionTags,
+  },
+  {
+    displayType: 'tag',
+    title: 'Ecosystem',
+    options: ecosystemTags,
+  },
+  {
+    displayType: 'checkbox',
+    title: 'Market',
+    options: marketCheckboxes,
+  },
+];
+
+export const Default = Template.bind({});
+Default.args = {
+  filters: filters,
+};
diff --git a/web-components/src/components/organisms/ProjectFilters/ProjectFilters.tsx b/web-components/src/components/organisms/ProjectFilters/ProjectFilters.tsx
index 1eaa6b34fe..494423bfc6 100644
--- a/web-components/src/components/organisms/ProjectFilters/ProjectFilters.tsx
+++ b/web-components/src/components/organisms/ProjectFilters/ProjectFilters.tsx
@@ -1,11 +1,7 @@
 import { Box, Divider, FormControlLabel } from '@mui/material';
 import Checkbox from 'web-components/src/components/inputs/new/CheckBox/Checkbox';
 
-import { ImageType } from 'src/types/shared/imageType';
 
-import RegionIndicatorIcon, {
-  Region,
-} from '../../icons/terassos/RegionIndicatorIcon';
 import { ProjectTag } from '../../molecules/ProjectTag/ProjectTag';
 import { Title } from '../../typography';
 
@@ -13,196 +9,91 @@ export interface ProjectFiltersProps {
   // Add props here
 }
 
-const regionTags: { name: string; region: Region }[] = [
-  {
-    name: 'Amazon',
-    region: 'AMAZON',
+const tagSx = {
+  cursor: 'pointer',
+  boxShadow:
+    '0px 2px 2px 0px var(--tag-filter-outer-shadow, rgba(0, 0, 0, 0.20))',
+  '&:hover': {
+    filter: 'brightness(0.9)',
   },
-  {
-    name: 'Pacific',
-    region: 'PACIFIC',
-  },
-  {
-    name: 'Orinoco',
-    region: 'ORINOCO',
-  },
-  {
-    name: 'Caribbean',
-    region: 'CARIBBEAN',
-  },
-  {
-    name: 'Andean',
-    region: 'ANDEAN',
-  },
-];
-
-const ecosystemTags: { name: string; icon: ImageType | JSX.Element }[] = [
-  {
-    name: 'Tropical very humid forest',
-    icon: { src: '/tag/forest.svg' },
-  },
-  {
-    name: 'Tropical humid forest',
-    icon: { src: '/tag/forest.svg' },
-  },
-  {
-    name: 'Tropical dry forest',
-    icon: { src: '/tag/forest.svg' },
-  },
-  {
-    name: 'Premontane humid forest',
-    icon: { src: '/tag/forest.svg' },
-  },
-  {
-    name: 'Low montane very humid forest',
-    icon: { src: '/tag/forest.svg' },
-  },
-];
+};
 
-function RegionFilters() {
+function TagFilter({ icon, name }: { icon: JSX.Element; name: string }) {
   return (
-    <div>
-      <Title variant="h5" sx={{ mb: 3 }}>
-        Region
-      </Title>
-      <Box display="flex" flexWrap="wrap" gap={2}>
-        {regionTags.map(({ name, region }) => (
-          <ProjectTag
-            // onClick={() => console.log('clicked')}
-            sx={{
-              cursor: 'pointer',
-              boxShadow:
-                '0px 2px 2px 0px var(--tag-filter-outer-shadow, rgba(0, 0, 0, 0.20))',
-              '&:hover': {
-                filter: 'brightness(0.9)',
-              },
-            }}
-            tag={{
-              name: name,
-              icon: (
-                <RegionIndicatorIcon
-                  region={region}
-                  sx={{
-                    height: '30px',
-                    width: '30px',
-                    mr: 1,
-                  }}
-                />
-              ),
-            }}
-          />
-        ))}
-      </Box>
-      <Divider sx={{ my: 5 }} />
-    </div>
+    <ProjectTag
+      // onClick={() => console.log('clicked')}
+      sx={tagSx}
+      tag={{
+        name,
+        icon,
+      }}
+    />
   );
 }
 
-function EcosystemFilters() {
+function CheckboxFilter({ icon, name }: { icon: JSX.Element; name: string }) {
   return (
-    <div>
-      <Title variant="h5" sx={{ mb: 3 }}>
-        Ecosystem Type
-      </Title>
-      <Box display="flex" flexWrap="wrap" gap={2}>
-        {ecosystemTags.map(({ name, icon }) => (
-          <ProjectTag
-            // onClick={() => console.log('clicked')}
-            sx={{
-              cursor: 'pointer',
-              // boxShadow: '0px 2px 2px 2px var(--tag-filter-outer-shadow, rgba(0, 0, 0, 0.20))';
-              boxShadow:
-                '0px 2px 2px 0px var(--tag-filter-outer-shadow, rgba(0, 0, 0, 0.20))',
-              '&:hover': {
-                filter: 'brightness(0.9)',
-              },
-            }}
-            tag={{
-              name,
-              icon: icon,
-            }}
-          />
-        ))}
-      </Box>
-      <Divider sx={{ my: 5 }} />
-    </div>
+    <FormControlLabel
+      control={<Checkbox />}
+      label={
+        <Box display="flex" flexWrap="nowrap" alignItems="center">
+          {name}
+          {icon}
+        </Box>
+      }
+      sx={{ mb: 2 }}
+    />
   );
 }
 
-function ComplianceBadge() {
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      width="24px"
-      height="24px"
-      padding="3px"
-      borderRadius="50%"
-      fontSize="12px"
-      fontWeight={700}
-      sx={{
-        borderRadius: '40px',
-        border: '1px dashed var(--surface-stroke, #D2D5D9)',
-        background: 'var(--surface-selected-item-background, #EFEFEF)',
-        ml: 2,
-      }}
-    >
-      ha.
-    </Box>
-  );
+export interface FilterOptions {
+  name: string;
+  icon: JSX.Element;
+  id: string;
 }
 
-function MarketFilters() {
-  return (
-    <>
-      <Title variant="h5" sx={{ mb: 3 }}>
-        Market
-      </Title>
-      <Box display="flex" flexDirection="column">
-        <FormControlLabel
-          control={<Checkbox />}
-          label={
-            <Box display="flex" alignItems="center">
-              Voluntary
-              <Box
-                component="img"
-                sx={{ width: '24px', ml: 2 }}
-                src="/logos/tebu-badge.png"
-                alt="Tebu"
-              />
-            </Box>
-          }
-          sx={{ mb: 2 }}
-        />
-        <FormControlLabel
-          control={<Checkbox />}
-          label={
-            <Box display="flex" flexWrap="nowrap">
-              Compliance
-              <ComplianceBadge />
-            </Box>
-          }
-          sx={{ mb: 2 }}
-        />
-      </Box>
-    </>
-  );
+export interface Filter {
+  title: string;
+  displayType: 'tag' | 'checkbox';
+  options: FilterOptions[];
 }
 
-export default function ProjectFilters({}: ProjectFiltersProps) {
+export default function ProjectFilters({
+  filters,
+  activeFilterIds,
+}: {
+  filters: Filter[];
+  activeFilterIds: string[];
+}) {
   return (
-    <div>
+    <>
       <Title variant="h4">Filters</Title>
       <Divider sx={{ my: 5 }} />
-      {/* <Title variant="h5">Region</Title>
-      <Divider sx={{ my: 5 }} /> */}
-      <RegionFilters />
-      {/* <Title variant="h5">Ecosystem Type</Title>
-      <Divider sx={{ my: 5 }} /> */}
-      <EcosystemFilters />
-      {/* <Title variant="h5">Market</Title> */}
-      <MarketFilters />
-    </div>
+      {filters.map(filter => {
+        return (
+          <Box sx={{ mb: 5 }} key={filter.title}>
+            <Title variant="h5" sx={{ mb: 5 }}>
+              {filter.title}
+            </Title>
+            {filter.displayType === 'tag' && (
+              <Box display="flex" flexWrap="wrap" gap={2}>
+                {filter.options.map(({ name, icon, id }) => (
+                  <TagFilter name={name} icon={icon} key={id} />
+                ))}
+              </Box>
+            )}
+
+            {filter.displayType === 'checkbox' && (
+              <Box display="flex" flexDirection="column">
+                {filter.options.map(({ name, icon, id }) => (
+                  <CheckboxFilter name={name} icon={icon} key={id} />
+                ))}
+              </Box>
+            )}
+            <Divider sx={{ my: 5 }} />
+          </Box>
+        );
+      })}
+    </>
   );
 }
diff --git a/web-marketplace/public/png/tebu-badge.png b/web-marketplace/public/png/tebu-badge.png
new file mode 100644
index 0000000000..c0cc636d3a
Binary files /dev/null and b/web-marketplace/public/png/tebu-badge.png differ