From 95b23edbaaa123bcce265ce7ec39d72a5b511d33 Mon Sep 17 00:00:00 2001
From: Tal-Ben-Avi <talb@webiya.co.il>
Date: Thu, 2 May 2024 18:45:32 +0300
Subject: [PATCH] editing icons

---
 public/assets/internal_evaluation.svg         |  47 ----
 .../src/components/Card/DisplayCard.tsx       |  40 ++--
 .../Icons/DisplayCardIcons/Application.tsx    | 218 +++++++++++++-----
 .../DisplayCardIcons/GrantDeliverables.tsx    | 134 +++++++++++
 .../DisplayCardIcons/InternalEvaluation.tsx   |  96 ++++++++
 .../Icons/DisplayCardIcons/Onboarding.tsx     |  37 ++-
 .../Icons/DisplayCardIcons/Results.tsx        |  47 +++-
 7 files changed, 466 insertions(+), 153 deletions(-)
 delete mode 100644 public/assets/internal_evaluation.svg
 rename public/assets/application.svg => workspaces/website/src/components/Icons/DisplayCardIcons/Application.tsx (64%)
 create mode 100644 workspaces/website/src/components/Icons/DisplayCardIcons/GrantDeliverables.tsx
 create mode 100644 workspaces/website/src/components/Icons/DisplayCardIcons/InternalEvaluation.tsx
 rename public/assets/onboarding.svg => workspaces/website/src/components/Icons/DisplayCardIcons/Onboarding.tsx (94%)
 rename public/assets/results.svg => workspaces/website/src/components/Icons/DisplayCardIcons/Results.tsx (76%)

