diff --git a/src/components/FeatureCard/index.tsx b/src/components/FeatureCard/index.tsx
index c6592d1..f900594 100644
--- a/src/components/FeatureCard/index.tsx
+++ b/src/components/FeatureCard/index.tsx
@@ -1,12 +1,14 @@
 import { Box, Text } from '..';
 import { Backend, Frontend } from '../../assets';
 import { FeatureOutput } from '../../graphql/types';
+import { theme } from '../../themes';
 
 type FeatureCardProps = {
   feature: FeatureOutput;
   selectable?: boolean;
   selected?: boolean;
   toggleSelect?: () => void;
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
 };
 
 const FeatureCard = ({
@@ -14,13 +16,18 @@ const FeatureCard = ({
   selectable = false,
   selected = false,
   toggleSelect = () => {},
+  color,
 }: FeatureCardProps) => {
   return (
     <Box
       padding='10px'
       background='white'
       boxShadow='1px 1px 10px rgba(50, 59, 105, 0.25)'
-      border={selected ? '2px solid #3CC13B' : undefined}
+      border={
+        selected
+          ? `2px solid ${color ? theme.colors[color].main : '#3CC13B'}`
+          : undefined
+      }
       onClick={selectable ? toggleSelect : () => {}}
       display='grid'
       gridTemplateRows='auto'
diff --git a/src/components/index.tsx b/src/components/index.tsx
index f3eed71..2248e62 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -26,6 +26,8 @@ import FrontendFeatureCard from './FrontendFeatureCard';
 import BackendFeatureCard from './BackendFeatureCard';
 import Specification from './Specification';
 import Chip from './Chip';
+import CategoryCard from './CategoryCard';
+import TemplateCard from './TemplateCard';
 
 export {
   Button,
@@ -56,4 +58,6 @@ export {
   BackendFeatureCard,
   Specification,
   Chip,
+  CategoryCard,
+  TemplateCard,
 };