diff --git a/public/assets/internal_evaluation.svg b/public/assets/internal_evaluation.svg
deleted file mode 100644
index cd707d6fe7..0000000000
--- a/public/assets/internal_evaluation.svg
+++ /dev/null
@@ -1,47 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_2607_518074)">
-        <path fill-rule="evenodd" clip-rule="evenodd"
-            d="M27.6875 12.3086C27.6875 15.7625 29.11 18.8849 31.4006 21.1212C33.6188 23.2851 36.6507 24.6172 39.9961 24.6172C43.3415 24.6172 46.3735 23.2851 48.5917 21.1212C50.8822 18.8849 52.3047 15.7625 52.3047 12.3086C52.3047 5.50934 46.7954 0 39.9961 0C33.1968 0 27.6875 5.50934 27.6875 12.3086ZM36.922 17.6914C35.0654 17.6914 33.4018 18.5112 32.2746 19.8131C34.2336 21.8264 36.9702 23.0802 39.9961 23.0802C43.022 23.0802 45.7647 21.8264 47.7237 19.8131C46.5965 18.5172 44.9328 17.6914 43.0763 17.6914H36.922ZM34.6134 10.7716C34.6134 13.7432 37.0245 16.1543 39.9961 16.1543C42.9678 16.1543 45.3789 13.7432 45.3789 10.7716C45.3789 7.79988 42.9678 5.38879 39.9961 5.38879C37.0245 5.38879 34.6134 7.79988 34.6134 10.7716Z"
-            fill="#0C0C4F" />
-        <path fill-rule="evenodd" clip-rule="evenodd"
-            d="M59.0978 48.8126C56.8073 46.5763 55.3848 43.4539 55.3848 40C55.3848 33.2008 60.8941 27.6914 67.6934 27.6914C74.4927 27.6914 80.002 33.2008 80.002 40C80.002 43.4539 78.5795 46.5763 76.2889 48.8126C74.0707 50.9765 71.0327 52.3086 67.6934 52.3086C64.354 52.3086 61.3161 50.9765 59.0978 48.8126ZM59.9658 47.5045C61.093 46.2086 62.7567 45.3828 64.6132 45.3828H70.7675C72.6241 45.3828 74.2877 46.2026 75.4149 47.5045C73.4619 49.5178 70.7193 50.7716 67.6934 50.7716C64.6675 50.7716 61.9248 49.5178 59.9658 47.5045ZM67.6934 43.8457C64.7157 43.8457 62.3046 41.4346 62.3046 38.463C62.3046 35.4913 64.7157 33.0802 67.6934 33.0802C70.6711 33.0802 73.0761 35.4913 73.0761 38.463C73.0761 41.4346 70.6651 43.8457 67.6934 43.8457Z"
-            fill="#0C0C4F" />
-        <path fill-rule="evenodd" clip-rule="evenodd"
-            d="M3.70917 48.8126C1.41864 46.5763 -0.00390625 43.4539 -0.00390625 40C-0.00390625 33.2008 5.50544 27.6914 12.3047 27.6914C19.104 27.6914 24.6133 33.2008 24.6133 40C24.6133 43.4539 23.1908 46.5763 20.9003 48.8126C18.6821 50.9765 15.6501 52.3086 12.3047 52.3086C8.95932 52.3086 5.92738 50.9765 3.70917 48.8126ZM4.57717 47.5045C5.70435 46.2086 7.36801 45.3828 9.22455 45.3828H15.3789C17.2354 45.3828 18.899 46.2026 20.0262 47.5045C18.0672 49.5178 15.3306 50.7716 12.3047 50.7716C9.27879 50.7716 6.53618 49.5178 4.57717 47.5045ZM12.3047 43.8457C9.33304 43.8457 6.92195 41.4346 6.92195 38.463C6.92195 35.4913 9.33304 33.0802 12.3047 33.0802C15.2764 33.0802 17.6875 35.4913 17.6875 38.463C17.6875 41.4346 15.2764 43.8457 12.3047 43.8457Z"
-            fill="#0C0C4F" />
-        <path fill-rule="evenodd" clip-rule="evenodd"
-            d="M31.4006 76.504C29.11 74.2677 27.6875 71.1453 27.6875 67.6914C27.6875 60.8922 33.1968 55.3828 39.9961 55.3828C46.7954 55.3828 52.3047 60.8922 52.3047 67.6914C52.3047 71.1453 50.8822 74.2677 48.5917 76.504C46.3735 78.6679 43.3415 80.0001 39.9961 80.0001C36.6507 80.0001 33.6188 78.6679 31.4006 76.504ZM32.2746 75.196C33.4018 73.9 35.0654 73.0742 36.922 73.0742H43.0763C44.9328 73.0742 46.5965 73.894 47.7237 75.196C45.7647 77.2092 43.0281 78.463 39.9961 78.463C36.9642 78.463 34.2276 77.2092 32.2746 75.196ZM39.9961 71.5371C37.0245 71.5371 34.6134 69.126 34.6134 66.1544C34.6134 63.1827 37.0245 60.7716 39.9961 60.7716C42.9678 60.7716 45.3789 63.1827 45.3789 66.1544C45.3789 69.126 42.9678 71.5371 39.9961 71.5371Z"
-            fill="#0C0C4F" />
-        <path
-            d="M19.3145 51.947L28.0547 60.6872C28.3199 60.2351 28.6092 59.8011 28.9227 59.3792L20.6164 51.073C20.2005 51.3864 19.7665 51.6758 19.3145 51.941V51.947Z"
-            fill="#0C0C4F" />
-        <path
-            d="M60.2078 51.6516C59.7678 51.3683 59.3519 51.0669 58.948 50.7354L50.7383 58.9451C51.0638 59.349 51.3712 59.7649 51.6545 60.2049L60.2139 51.6455L60.2078 51.6516Z"
-            fill="#0C0C4F" />
-        <path
-            d="M21.3105 29.4876L29.4781 21.3201C29.8096 21.7119 30.1653 22.0796 30.545 22.4292L22.4257 30.5545C22.0761 30.1808 21.7023 29.8252 21.3166 29.4876H21.3105Z"
-            fill="#0C0C4F" />
-        <path
-            d="M57.3681 30.7717L49.2246 22.6282C49.6044 22.2846 49.972 21.923 50.3096 21.5432L58.4531 29.6867C58.0733 30.0303 57.7056 30.3919 57.3681 30.7717Z"
-            fill="#0C0C4F" />
-        <path
-            d="M47.2706 51.0608H32.7257C32.1591 51.0608 31.707 50.6027 31.707 50.0421V29.9638C31.707 29.3971 32.1651 28.9451 32.7257 28.9451H41.8517L48.2953 35.2802V50.0421C48.2953 50.6087 47.8372 51.0608 47.2767 51.0608H47.2706Z"
-            stroke="#0C0C4F" stroke-width="1.31404" />
-        <path d="M41.8535 28.9392V34.2617C41.8535 34.8283 42.3116 35.2804 42.8722 35.2804H48.2911" stroke="#0C0C4F"
-            stroke-width="1.31404" />
-        <path
-            d="M34.457 42.0737C34.457 41.8265 34.662 41.6216 34.9091 41.6216H45.982C46.2292 41.6216 46.4341 41.8265 46.4341 42.0737C46.4341 42.3208 46.2292 42.5257 45.982 42.5257H34.9091C34.662 42.5257 34.457 42.3208 34.457 42.0737Z"
-            fill="#0C0C4F" stroke="#0C0C4F" stroke-width="0.5" />
-        <path
-            d="M34.9091 44.334C34.662 44.334 34.457 44.5389 34.457 44.7861C34.457 45.0332 34.662 45.2381 34.9091 45.2381H43.4986C43.7458 45.2381 43.9507 45.0332 43.9507 44.7861C43.9507 44.5389 43.7458 44.334 43.4986 44.334H34.9091Z"
-            fill="#0C0C4F" stroke="#0C0C4F" stroke-width="0.5" />
-        <path
-            d="M34.457 47.4985C34.457 47.2513 34.662 47.0464 34.9091 47.0464H44.4028C44.6499 47.0464 44.8549 47.2513 44.8549 47.4985C44.8549 47.7456 44.6499 47.9505 44.4028 47.9505H34.9091C34.662 47.9505 34.457 47.7456 34.457 47.4985Z"
-            fill="#0C0C4F" stroke="#0C0C4F" stroke-width="0.5" />
-    </g>
-    <defs>
-        <clipPath id="clip0_2607_518074">
-            <rect width="80.006" height="80" fill="white" transform="translate(-0.00390625)" />
-        </clipPath>
-    </defs>
-</svg>
\ No newline at end of file
diff --git a/workspaces/website/src/components/Card/DisplayCard.tsx b/workspaces/website/src/components/Card/DisplayCard.tsx
index c10e6f041c..8a5e61ac9a 100644
--- a/workspaces/website/src/components/Card/DisplayCard.tsx
+++ b/workspaces/website/src/components/Card/DisplayCard.tsx
@@ -1,12 +1,9 @@
-import {
-  Box,
-  Stack,
-  BoxProps,
-  Text,
-  Circle,
-  Img,
-  useColorMode,
-} from "@chakra-ui/react";
+import { Box, Stack, BoxProps, Text, Circle } from "@chakra-ui/react";
+import { Application } from "@ui/Icons/DisplayCardIcons/Application";
+import { GrantDeliverables } from "@ui/Icons/DisplayCardIcons/GrantDeliverables";
+import { InternalEvaluation } from "@ui/Icons/DisplayCardIcons/InternalEvaluation";
+import { Onboarding } from "@ui/Icons/DisplayCardIcons/Onboarding";
+import { Results } from "@ui/Icons/DisplayCardIcons/Results";
 import { Heading } from "@ui/Typography/Heading";
 
 type Props = {
@@ -21,16 +18,14 @@ type Props = {
 } & BoxProps;
 
 const images = {
-  Application: "/assets/application.svg",
-  "Internal Evaluation": "/assets/internal_evaluation.svg",
-  Results: "/assets/results.svg",
-  Onboarding: "/assets/onboarding.svg",
-  "Grant Deliverables": "/assets/grant_deliverables.svg",
+  Application: <Application />,
+  "Internal Evaluation": <InternalEvaluation />,
+  Results: <Results />,
+  Onboarding: <Onboarding />,
+  "Grant Deliverables": <GrantDeliverables />,
 };
 
 export const DisplayCard = (props: Props) => {
-  const { colorMode } = useColorMode();
-
   return (
     <Box as="li" maxW="5xl">
       <Box
@@ -56,18 +51,11 @@ export const DisplayCard = (props: Props) => {
               height="80px"
               borderRadius="8px"
               overflow="hidden"
+              color="#0C0C4F"
+              _dark={{ color: "white" }}
               marginBottom={{ base: "16px", md: "0" }}
             >
-              <Img
-                width="full"
-                height="full"
-                src={images[props?.title]}
-                title={props.title}
-                objectFit="contain"
-                style={{
-                  filter: `invert(color:${colorMode === "light" ? 0 : 1})`,
-                }}
-              />
+              {images[props?.title]}
             </Box>
           </Stack>
           <Box flex="1">
diff --git a/public/assets/application.svg b/workspaces/website/src/components/Icons/DisplayCardIcons/Application.tsx
similarity index 64%
rename from public/assets/application.svg
rename to workspaces/website/src/components/Icons/DisplayCardIcons/Application.tsx
index a0b7e27f4a..06ef3d2345 100644
--- a/public/assets/application.svg
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/Application.tsx
@@ -1,77 +1,175 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
+import { HTMLChakraProps } from "@chakra-ui/react";
+
+type Props = HTMLChakraProps<"svg">;
+
+export const Application = ({}: Props) => {
+  return (
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
         d="M39.3852 21.2239H8.49566C6.82502 21.2239 5.4707 22.5782 5.4707 24.2488V63.1302C5.4707 64.8008 6.82502 66.1552 8.49566 66.1552H66.8177C68.4883 66.1552 69.8427 64.8008 69.8427 63.1302V55.2478"
-        stroke="#0C0C4F" stroke-width="1.5" />
-    <path d="M6.01758 25.7095H39.3851" stroke="#0C0C4F" stroke-width="1.5" />
-    <path d="M5.74805 58.6284H69.5621" stroke="#0C0C4F" stroke-width="1.5" />
-    <path
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+      <path
+        d="M6.01758 25.7095H39.3851"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+      <path
+        d="M5.74805 58.6284H69.5621"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+      <path
         d="M72.779 52.5128H44.0009C42.885 52.5128 41.9824 51.6102 41.9824 50.4943V10.776C41.9824 9.66013 42.885 8.75757 44.0009 8.75757H62.0576L74.8029 21.2895V50.4943C74.8029 51.6102 73.9004 52.5128 72.7845 52.5128H72.779Z"
-        stroke="#0C0C4F" stroke-width="1.5" />
-    <path d="M62.0527 8.7522V19.2821C62.0527 20.398 62.9553 21.3006 64.0712 21.3006H74.7926" stroke="#0C0C4F"
-        stroke-width="1.5" />
-    <path
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+      <path
+        d="M62.0527 8.7522V19.2821C62.0527 20.398 62.9553 21.3006 64.0712 21.3006H74.7926"
+        stroke="currentColor"
+        stroke-width="1.5"
+      />
+      <path
         d="M47.4258 34.7351C47.4258 34.2428 47.8251 33.8435 48.3174 33.8435H70.2306C70.7229 33.8435 71.1222 34.2428 71.1222 34.7351C71.1222 35.2274 70.7229 35.6268 70.2306 35.6268H48.3174C47.8251 35.6268 47.4258 35.2274 47.4258 34.7351Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M48.3233 39.2041C47.831 39.2041 47.4316 39.6034 47.4316 40.0957C47.4316 40.588 47.831 40.9873 48.3233 40.9873H65.3134C65.8057 40.9873 66.205 40.588 66.205 40.0957C66.205 39.6034 65.8057 39.2041 65.3134 39.2041H48.3233Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M47.4258 45.4673C47.4258 44.975 47.8251 44.5757 48.3174 44.5757H67.0962C67.5885 44.5757 67.9933 44.975 67.9933 45.4673C67.9933 45.9596 67.594 46.3589 67.0962 46.3589H48.3174C47.8251 46.3589 47.4258 45.9596 47.4258 45.4673Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M50.0234 68.1355H25.2877C24.8678 68.1355 24.5273 68.4759 24.5273 68.8958V70.6572C24.5273 71.0771 24.8678 71.4175 25.2877 71.4175H50.0234C50.4433 71.4175 50.7838 71.0771 50.7838 70.6572V68.8958C50.7838 68.4759 50.4433 68.1355 50.0234 68.1355Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2725 49.2576V38.0794H24.7811V49.2576H24.2725Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M24.3378 42.559L23.125 41.2122L23.503 40.8722L24.7158 42.219L24.3378 42.559Z" fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M24.347 47.4172L21.9215 44.993L22.2811 44.6336L24.7066 47.0578L24.347 47.4172Z" fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.2725 49.2576V38.0794H24.7811V49.2576H24.2725Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.3378 42.559L23.125 41.2122L23.503 40.8722L24.7158 42.219L24.3378 42.559Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.347 47.4172L21.9215 44.993L22.2811 44.6336L24.7066 47.0578L24.347 47.4172Z"
+        fill="currentColor"
+      />
+      <path
         d="M21.0666 45.304C20.2239 45.304 19.541 44.6214 19.541 43.7792C19.541 42.937 20.2239 42.2544 21.0666 42.2544C21.9093 42.2544 22.5923 42.937 22.5923 43.7792C22.5923 44.6214 21.9093 45.304 21.0666 45.304Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M21.0666 42.5085C20.3644 42.5085 19.7952 43.0773 19.7952 43.7792C19.7952 44.4811 20.3644 45.0499 21.0666 45.0499C21.7689 45.0499 22.338 44.4811 22.338 43.7792C22.338 43.0773 21.7689 42.5085 21.0666 42.5085ZM19.2867 43.7792C19.2867 42.7966 20.0835 42.0002 21.0666 42.0002C22.0498 42.0002 22.8466 42.7966 22.8466 43.7792C22.8466 44.7618 22.0498 45.5581 21.0666 45.5581C20.0835 45.5581 19.2867 44.7618 19.2867 43.7792Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M24.347 45.0375L26.7725 42.6133L27.1322 42.9728L24.7066 45.3969L24.347 45.0375Z" fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.347 45.0375L26.7725 42.6133L27.1322 42.9728L24.7066 45.3969L24.347 45.0375Z"
+        fill="currentColor"
+      />
+      <path
         d="M27.939 43.2839C28.7817 43.2839 29.4647 42.6013 29.4647 41.759C29.4647 40.9168 28.7817 40.2342 27.939 40.2342C27.0963 40.2342 26.4133 40.9168 26.4133 41.759C26.4133 42.6013 27.0963 43.2839 27.939 43.2839Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M26.1591 41.759C26.1591 40.7765 26.9559 39.9801 27.939 39.9801C28.9221 39.9801 29.7189 40.7765 29.7189 41.759C29.7189 42.7416 28.9221 43.538 27.939 43.538C26.9559 43.538 26.1591 42.7416 26.1591 41.759ZM27.939 40.4884C27.2367 40.4884 26.6676 41.0572 26.6676 41.759C26.6676 42.4609 27.2367 43.0297 27.939 43.0297C28.6413 43.0297 29.2104 42.4609 29.2104 41.759C29.2104 41.0572 28.6413 40.4884 27.939 40.4884Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M24.5702 38.0314C25.4129 38.0314 26.0959 37.3488 26.0959 36.5066C26.0959 35.6644 25.4129 34.9818 24.5702 34.9818C23.7275 34.9818 23.0445 35.6644 23.0445 36.5066C23.0445 37.3488 23.7275 38.0314 24.5702 38.0314Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M22.7903 36.5066C22.7903 35.524 23.5871 34.7276 24.5702 34.7276C25.5533 34.7276 26.3501 35.524 26.3501 36.5066C26.3501 37.4892 25.5533 38.2855 24.5702 38.2855C23.5871 38.2855 22.7903 37.4892 22.7903 36.5066ZM24.5702 35.2359C23.8679 35.2359 23.2988 35.8047 23.2988 36.5066C23.2988 37.2085 23.8679 37.7773 24.5702 37.7773C25.2725 37.7773 25.8416 37.2085 25.8416 36.5066C25.8416 35.8047 25.2725 35.2359 24.5702 35.2359Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M22.1447 41.533C22.9874 41.533 23.6703 40.8504 23.6703 40.0082C23.6703 39.166 22.9874 38.4834 22.1447 38.4834C21.302 38.4834 20.619 39.166 20.619 40.0082C20.619 40.8504 21.302 41.533 22.1447 41.533Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M20.3647 40.0082C20.3647 39.0256 21.1615 38.2292 22.1447 38.2292C23.1278 38.2292 23.9246 39.0256 23.9246 40.0082C23.9246 40.9908 23.1278 41.7871 22.1447 41.7871C21.1615 41.7871 20.3647 40.9908 20.3647 40.0082ZM22.1447 38.7375C21.4424 38.7375 20.8733 39.3063 20.8733 40.0082C20.8733 40.7101 21.4424 41.2789 22.1447 41.2789C22.8469 41.2789 23.416 40.7101 23.416 40.0082C23.416 39.3063 22.8469 38.7375 22.1447 38.7375Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2702 33.2249V29.4129H24.7788V33.2249L24.2702 33.2249Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.2702 33.2249V29.4129H24.7788V33.2249L24.2702 33.2249Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M25.5333 29.7552C24.968 29.4146 24.2605 29.4146 23.6952 29.7552L14.4514 35.3257C13.9172 35.6476 13.5906 36.2256 13.5906 36.8491V47.3902C13.5906 48.0137 13.9172 48.5917 14.4514 48.9136L23.6952 54.4841C24.2605 54.8248 24.968 54.8248 25.5333 54.4841L34.7771 48.9136C35.3113 48.5917 35.6379 48.0137 35.6379 47.3902V36.8491C35.6379 36.2256 35.3113 35.6476 34.7771 35.3257L25.5333 29.7552ZM23.4326 29.32C24.1594 28.882 25.0691 28.882 25.7959 29.32L35.0397 34.8904C35.7266 35.3043 36.1465 36.0475 36.1465 36.8491V47.3902C36.1465 48.1918 35.7266 48.935 35.0397 49.3489L25.7959 54.9194C25.0691 55.3574 24.1594 55.3574 23.4326 54.9194L14.1889 49.3489C13.502 48.935 13.082 48.1918 13.082 47.3902V36.8491C13.082 36.0475 13.502 35.3043 14.1888 34.8904L23.4326 29.32Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M25.5825 34.348C25.0114 33.9978 24.2919 33.9978 23.7208 34.348L18.5081 37.5444C17.9806 37.8679 17.659 38.4421 17.659 39.0607V45.1787C17.659 45.7973 17.9806 46.3715 18.5081 46.695L23.7208 49.8913C24.2919 50.2415 25.0114 50.2415 25.5825 49.8913L30.7952 46.695C31.3227 46.3715 31.6443 45.7973 31.6443 45.1787V39.0607C31.6443 38.4421 31.3227 37.8679 30.7952 37.5444L25.5825 34.348ZM23.4549 33.9148C24.1891 33.4645 25.1142 33.4645 25.8484 33.9148L31.0611 37.1111C31.7394 37.5271 32.1528 38.2653 32.1528 39.0607V45.1787C32.1528 45.974 31.7394 46.7123 31.0611 47.1282L25.8484 50.3246C25.1142 50.7748 24.1891 50.7748 23.4549 50.3246L18.2422 47.1282C17.5639 46.7123 17.1505 45.974 17.1505 45.1787V39.0607C17.1505 38.2653 17.5639 37.5271 18.2422 37.1111L23.4549 33.9148Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M25.5451 42.6745C25.0035 42.3544 24.3331 42.3439 23.7817 42.6468L22.4857 43.3589L22.2407 42.9135L23.5367 42.2014C24.2456 41.8119 25.1076 41.8254 25.804 42.2369L31.9008 45.84L31.642 46.2775L25.5451 42.6745Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M19.9585 44.8744L17.7972 46.2721L17.5209 45.8454L19.6822 44.4476L19.9585 44.8744Z" fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M17.0372 46.7785L13.9859 48.8116L13.7038 48.3887L16.7551 46.3556L17.0372 46.7785Z" fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M17.0372 37.5879L13.9859 35.5548L13.7038 35.9777L16.7551 38.0108L17.0372 37.5879Z" fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M32.5203 46.6514L35.5717 48.6845L35.8538 48.2616L32.8024 46.2285L32.5203 46.6514Z" fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M32.5203 37.715L35.5717 35.6819L35.8538 36.1048L32.8024 38.1379L32.5203 37.715Z" fill="#0C0C4F" />
-</svg>
\ No newline at end of file
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.9585 44.8744L17.7972 46.2721L17.5209 45.8454L19.6822 44.4476L19.9585 44.8744Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.0372 46.7785L13.9859 48.8116L13.7038 48.3887L16.7551 46.3556L17.0372 46.7785Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.0372 37.5879L13.9859 35.5548L13.7038 35.9777L16.7551 38.0108L17.0372 37.5879Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M32.5203 46.6514L35.5717 48.6845L35.8538 48.2616L32.8024 46.2285L32.5203 46.6514Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M32.5203 37.715L35.5717 35.6819L35.8538 36.1048L32.8024 38.1379L32.5203 37.715Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/workspaces/website/src/components/Icons/DisplayCardIcons/GrantDeliverables.tsx b/workspaces/website/src/components/Icons/DisplayCardIcons/GrantDeliverables.tsx
new file mode 100644
index 0000000000..b7aa776d24
--- /dev/null
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/GrantDeliverables.tsx
@@ -0,0 +1,134 @@
+import { HTMLChakraProps } from "@chakra-ui/react";
+
+type Props = HTMLChakraProps<"svg">;
+
+export const GrantDeliverables = ({}: Props) => {
+  return (
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M38.9593 61.7484V27.6898H40.5088V61.7484H38.9593Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.1582 41.3386L35.4631 37.2351L36.6148 36.1991L40.31 40.3026L39.1582 41.3386Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.1863 56.1409L31.7959 48.7547L32.8916 47.6596L40.2819 55.0458L39.1863 56.1409Z"
+        fill="currentColor"
+      />
+      <path
+        d="M29.1914 49.7023C26.6238 49.7023 24.5429 47.6225 24.5429 45.0564C24.5429 42.4902 26.6238 40.4104 29.1914 40.4104C31.759 40.4104 33.8399 42.4902 33.8399 45.0564C33.8399 47.6225 31.759 49.7023 29.1914 49.7023Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M29.1914 41.1848C27.0517 41.1848 25.3176 42.9178 25.3176 45.0564C25.3176 47.1949 27.0517 48.9279 29.1914 48.9279C31.3311 48.9279 33.0651 47.1949 33.0651 45.0564C33.0651 42.9178 31.3311 41.1848 29.1914 41.1848ZM23.7681 45.0564C23.7681 42.0625 26.1959 39.6361 29.1914 39.6361C32.1868 39.6361 34.6146 42.0625 34.6146 45.0564C34.6146 48.0502 32.1868 50.4766 29.1914 50.4766C26.1959 50.4766 23.7681 48.0502 23.7681 45.0564Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.1863 48.8904L46.5766 41.5042L47.6722 42.5993L40.2819 49.9855L39.1863 48.8904Z"
+        fill="currentColor"
+      />
+      <path
+        d="M50.1306 43.5471C52.6982 43.5471 54.7791 41.4674 54.7791 38.9012C54.7791 36.3351 52.6982 34.2553 50.1306 34.2553C47.563 34.2553 45.4821 36.3351 45.4821 38.9012C45.4821 41.4674 47.563 43.5471 50.1306 43.5471Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M44.7074 38.9012C44.7074 35.9074 47.1352 33.481 50.1306 33.481C53.1261 33.481 55.5539 35.9074 55.5539 38.9012C55.5539 41.895 53.1261 44.3215 50.1306 44.3215C47.1352 44.3215 44.7074 41.895 44.7074 38.9012ZM50.1306 35.0296C47.9909 35.0296 46.2569 36.7627 46.2569 38.9012C46.2569 41.0397 47.9909 42.7728 50.1306 42.7728C52.2703 42.7728 54.0044 41.0397 54.0044 38.9012C54.0044 36.7627 52.2703 35.0296 50.1306 35.0296Z"
+        fill="currentColor"
+      />
+      <path
+        d="M39.8663 27.5436C42.4339 27.5436 44.5148 25.4638 44.5148 22.8977C44.5148 20.3315 42.4339 18.2518 39.8663 18.2518C37.2987 18.2518 35.2178 20.3315 35.2178 22.8977C35.2178 25.4638 37.2987 27.5436 39.8663 27.5436Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M34.443 22.8977C34.443 19.9039 36.8708 17.4774 39.8663 17.4774C42.8618 17.4774 45.2895 19.9039 45.2895 22.8977C45.2895 25.8915 42.8618 28.3179 39.8663 28.3179C36.8708 28.3179 34.443 25.8915 34.443 22.8977ZM39.8663 19.0261C37.7266 19.0261 35.9925 20.7592 35.9925 22.8977C35.9925 25.0362 37.7266 26.7693 39.8663 26.7693C42.006 26.7693 43.74 25.0362 43.74 22.8977C43.74 20.7592 42.006 19.0261 39.8663 19.0261Z"
+        fill="currentColor"
+      />
+      <path
+        d="M32.476 38.2125C35.0436 38.2125 37.1245 36.1328 37.1245 33.5666C37.1245 31.0005 35.0436 28.9207 32.476 28.9207C29.9084 28.9207 27.8275 31.0005 27.8275 33.5666C27.8275 36.1328 29.9084 38.2125 32.476 38.2125Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M27.0527 33.5666C27.0527 30.5728 29.4805 28.1464 32.476 28.1464C35.4714 28.1464 37.8992 30.5728 37.8992 33.5666C37.8992 36.5604 35.4714 38.9868 32.476 38.9868C29.4805 38.9868 27.0527 36.5604 27.0527 33.5666ZM32.476 29.695C30.3363 29.695 28.6022 31.4281 28.6022 33.5666C28.6022 35.7051 30.3363 37.4382 32.476 37.4382C34.6157 37.4382 36.3497 35.7051 36.3497 33.5666C36.3497 31.4281 34.6157 29.695 32.476 29.695Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M38.9523 12.8988V1.28404H40.5019V12.8988L38.9523 12.8988Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M42.8009 2.32712C41.0784 1.28914 38.9227 1.28914 37.2002 2.32712L9.03571 19.2996C7.40792 20.2805 6.41278 22.0416 6.41278 23.9413V56.0587C6.41278 57.9584 7.40793 59.7195 9.03572 60.7004L37.2002 77.6729C38.9227 78.7109 41.0784 78.7109 42.8009 77.6729L70.9654 60.7004C72.5931 59.7195 73.5883 57.9584 73.5883 56.0587V23.9413C73.5883 22.0416 72.5931 20.2805 70.9654 19.2996L42.8009 2.32712ZM36.4001 1.00091C38.6147 -0.333635 41.3864 -0.333638 43.601 1.00091L71.7654 17.9734C73.8583 19.2346 75.1378 21.4988 75.1378 23.9413V56.0587C75.1378 58.5012 73.8583 60.7654 71.7655 62.0266L43.601 78.9991C41.3864 80.3336 38.6147 80.3336 36.4001 78.9991L8.23562 62.0266C6.14275 60.7654 4.86328 58.5012 4.86328 56.0587V23.9413C4.86328 21.4988 6.14274 19.2346 8.23562 17.9734L36.4001 1.00091Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M42.9506 16.3207C41.2105 15.2537 39.0184 15.2537 37.2784 16.3207L21.396 26.0596C19.7885 27.0453 18.8088 28.7948 18.8088 30.6796V49.3204C18.8088 51.2052 19.7885 52.9547 21.396 53.9404L37.2784 63.6793C39.0184 64.7463 41.2105 64.7463 42.9506 63.6793L58.833 53.9404C60.4404 52.9547 61.4201 51.2052 61.4201 49.3204V30.6796C61.4201 28.7948 60.4404 27.0453 58.833 26.0596L42.9506 16.3207ZM36.468 15.0007C38.7052 13.6288 41.5237 13.6288 43.7609 15.0007L59.6433 24.7396C61.71 26.0069 62.9696 28.2563 62.9696 30.6796V49.3204C62.9696 51.7437 61.71 53.9931 59.6433 55.2604L43.7609 64.9993C41.5237 66.3712 38.7052 66.3712 36.468 64.9993L20.5856 55.2604C18.5189 53.9931 17.2593 51.7437 17.2593 49.3204V30.6796C17.2593 28.2563 18.5189 26.0069 20.5856 24.7396L36.468 15.0007Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M42.8368 41.6904C41.1866 40.7152 39.1438 40.6832 37.4638 41.6062L33.5149 43.7758L32.7685 42.4187L36.7174 40.2491C38.8773 39.0623 41.5037 39.1035 43.6254 40.3573L62.2018 51.3354L61.4132 52.6685L42.8368 41.6904Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M25.8151 48.3933L19.2297 52.652L18.3879 51.3519L24.9733 47.0931L25.8151 48.3933Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.9143 54.1949L7.61729 60.3894L6.75778 59.1009L16.0548 52.9063L16.9143 54.1949Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.9143 26.1923L7.61729 19.9977L6.75778 21.2863L16.0548 27.4808L16.9143 26.1923Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M64.0894 53.8077L73.3864 60.0023L74.2459 58.7137L64.9489 52.5192L64.0894 53.8077Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M64.0894 26.5795L73.3864 20.3849L74.2459 21.6735L64.9489 27.868L64.0894 26.5795Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/workspaces/website/src/components/Icons/DisplayCardIcons/InternalEvaluation.tsx b/workspaces/website/src/components/Icons/DisplayCardIcons/InternalEvaluation.tsx
new file mode 100644
index 0000000000..ccfa9cfe22
--- /dev/null
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/InternalEvaluation.tsx
@@ -0,0 +1,96 @@
+import { HTMLChakraProps } from "@chakra-ui/react";
+
+type Props = HTMLChakraProps<"svg">;
+
+export const InternalEvaluation = ({}: Props) => {
+  return (
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_2607_518074)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M27.6875 12.3086C27.6875 15.7625 29.11 18.8849 31.4006 21.1212C33.6188 23.2851 36.6507 24.6172 39.9961 24.6172C43.3415 24.6172 46.3735 23.2851 48.5917 21.1212C50.8822 18.8849 52.3047 15.7625 52.3047 12.3086C52.3047 5.50934 46.7954 0 39.9961 0C33.1968 0 27.6875 5.50934 27.6875 12.3086ZM36.922 17.6914C35.0654 17.6914 33.4018 18.5112 32.2746 19.8131C34.2336 21.8264 36.9702 23.0802 39.9961 23.0802C43.022 23.0802 45.7647 21.8264 47.7237 19.8131C46.5965 18.5172 44.9328 17.6914 43.0763 17.6914H36.922ZM34.6134 10.7716C34.6134 13.7432 37.0245 16.1543 39.9961 16.1543C42.9678 16.1543 45.3789 13.7432 45.3789 10.7716C45.3789 7.79988 42.9678 5.38879 39.9961 5.38879C37.0245 5.38879 34.6134 7.79988 34.6134 10.7716Z"
+          fill="currentColor"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M59.0978 48.8126C56.8073 46.5763 55.3848 43.4539 55.3848 40C55.3848 33.2008 60.8941 27.6914 67.6934 27.6914C74.4927 27.6914 80.002 33.2008 80.002 40C80.002 43.4539 78.5795 46.5763 76.2889 48.8126C74.0707 50.9765 71.0327 52.3086 67.6934 52.3086C64.354 52.3086 61.3161 50.9765 59.0978 48.8126ZM59.9658 47.5045C61.093 46.2086 62.7567 45.3828 64.6132 45.3828H70.7675C72.6241 45.3828 74.2877 46.2026 75.4149 47.5045C73.4619 49.5178 70.7193 50.7716 67.6934 50.7716C64.6675 50.7716 61.9248 49.5178 59.9658 47.5045ZM67.6934 43.8457C64.7157 43.8457 62.3046 41.4346 62.3046 38.463C62.3046 35.4913 64.7157 33.0802 67.6934 33.0802C70.6711 33.0802 73.0761 35.4913 73.0761 38.463C73.0761 41.4346 70.6651 43.8457 67.6934 43.8457Z"
+          fill="currentColor"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M3.70917 48.8126C1.41864 46.5763 -0.00390625 43.4539 -0.00390625 40C-0.00390625 33.2008 5.50544 27.6914 12.3047 27.6914C19.104 27.6914 24.6133 33.2008 24.6133 40C24.6133 43.4539 23.1908 46.5763 20.9003 48.8126C18.6821 50.9765 15.6501 52.3086 12.3047 52.3086C8.95932 52.3086 5.92738 50.9765 3.70917 48.8126ZM4.57717 47.5045C5.70435 46.2086 7.36801 45.3828 9.22455 45.3828H15.3789C17.2354 45.3828 18.899 46.2026 20.0262 47.5045C18.0672 49.5178 15.3306 50.7716 12.3047 50.7716C9.27879 50.7716 6.53618 49.5178 4.57717 47.5045ZM12.3047 43.8457C9.33304 43.8457 6.92195 41.4346 6.92195 38.463C6.92195 35.4913 9.33304 33.0802 12.3047 33.0802C15.2764 33.0802 17.6875 35.4913 17.6875 38.463C17.6875 41.4346 15.2764 43.8457 12.3047 43.8457Z"
+          fill="currentColor"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M31.4006 76.504C29.11 74.2677 27.6875 71.1453 27.6875 67.6914C27.6875 60.8922 33.1968 55.3828 39.9961 55.3828C46.7954 55.3828 52.3047 60.8922 52.3047 67.6914C52.3047 71.1453 50.8822 74.2677 48.5917 76.504C46.3735 78.6679 43.3415 80.0001 39.9961 80.0001C36.6507 80.0001 33.6188 78.6679 31.4006 76.504ZM32.2746 75.196C33.4018 73.9 35.0654 73.0742 36.922 73.0742H43.0763C44.9328 73.0742 46.5965 73.894 47.7237 75.196C45.7647 77.2092 43.0281 78.463 39.9961 78.463C36.9642 78.463 34.2276 77.2092 32.2746 75.196ZM39.9961 71.5371C37.0245 71.5371 34.6134 69.126 34.6134 66.1544C34.6134 63.1827 37.0245 60.7716 39.9961 60.7716C42.9678 60.7716 45.3789 63.1827 45.3789 66.1544C45.3789 69.126 42.9678 71.5371 39.9961 71.5371Z"
+          fill="currentColor"
+        />
+        <path
+          d="M19.3145 51.947L28.0547 60.6872C28.3199 60.2351 28.6092 59.8011 28.9227 59.3792L20.6164 51.073C20.2005 51.3864 19.7665 51.6758 19.3145 51.941V51.947Z"
+          fill="currentColor"
+        />
+        <path
+          d="M60.2078 51.6516C59.7678 51.3683 59.3519 51.0669 58.948 50.7354L50.7383 58.9451C51.0638 59.349 51.3712 59.7649 51.6545 60.2049L60.2139 51.6455L60.2078 51.6516Z"
+          fill="currentColor"
+        />
+        <path
+          d="M21.3105 29.4876L29.4781 21.3201C29.8096 21.7119 30.1653 22.0796 30.545 22.4292L22.4257 30.5545C22.0761 30.1808 21.7023 29.8252 21.3166 29.4876H21.3105Z"
+          fill="currentColor"
+        />
+        <path
+          d="M57.3681 30.7717L49.2246 22.6282C49.6044 22.2846 49.972 21.923 50.3096 21.5432L58.4531 29.6867C58.0733 30.0303 57.7056 30.3919 57.3681 30.7717Z"
+          fill="currentColor"
+        />
+        <path
+          d="M47.2706 51.0608H32.7257C32.1591 51.0608 31.707 50.6027 31.707 50.0421V29.9638C31.707 29.3971 32.1651 28.9451 32.7257 28.9451H41.8517L48.2953 35.2802V50.0421C48.2953 50.6087 47.8372 51.0608 47.2767 51.0608H47.2706Z"
+          stroke="currentColor"
+          stroke-width="1.31404"
+        />
+        <path
+          d="M41.8535 28.9392V34.2617C41.8535 34.8283 42.3116 35.2804 42.8722 35.2804H48.2911"
+          stroke="currentColor"
+          stroke-width="1.31404"
+        />
+        <path
+          d="M34.457 42.0737C34.457 41.8265 34.662 41.6216 34.9091 41.6216H45.982C46.2292 41.6216 46.4341 41.8265 46.4341 42.0737C46.4341 42.3208 46.2292 42.5257 45.982 42.5257H34.9091C34.662 42.5257 34.457 42.3208 34.457 42.0737Z"
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-width="0.5"
+        />
+        <path
+          d="M34.9091 44.334C34.662 44.334 34.457 44.5389 34.457 44.7861C34.457 45.0332 34.662 45.2381 34.9091 45.2381H43.4986C43.7458 45.2381 43.9507 45.0332 43.9507 44.7861C43.9507 44.5389 43.7458 44.334 43.4986 44.334H34.9091Z"
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-width="0.5"
+        />
+        <path
+          d="M34.457 47.4985C34.457 47.2513 34.662 47.0464 34.9091 47.0464H44.4028C44.6499 47.0464 44.8549 47.2513 44.8549 47.4985C44.8549 47.7456 44.6499 47.9505 44.4028 47.9505H34.9091C34.662 47.9505 34.457 47.7456 34.457 47.4985Z"
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-width="0.5"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2607_518074">
+          <rect
+            width="80.006"
+            height="80"
+            fill="white"
+            transform="translate(-0.00390625)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/public/assets/onboarding.svg b/workspaces/website/src/components/Icons/DisplayCardIcons/Onboarding.tsx
similarity index 94%
rename from public/assets/onboarding.svg
rename to workspaces/website/src/components/Icons/DisplayCardIcons/Onboarding.tsx
index 6df0b286ff..396f64bb6d 100644
--- a/public/assets/onboarding.svg
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/Onboarding.tsx
@@ -1,11 +1,32 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
+import { HTMLChakraProps } from "@chakra-ui/react";
+
+type Props = HTMLChakraProps<"svg">;
+
+export const Onboarding = ({}: Props) => {
+  return (
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M8.00607 22.8388C3.58521 22.8388 0.00673911 19.2536 0.00673911 14.8327C0.00673911 10.4119 3.58521 6.82666 8.00607 6.82666C12.0361 6.82666 15.3719 9.81209 15.9245 13.6871H22.0504C24.4765 13.6871 26.7206 14.9675 27.9538 17.0566L31.1617 22.4884L36.0138 19.6849C38.4871 18.2562 41.5264 18.2562 43.9997 19.6849L48.097 22.0503L47.322 23.3644L43.2381 21.0058C41.2366 19.8534 38.7769 19.8534 36.7753 21.0058L31.9367 23.8025L35.4949 29.8273C36.8832 29.2544 38.4062 28.9377 40.0034 28.9377C41.8364 28.9377 43.5684 29.3555 45.1184 30.0968L52.8144 17.0566C54.0477 14.9675 56.2918 13.6871 58.7179 13.6871H64.0822C64.6348 9.80535 67.9707 6.82666 72.0007 6.82666C76.4215 6.82666 80 10.4119 80 14.8327C80 19.2536 76.4215 22.8388 72.0007 22.8388C67.5798 22.8388 64.2103 19.4558 64.0081 15.2169H58.7179C56.8309 15.2169 55.0855 16.2142 54.1285 17.8384L46.446 30.8516C49.3775 32.7655 51.4059 35.9464 51.7564 39.6192H56.5209V41.1422H51.8036C51.689 44.8555 49.856 48.1374 47.0794 50.2198L54.1285 62.1548C55.0855 63.7789 56.8309 64.7763 58.7179 64.7763H64.0081C64.2103 60.5306 67.7079 57.1544 72.0007 57.1544C76.2935 57.1544 80 60.7396 80 65.1604C80 69.5813 76.4215 73.1665 72.0007 73.1665C67.9707 73.1665 64.6348 70.1878 64.0822 66.3061H58.7179C56.2918 66.3061 54.0477 65.0256 52.8144 62.9365L45.8057 51.0622C44.094 52.0326 42.1127 52.5852 40.0034 52.5852C38.1299 52.5852 36.3575 52.1472 34.7873 51.3722L31.9367 56.1974L36.7753 58.9941C38.7769 60.1465 41.2366 60.1465 43.2381 58.9941L47.322 56.6354L48.097 57.9496L43.9997 60.315C41.5264 61.7437 38.4871 61.7437 36.0138 60.315L31.1617 57.5115L27.9538 62.9432C26.7206 65.0324 24.4765 66.3128 22.0504 66.3128H15.9245C15.3719 70.1945 12.0361 73.1732 8.00607 73.1732C3.59195 73.1732 0.00673911 69.588 0.00673911 65.1672C0.00673911 60.7463 3.58521 57.1611 8.00607 57.1611C12.4269 57.1611 15.7965 60.5441 15.9987 64.783H22.0504C23.9373 64.783 25.6828 63.7856 26.6397 62.1615L29.8408 56.7433L24.4293 53.6163C21.956 52.1876 20.4397 49.5526 20.4397 46.6952V42.672H21.9628V46.6952C21.9628 49.0068 23.196 51.1431 25.1908 52.2955L30.6158 55.4291L33.4597 50.6039C30.3799 48.5485 28.3245 45.0913 28.1964 41.1422H15.9178C15.3652 45.0239 12.0293 48.0026 7.99933 48.0026C3.58521 48.0026 0 44.4174 0 39.9966C0 35.5757 3.57847 31.9905 7.99933 31.9905C12.4202 31.9905 15.7897 35.3735 15.9919 39.6192H28.2436C28.621 35.7172 30.8854 32.3746 34.1134 30.5079L30.609 24.5707L25.1841 27.7044C23.1825 28.8568 21.956 30.9931 21.956 33.3046V38.0894H20.433V33.3046C20.433 30.4472 21.956 27.8123 24.4225 26.3836L29.834 23.2566L26.633 17.8384C25.676 16.2142 23.9306 15.2169 22.0436 15.2169H15.9919C15.7897 19.4625 12.2921 22.8388 7.99933 22.8388H8.00607ZM12.2787 64.5202L10.075 63.7789C9.74476 63.6643 9.48193 63.388 9.3741 63.0376L8.69345 60.7328C8.60585 60.4363 8.34302 60.2341 8.03302 60.2274C7.72976 60.2274 7.46694 60.4228 7.37259 60.7193L6.65824 63.0106C6.55042 63.3611 6.28085 63.6374 5.95064 63.7452L3.74021 64.4528C3.45043 64.5472 3.25499 64.81 3.25499 65.12C3.25499 65.43 3.43695 65.6995 3.72673 65.7939L5.93042 66.5352C6.26737 66.6498 6.52346 66.9261 6.63129 67.2832L7.31194 69.588C7.39955 69.8845 7.66237 70.0867 7.97237 70.0934C8.27563 70.0934 8.53846 69.898 8.6328 69.6015L9.34715 67.3102C9.45497 66.9598 9.72454 66.6835 10.0548 66.5756L12.2652 65.868C12.555 65.7737 12.7504 65.5108 12.7504 65.2009C12.7504 64.8909 12.5684 64.6213 12.2787 64.5269V64.5202ZM12.2787 39.3564L10.075 38.6151C9.74476 38.5005 9.48193 38.2242 9.3741 37.8737L8.69345 35.569C8.60585 35.2725 8.34302 35.0703 8.03302 35.0635C7.72976 35.0635 7.46694 35.259 7.37259 35.5555L6.65824 37.8468C6.55042 38.1972 6.28085 38.4735 5.95064 38.5814L3.74021 39.289C3.45043 39.3833 3.25499 39.6461 3.25499 39.9561C3.25499 40.2661 3.43695 40.5357 3.72673 40.63L5.93042 41.3713C6.26737 41.4859 6.52346 41.7622 6.63129 42.1194L7.31194 44.4242C7.39955 44.7207 7.66237 44.9229 7.97237 44.9296C8.27563 44.9296 8.53846 44.7342 8.6328 44.4376L9.34715 42.1463C9.45497 41.7959 9.72454 41.5196 10.0548 41.4118L12.2652 40.7042C12.555 40.6098 12.7504 40.347 12.7504 40.037C12.7504 39.727 12.5684 39.4574 12.2787 39.3631V39.3564ZM12.2787 14.361L10.075 13.6197C9.74476 13.5051 9.48193 13.2288 9.3741 12.8784L8.69345 10.5736C8.60585 10.2771 8.34302 10.0749 8.03302 10.0682C7.72976 10.0682 7.46694 10.2636 7.37259 10.5601L6.65824 12.8514C6.55042 13.2019 6.28085 13.4782 5.95064 13.586L3.74021 14.2936C3.45043 14.3879 3.25499 14.6508 3.25499 14.9608C3.25499 15.2708 3.43695 15.5403 3.72673 15.6347L5.93042 16.376C6.26737 16.4905 6.52346 16.7669 6.63129 17.124L7.31194 19.4288C7.39955 19.7253 7.66237 19.9275 7.97237 19.9342C8.27563 19.9342 8.53846 19.7388 8.6328 19.4423L9.34715 17.151C9.45497 16.8005 9.72454 16.5242 10.0548 16.4164L12.2652 15.7088C12.555 15.6145 12.7504 15.3516 12.7504 15.0416C12.7504 14.7316 12.5684 14.4621 12.2787 14.3677V14.361ZM76.2665 64.5202L74.0628 63.7789C73.7326 63.6643 73.4698 63.388 73.362 63.0376L72.6813 60.7328C72.5937 60.4363 72.3309 60.2341 72.0209 60.2274C71.7176 60.2274 71.4548 60.4228 71.3605 60.7193L70.6461 63.0106C70.5383 63.3611 70.2687 63.6374 69.9385 63.7452L67.7281 64.4528C67.4383 64.5472 67.2429 64.81 67.2429 65.12C67.2429 65.43 67.4248 65.6995 67.7146 65.7939L69.9183 66.5352C70.2552 66.6498 70.5113 66.9261 70.6192 67.2832L71.2998 69.588C71.3874 69.8845 71.6502 70.0867 71.9602 70.0934C72.2635 70.0934 72.5263 69.898 72.6207 69.6015L73.335 67.3102C73.4428 66.9598 73.7124 66.6835 74.0426 66.5756L76.2531 65.868C76.5428 65.7737 76.7383 65.5108 76.7383 65.2009C76.7383 64.8909 76.5563 64.6213 76.2665 64.5269V64.5202ZM76.2665 14.361L74.0628 13.6197C73.7326 13.5051 73.4698 13.2288 73.362 12.8784L72.6813 10.5736C72.5937 10.2771 72.3309 10.0749 72.0209 10.0682C71.7176 10.0682 71.4548 10.2636 71.3605 10.5601L70.6461 12.8514C70.5383 13.2019 70.2687 13.4782 69.9385 13.586L67.7281 14.2936C67.4383 14.3879 67.2429 14.6508 67.2429 14.9608C67.2429 15.2708 67.4248 15.5403 67.7146 15.6347L69.9183 16.376C70.2552 16.4905 70.5113 16.7669 70.6192 17.124L71.2998 19.4288C71.3874 19.7253 71.6502 19.9275 71.9602 19.9342C72.2635 19.9342 72.5263 19.7388 72.6207 19.4423L73.335 17.151C73.4428 16.8005 73.7124 16.5242 74.0426 16.4164L76.2531 15.7088C76.5428 15.6145 76.7383 15.3516 76.7383 15.0416C76.7383 14.7316 76.5563 14.4621 76.2665 14.3677V14.361ZM41.2299 43.3661C41.2771 43.2448 41.304 43.1168 41.304 42.9753C41.304 42.8135 41.2771 42.6787 41.2299 42.5574C41.1827 42.4294 41.1086 42.3216 41.0075 42.2205C40.8997 42.1194 40.7649 42.025 40.5964 41.9442C40.4279 41.8566 40.2258 41.769 39.9899 41.6881C39.6058 41.5533 39.2621 41.405 38.9453 41.2568C38.6286 41.1085 38.3658 40.9333 38.1434 40.7311C37.921 40.529 37.7458 40.2998 37.6245 40.0303C37.5032 39.7607 37.4425 39.444 37.4425 39.0801C37.4425 38.7566 37.4964 38.4668 37.6042 38.204C37.7121 37.9344 37.8671 37.7053 38.0692 37.5031C38.2714 37.3077 38.514 37.1459 38.7971 37.0246C39.0801 36.9033 39.3969 36.8292 39.7473 36.7888V35.569H40.6571V36.8022C40.994 36.8494 41.304 36.937 41.5736 37.0785C41.8431 37.2201 42.079 37.402 42.2744 37.6244C42.4631 37.8535 42.6114 38.1164 42.7125 38.4264C42.8203 38.7296 42.8742 39.0666 42.8742 39.444H41.2973C41.2973 39.2014 41.2703 38.9924 41.2097 38.8105C41.149 38.6285 41.0614 38.4803 40.9536 38.3657C40.8525 38.2646 40.7379 38.1838 40.5964 38.1298C40.4616 38.0759 40.3066 38.049 40.1449 38.049C39.9495 38.049 39.781 38.0759 39.6395 38.1298C39.4979 38.177 39.3834 38.2511 39.2958 38.3387C39.2082 38.4331 39.134 38.5409 39.0936 38.669C39.0532 38.797 39.0329 38.9318 39.0329 39.0801C39.0329 39.2283 39.0532 39.3564 39.0936 39.4777C39.1408 39.5922 39.2149 39.7 39.3227 39.7944C39.4238 39.8955 39.5586 39.9898 39.7338 40.0774C39.9023 40.165 40.1179 40.2527 40.3673 40.347C40.7514 40.4885 41.0951 40.6368 41.4051 40.7918C41.7151 40.94 41.9847 41.1153 42.2071 41.3174C42.4294 41.5196 42.5979 41.7555 42.7125 42.025C42.8338 42.2879 42.8944 42.6046 42.8944 42.9685C42.8944 43.2987 42.8405 43.602 42.7327 43.8716C42.6249 44.1344 42.4631 44.3635 42.261 44.5589C42.0588 44.7544 41.8095 44.9094 41.5264 45.0239C41.2366 45.1385 40.9199 45.2126 40.5627 45.2463V46.3583H39.6597V45.2463C39.3362 45.2194 39.0262 45.1453 38.7229 45.0374C38.4197 44.9229 38.1568 44.7611 37.921 44.5522C37.6851 44.3433 37.4964 44.0737 37.3616 43.7503C37.2201 43.4268 37.1527 43.0359 37.1527 42.5844H38.7364C38.7364 42.854 38.7769 43.0831 38.8577 43.2718C38.9386 43.4537 39.0397 43.5953 39.1677 43.7031C39.2958 43.8109 39.4373 43.8918 39.599 43.9389C39.7608 43.9861 39.9292 44.0063 40.0977 44.0063C40.3134 44.0063 40.5021 43.9794 40.6571 43.9255C40.8188 43.8716 40.9468 43.7907 41.0479 43.6963C41.1355 43.6087 41.2097 43.5076 41.2501 43.3863L41.2299 43.3661Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M61.084 41.1422V39.6192H64.002C64.2042 35.3735 67.7018 31.9905 71.9946 31.9905C76.2874 31.9905 79.9939 35.5757 79.9939 39.9965C79.9939 44.4174 76.4155 48.0026 71.9946 48.0026C67.9646 48.0026 64.6288 45.0172 64.0762 41.1422H61.084ZM76.2672 39.3563L74.0635 38.615C73.7333 38.5005 73.4705 38.2242 73.3626 37.8737L72.682 35.5689C72.5944 35.2724 72.3316 35.0703 72.0216 35.0635C71.7183 35.0635 71.4555 35.2589 71.3611 35.5555L70.6468 37.8468C70.539 38.1972 70.2694 38.4735 69.9392 38.5813L67.7287 39.2889C67.439 39.3833 67.2435 39.6461 67.2435 39.9561C67.2435 40.2661 67.4255 40.5357 67.7153 40.63L69.919 41.3713C70.2559 41.4859 70.512 41.7622 70.6198 42.1194L71.3005 44.4241C71.3881 44.7207 71.6509 44.9228 71.9609 44.9296C72.2642 44.9296 72.527 44.7341 72.6213 44.4376L73.3357 42.1463C73.4435 41.7959 73.7131 41.5196 74.0433 41.4118L76.2537 40.7042C76.5435 40.6098 76.7389 40.347 76.7389 40.037C76.7389 39.727 76.557 39.4574 76.2672 39.3631V39.3563Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M54.8095 27.7045L51.2715 25.6625L52.0465 24.3484L55.571 26.3836C58.0443 27.8123 59.5606 30.4473 59.5606 33.3047V46.6885C59.5606 49.5459 58.0376 52.1809 55.571 53.6096L52.0465 55.6448L51.2715 54.3307L54.8095 52.2887C56.811 51.1364 58.0376 49.0001 58.0376 46.6885V33.3047C58.0376 30.9932 56.8043 28.8569 54.8095 27.7045Z"
-        fill="#0C0C4F" />
-</svg>
\ No newline at end of file
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/public/assets/results.svg b/workspaces/website/src/components/Icons/DisplayCardIcons/Results.tsx
similarity index 76%
rename from public/assets/results.svg
rename to workspaces/website/src/components/Icons/DisplayCardIcons/Results.tsx
index 0a5c113721..574d36273d 100644
--- a/public/assets/results.svg
+++ b/workspaces/website/src/components/Icons/DisplayCardIcons/Results.tsx
@@ -1,17 +1,40 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd"
+import { HTMLChakraProps } from "@chakra-ui/react";
+
+type Props = HTMLChakraProps<"svg">;
+
+export const Results = ({}: Props) => {
+  return (
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M12.1567 4.01014C8.6389 4.20271 5.8457 7.11546 5.8457 10.6804V15.8763C5.8457 17.926 7.50779 19.5876 9.55808 19.5876H16.2404V18.1031H9.55808C8.32791 18.1031 7.33065 17.1061 7.33065 15.8763V10.6804C7.33065 7.81081 9.65757 5.48454 12.528 5.48454C15.3984 5.48454 17.7253 7.81081 17.7253 10.6804V69.3196C17.7253 72.8845 20.5185 75.7973 24.0363 75.9899V76H67.4711C71.1616 76 74.1534 73.0091 74.1534 69.3196V63.3814C74.1534 61.3317 72.4913 59.6701 70.441 59.6701H33.3173C31.267 59.6701 29.6049 61.3317 29.6049 63.3814V69.3196C29.6049 72.1892 27.278 74.5155 24.4076 74.5155C21.5372 74.5155 19.2103 72.1892 19.2103 69.3196V10.6804C19.2103 8.58182 18.2423 6.70925 16.7284 5.48454H60.0464C62.9168 5.48454 65.2437 7.81081 65.2437 10.6804V58.1856H66.7286V10.6804C66.7286 6.99092 63.7369 4 60.0464 4H12.1567V4.01014ZM28.608 74.5155H67.4711C70.3415 74.5155 72.6684 72.1892 72.6684 69.3196V63.3814C72.6684 62.1516 71.6712 61.1546 70.441 61.1546H33.3173C32.0871 61.1546 31.0898 62.1516 31.0898 63.3814V69.3196C31.0898 71.4182 30.1219 73.2908 28.608 74.5155Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M25.1501 41.1134C25.1501 40.2935 25.8149 39.6289 26.635 39.6289H57.8189C58.6391 39.6289 59.3039 40.2935 59.3039 41.1134C59.3039 41.9333 58.6391 42.5979 57.8189 42.5979H26.635C25.8149 42.5979 25.1501 41.9333 25.1501 41.1134Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M32.5748 45.567C31.7547 45.567 31.0898 46.2317 31.0898 47.0515C31.0898 47.8714 31.7547 48.5361 32.5748 48.5361H51.8791C52.6993 48.5361 53.3641 47.8714 53.3641 47.0515C53.3641 46.2317 52.6993 45.567 51.8791 45.567H32.5748Z"
-        fill="#0C0C4F" />
-    <path
+        fill="currentColor"
+      />
+      <path
         d="M28.12 52.9897C28.12 52.1698 28.7848 51.5052 29.6049 51.5052H54.849C55.6692 51.5052 56.334 52.1698 56.334 52.9897C56.334 53.8096 55.6692 54.4742 54.849 54.4742H29.6049C28.7848 54.4742 28.12 53.8096 28.12 52.9897Z"
-        fill="#0C0C4F" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
         d="M42.227 12.9072C36.4862 12.9072 31.8323 17.5598 31.8323 23.299C31.8323 29.0382 36.4862 33.6907 42.227 33.6907C47.9678 33.6907 52.6216 29.0382 52.6216 23.299C52.6216 17.5598 47.9678 12.9072 42.227 12.9072ZM47.3793 19.5427L48.9544 21.1173L41.4846 28.585L37.3559 24.4575L38.931 22.8829L41.4846 25.4358L47.3793 19.5427Z"
-        fill="#0C0C4F" />
-</svg>
\ No newline at end of file
+        fill="currentColor"
+      />
+    </svg>
+  );
+};