diff --git a/pwa/src/apiService/resources/search.ts b/pwa/src/apiService/resources/search.ts
index 9d647cdb..a8a6f4cf 100644
--- a/pwa/src/apiService/resources/search.ts
+++ b/pwa/src/apiService/resources/search.ts
@@ -10,20 +10,38 @@ export default class Search {
     this._instance = _instance;
   }
 
-  public getSearch = async (filters: IFiltersContext, currentPage: number, limit: number): Promise<any> => {
-    let endpoint = `/search?page=${currentPage}&limit=${limit}&extend[]=all${filtersToQueryParams(
-      filters,
-    )}&embedded.rating.rating[>%3D]=${filters.rating}`;
+  public getSearch = async (
+    filters: IFiltersContext,
+    currentPage: number,
+    limit: number,
+    ratingFilter: string,
+  ): Promise<any> => {
+    let endpoint = `/search?page=${currentPage}&limit=${limit}&extend[]=all${filtersToQueryParams(filters)}`;
+
+    if (ratingFilter === "OpenCatalogi") {
+      endpoint += `&embedded.rating.rating[>%3D]=${filters.rating}`;
+    }
 
-    if (filters.orderRating === true) {
+    if (filters.orderRating === true && ratingFilter === "OpenCatalogi") {
       endpoint += "&order[embedded.rating.rating]=desc";
     }
 
+    if (ratingFilter === "Commonground") {
+      endpoint += `&embedded.nl.embedded.commonground.rating[>%3D]=${filters.ratingCommonground}`;
+    }
+
+    if (filters.orderRating === true && ratingFilter === "Commonground") {
+      endpoint += "&order[embedded.nl.embedded.commonground.rating]=desc";
+    }
+
     if (filters.isForked === true) {
       endpoint += "&isBasedOn=IS NULL";
     }
 
-    if (window.sessionStorage.getItem("GITHUB_ORGANIZATION_URL") !== "" && window.sessionStorage.getItem("GITHUB_ORGANIZATION_URL") !== "false") {
+    if (
+      window.sessionStorage.getItem("GITHUB_ORGANIZATION_URL") !== "" &&
+      window.sessionStorage.getItem("GITHUB_ORGANIZATION_URL") !== "false"
+    ) {
       endpoint += `&embedded.url.embedded.organisation.github=${window.sessionStorage.getItem(
         "GITHUB_ORGANIZATION_URL",
       )}`;
diff --git a/pwa/src/components/componentCard/ComponentCard.module.css b/pwa/src/components/componentCard/ComponentCard.module.css
index 2345b0d2..ffdafa6b 100644
--- a/pwa/src/components/componentCard/ComponentCard.module.css
+++ b/pwa/src/components/componentCard/ComponentCard.module.css
@@ -77,9 +77,14 @@
     align-self: center;
     flex: 1;
   }
+
   .ratingIndicatorContainer {
     min-height: 55px;
   }
+
+  .commongroundRating {
+    min-height: 55px;
+  }
 }
 
 @media only screen and (min-width: 576px) {
@@ -97,9 +102,40 @@
     align-self: center;
     flex: 1;
   }
+
   .ratingIndicatorContainer {
     min-height: 55px;
   }
+
+  .commongroundRating {
+    min-height: 55px;
+  }
+}
+
+.commongroundRating {
+  border-radius: 50%;
+  height: 70px;
+  width: 70px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+/* Colors of commonground rating */
+
+.goldRating {
+  background-color: #d4af37;
+  color: #ffffff;
+}
+
+.silverRating {
+  background: #bcc6cc;
+  color: #ffffff;
+}
+
+.bronzeRating {
+  background: #a97142;
+  color: #ffffff;
 }
 
 /* Colors of the 5 layers */
diff --git a/pwa/src/components/componentCard/ComponentCard.tsx b/pwa/src/components/componentCard/ComponentCard.tsx
index 21e3dde4..faa2308e 100644
--- a/pwa/src/components/componentCard/ComponentCard.tsx
+++ b/pwa/src/components/componentCard/ComponentCard.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import * as styles from "./ComponentCard.module.css";
-import { DataBadge, Icon, Link, Paragraph } from "@utrecht/component-library-react/dist/css-module";
 import _ from "lodash";
+import clsx from "clsx";
+import { DataBadge, Icon, Link, Paragraph } from "@utrecht/component-library-react/dist/css-module";
 import { categories as _categories, TCategories } from "../../data/categories";
 import { useTranslation } from "react-i18next";
 import { IconArrowRight } from "@tabler/icons-react";
@@ -12,6 +13,7 @@ import { TOOLTIP_ID } from "../../layout/Layout";
 import { CardHeader, CardHeaderTitle, CardWrapper } from "@conduction/components";
 import { navigate } from "gatsby";
 import { RatingIndicatorTemplate } from "../../templates/templateParts/ratingIndicator/RatingIndicatorTemplate";
+import { getCommongroundRating } from "../../services/getCommongroundRating";
 
 export interface ComponentCardProps {
   title: {
@@ -26,6 +28,9 @@ export interface ComponentCardProps {
       rating: number;
       maxRating: number;
     };
+    ratingCommonground?: {
+      rating: number;
+    };
     status?: string;
     installations: string;
     organization: {
@@ -40,6 +45,8 @@ export interface ComponentCardProps {
 export const ComponentCard: React.FC<ComponentCardProps> = ({ title, layer, categories, description, tags }) => {
   const { t } = useTranslation();
 
+  const ratingFilter = window.sessionStorage.getItem("FILTER_RATING");
+
   const _layer: TCategories = t(_.upperFirst(layer));
 
   const __categories =
@@ -149,13 +156,33 @@ export const ComponentCard: React.FC<ComponentCardProps> = ({ title, layer, cate
           </div>
         </div>
         <div className={styles.ratingContainer}>
-          {tags.rating && tags.rating?.rating && (
-            <RatingIndicatorTemplate
-              layoutClassName={styles.ratingIndicatorContainer}
-              maxRating={tags.rating?.maxRating}
-              rating={tags.rating?.rating}
-            />
-          )}
+          <>
+            {ratingFilter === "OpenCatalogi" && (
+              <>
+                {tags.rating && tags.rating?.rating && (
+                  <RatingIndicatorTemplate
+                    layoutClassName={styles.ratingIndicatorContainer}
+                    maxRating={tags.rating?.maxRating}
+                    rating={tags.rating?.rating}
+                  />
+                )}
+              </>
+            )}
+            {ratingFilter === "Commonground" && (
+              <>
+                {tags.ratingCommonground && tags.ratingCommonground?.rating && (
+                  <div
+                    className={clsx(
+                      styles[_.camelCase(t(`${getCommongroundRating(tags.ratingCommonground.rating ?? "0")} rating`))],
+                      styles.commongroundRating,
+                    )}
+                  >
+                    {t(getCommongroundRating(tags.ratingCommonground.rating))}
+                  </div>
+                )}
+              </>
+            )}
+          </>
         </div>
       </div>
     </CardWrapper>
diff --git a/pwa/src/context/filters.ts b/pwa/src/context/filters.ts
index c68c1315..cb6634cd 100644
--- a/pwa/src/context/filters.ts
+++ b/pwa/src/context/filters.ts
@@ -6,6 +6,7 @@ export interface IFiltersContext {
   orderRating: boolean;
   rating: number;
   organizationSearch?: string;
+  ratingCommonground: number;
 
   _search?: string;
   softwareType?: string;
@@ -34,6 +35,7 @@ export const defaultFiltersContext: IFiltersContext = {
   orderRating: true,
   developmentStatus: "stable",
   rating: 16,
+  ratingCommonground: 1,
 };
 
 export const useFiltersContext = () => {
diff --git a/pwa/src/hooks/search.ts b/pwa/src/hooks/search.ts
index a4bbd143..481824c7 100644
--- a/pwa/src/hooks/search.ts
+++ b/pwa/src/hooks/search.ts
@@ -7,10 +7,10 @@ import { IFiltersContext } from "../context/filters";
 export const useSearch = (_: QueryClient) => {
   const API: APIService | null = React.useContext(APIContext);
 
-  const getSearch = (filters: IFiltersContext, currentPage: number, limit: number) =>
+  const getSearch = (filters: IFiltersContext, currentPage: number, limit: number, ratingFilter: string) =>
     useQuery<any, Error>(
       ["search", filters, currentPage, limit],
-      () => API?.Search.getSearch(filters, currentPage, limit),
+      () => API?.Search.getSearch(filters, currentPage, limit, ratingFilter),
       {
         onError: (error) => {
           throw new Error(error.message);
diff --git a/pwa/src/hooks/useEnvironment.ts b/pwa/src/hooks/useEnvironment.ts
index bea389af..e11ccd0f 100644
--- a/pwa/src/hooks/useEnvironment.ts
+++ b/pwa/src/hooks/useEnvironment.ts
@@ -51,6 +51,7 @@ export const useEnvironment = () => {
     window.sessionStorage.setItem("FOOTER_CONTENT", process.env.GATSBY_FOOTER_CONTENT ?? "");
     window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", process.env.GATSBY_FOOTER_CONTENT_HEADER ?? "");
     window.sessionStorage.setItem("OPTIONAL_START_PAGE", process.env.GATSBY_OPTIONAL_START_PAGE ?? "");
+    window.sessionStorage.setItem("FILTER_RATING", process.env.GATSBY_FILTER_RATING ?? "Commonground");
 
     updateSessionStorage();
   };
@@ -88,6 +89,7 @@ export const useEnvironment = () => {
     window.sessionStorage.setItem("FOOTER_CONTENT", config.GATSBY_FOOTER_CONTENT ?? "");
     window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", config.GATSBY_FOOTER_CONTENT_HEADER ?? "");
     window.sessionStorage.setItem("OPTIONAL_START_PAGE", config.GATSBY_OPTIONAL_START_PAGE ?? "");
+    window.sessionStorage.setItem("FILTER_RATING", config.GATSBY_FILTER_RATING ?? "OpenCatalogi");
 
     updateSessionStorage();
   };
diff --git a/pwa/src/layout/Head.tsx b/pwa/src/layout/Head.tsx
index 5bd7a4bb..b25860a8 100644
--- a/pwa/src/layout/Head.tsx
+++ b/pwa/src/layout/Head.tsx
@@ -14,7 +14,7 @@ export const Head: React.FC = () => {
     <Helmet
       title={window.sessionStorage.getItem("PAGE_TITLE") ?? "OpenCatalogi"}
       bodyAttributes={{
-        class: window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME") ?? "conduction-theme",
+        class: theme,
       }}
     />
   );
diff --git a/pwa/src/services/filtersToQueryParams.ts b/pwa/src/services/filtersToQueryParams.ts
index 4d4c10ef..181e497c 100644
--- a/pwa/src/services/filtersToQueryParams.ts
+++ b/pwa/src/services/filtersToQueryParams.ts
@@ -21,7 +21,9 @@ export const filtersToQueryParams = (filters: any): string => {
           params += "&isBasedOn=IS NULL";
           break;
         case "orderRating":
-          params += "&order[embedded.rating.rating]=desc";
+          window.sessionStorage.getItem("FILTER_RATING") === "Commonground"
+            ? (params += "&order[embedded.nl.embedded.commonground.rating]=desc")
+            : (params += "&order[embedded.rating.rating]=desc");
           break;
         case "componentsCurrentPage":
           params += "";
@@ -29,6 +31,9 @@ export const filtersToQueryParams = (filters: any): string => {
         case "rating":
           params += "";
           break;
+        case "ratingCommonground":
+          params += "";
+          break;
 
         default:
           params += `&${key}=${value}`;
diff --git a/pwa/src/services/getCommongroundRating.ts b/pwa/src/services/getCommongroundRating.ts
new file mode 100644
index 00000000..573f8a6e
--- /dev/null
+++ b/pwa/src/services/getCommongroundRating.ts
@@ -0,0 +1,14 @@
+export const getCommongroundRating = (rating: number): string => {
+  switch (rating) {
+    case 0:
+      return "N.V.T";
+    case 1:
+      return "Bronze";
+    case 2:
+      return "Silver";
+    case 3:
+      return "Gold";
+    default:
+      return "N.V.T";
+  }
+};
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
index 828cd8d1..7afc433d 100644
--- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
+++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.module.css
@@ -90,6 +90,12 @@
 .infoCard {
   flex: 1;
 }
+
+.infoCardCommonground {
+  display: flex;
+  justify-content: center;
+}
+
 .ratingIndicatorContainer {
   height: var(--web-app-component-rating-indicator-height);
 }
@@ -294,6 +300,35 @@
   }
 }
 
+.commongroundRating {
+  border-radius: 50%;
+  height: var(--web-app-component-rating-indicator-height);
+  width: var(--web-app-component-rating-indicator-height);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+/* Colors of commonground rating */
+
+.goldRating {
+  background-color: #d4af37;
+  color: #ffffff;
+  font-size: var(--web-app-size-lg);
+}
+
+.silverRating {
+  background: #bcc6cc;
+  color: #ffffff;
+  font-size: var(--web-app-size-lg);
+}
+
+.bronzeRating {
+  background: #a97142;
+  color: #ffffff;
+  font-size: var(--web-app-size-lg);
+}
+
 /* Colors of the 5 layers */
 .interactionLayer,
 .interfaceLayer {
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
index 07cd36ec..46f4a9c0 100644
--- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
+++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as styles from "./ComponentsDetailTemplate.module.css";
 import _ from "lodash";
+import clsx from "clsx";
 import Skeleton from "react-loading-skeleton";
 import componentPlacholderLogo from "../../assets/images/grey.png";
 import {
@@ -57,6 +58,7 @@ import { ExpandableLeadParagraph } from "../../components/expandableLeadParagrap
 import { TOOLTIP_ID } from "../../layout/Layout";
 import { getStatusColor } from "../../services/getStatusColor";
 import { ApplicationCard } from "../../components";
+import { getCommongroundRating } from "../../services/getCommongroundRating";
 
 interface ComponentsDetailTemplateProps {
   componentId: string;
@@ -148,6 +150,8 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
     }, 300); // Give the modal some time to finish animating
   };
 
+  const ratingFilter = window.sessionStorage.getItem("FILTER_RATING");
+
   return (
     <Container layoutClassName={styles.container}>
       <Link
@@ -296,6 +300,7 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
               )}
             </div>
           </div>
+
           <div className={styles.cardsHeaderContainer}>
             <Heading3 className={styles.cardsHeading}>{t("Application")}</Heading3>
             <Heading3 className={styles.cardsHeading}>{t("Organization")}</Heading3>
@@ -346,32 +351,54 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
               title=""
               content={
                 <>
-                  {_getComponent.data.embedded?.rating && (
+                  {ratingFilter === "OpenCatalogi" && (
                     <>
-                      <RatingIndicatorTemplate
-                        layoutClassName={styles.ratingIndicatorContainer}
-                        maxRating={rating.maxRating}
-                        rating={rating.rating}
-                      />
-                      <span className={styles.link}>
-                        <Link
-                          onClick={(e) => {
-                            e.preventDefault(), openModal();
-                          }}
-                          href={`${_getComponent.data.id}/?openratingpopup`}
-                        >
-                          <Icon>
-                            <IconArrowRight />
-                          </Icon>
-                          {t("Rating")}
-                        </Link>
-                      </span>
+                      {_getComponent.data.embedded?.rating && (
+                        <>
+                          <RatingIndicatorTemplate
+                            layoutClassName={styles.ratingIndicatorContainer}
+                            maxRating={rating.maxRating}
+                            rating={rating.rating}
+                          />
+                          <span className={styles.link}>
+                            <Link
+                              onClick={(e) => {
+                                e.preventDefault(), openModal();
+                              }}
+                              href={`${_getComponent.data.id}/?openratingpopup`}
+                            >
+                              <Icon>
+                                <IconArrowRight />
+                              </Icon>
+                              {t("Rating")}
+                            </Link>
+                          </span>
+                        </>
+                      )}
+                      {!rating && <div className={styles.noRatingStyle}>{t("No rating available")}</div>}
                     </>
                   )}
-                  {!rating && <div className={styles.noRatingStyle}>{t("No rating available")}</div>}
+                  {ratingFilter === "Commonground" && (
+                    <div
+                      className={clsx(
+                        styles[
+                          _.camelCase(
+                            t(
+                              `${getCommongroundRating(
+                                _getComponent.data.embedded?.nl?.embedded?.commonground?.rating ?? "0",
+                              )} rating`,
+                            ),
+                          )
+                        ],
+                        styles.commongroundRating,
+                      )}
+                    >
+                      {t(getCommongroundRating(_getComponent.data.embedded?.nl?.embedded?.commonground?.rating))}
+                    </div>
+                  )}
                 </>
               }
-              layoutClassName={styles.infoCard}
+              layoutClassName={clsx(styles.infoCard, ratingFilter === "Commonground" && styles.infoCardCommonground)}
             />
 
             {isVisible && (
diff --git a/pwa/src/templates/components/ComponentsTemplate.module.css b/pwa/src/templates/components/ComponentsTemplate.module.css
index 6d773078..d042765a 100644
--- a/pwa/src/templates/components/ComponentsTemplate.module.css
+++ b/pwa/src/templates/components/ComponentsTemplate.module.css
@@ -24,7 +24,7 @@
 
 .results {
   flex: 4;
-
+  min-width: 0;
   --utrecht-heading-4-font-weight: normal;
   --utrecht-heading-4-font-size: var(--web-app-font-size-md);
   --utrecht-heading-4-distanced-margin-block-end: var(--web-app-size-2xs);
diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx
index 3045d121..c0b0fdc0 100644
--- a/pwa/src/templates/components/ComponentsTemplate.tsx
+++ b/pwa/src/templates/components/ComponentsTemplate.tsx
@@ -25,6 +25,7 @@ export const ComponentsTemplate: React.FC = () => {
   const { filters } = useFiltersContext();
   const { queryLimit, setQueryLimit } = useQueryLimitContext();
   const { pagination, setPagination } = usePaginationContext();
+  const [ratingFilter, setRatingFilter] = React.useState<string>("");
   const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext();
 
   const queryClient = new QueryClient();
@@ -33,8 +34,13 @@ export const ComponentsTemplate: React.FC = () => {
     { ...filters, organizationSearch: "" },
     pagination.componentsCurrentPage,
     queryLimit.componentsSearchQueryLimit,
+    ratingFilter,
   ); // Ensure no refetch on resultDisplayLayout change
 
+  React.useEffect(() => {
+    setRatingFilter(window.sessionStorage.getItem("FILTER_RATING") ?? "OpenCatalogi");
+  }, []);
+
   React.useEffect(() => {
     if (queryLimit.previousComponentsSearchQueryLimit === queryLimit.componentsSearchQueryLimit) return;
 
diff --git a/pwa/src/templates/templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate.tsx b/pwa/src/templates/templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate.tsx
index e1163c51..1d866470 100644
--- a/pwa/src/templates/templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate.tsx
+++ b/pwa/src/templates/templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate.tsx
@@ -252,6 +252,9 @@ const Components: React.FC<ComponentsProps> = ({ components }) => {
               rating: component.embedded?.rating?.rating,
               maxRating: component.embedded?.rating?.maxRating,
             },
+            ratingCommonground: {
+              rating: component.embedded?.nl?.embedded?.commonground?.rating,
+            },
             status: component.developmentStatus,
             installations: component.usedBy?.length.toString() ?? "0",
             organization: {
diff --git a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
index e3128f61..d5bad785 100644
--- a/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
+++ b/pwa/src/templates/templateParts/filters/verticalFilters/VerticalFiltersTemplate.tsx
@@ -37,6 +37,7 @@ import { navigate } from "gatsby";
 import { filtersToUrlQueryParams } from "../../../../services/filtersToQueryParams";
 import { usePaginationContext } from "../../../../context/pagination";
 import { useResultDisplayLayoutContext } from "../../../../context/resultDisplayLayout";
+import { getCommongroundRating } from "../../../../services/getCommongroundRating";
 
 interface VerticalFiltersTemplateProps {
   filterSet: any[];
@@ -57,6 +58,7 @@ export const VerticalFiltersTemplate: React.FC<VerticalFiltersTemplateProps> = (
   const [softwareTypeRadioFilter, setSoftwareTypeRadioFilter] = React.useState<string>("");
 
   const [ratingFilter, setRatingFilter] = React.useState<number>(16);
+  const [ratingFilterCommonground, setRatingFilterCommonground] = React.useState<number>(1);
 
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
@@ -388,6 +390,19 @@ export const VerticalFiltersTemplate: React.FC<VerticalFiltersTemplateProps> = (
     }, 500);
   };
 
+  const changeCommongroundRatingFilter = (e: any) => {
+    setRatingFilterCommonground(e.target.value);
+
+    if (ratingFilterTimeout.current) clearTimeout(ratingFilterTimeout.current);
+
+    ratingFilterTimeout.current = setTimeout(() => {
+      setFilters({
+        ...filters,
+        ratingCommonground: e.target.value,
+      });
+    }, 500);
+  };
+
   const url = location.search;
   const [, params] = url.split("?");
   const parsedParams = qs.parse(params);
@@ -470,30 +485,55 @@ export const VerticalFiltersTemplate: React.FC<VerticalFiltersTemplateProps> = (
                 <div className={styles.radioContainer} onChange={() => isOrdered(filters.orderRating)}>
                   <InputCheckbox label={t("Order by rating")} name={"orderRating"} {...{ errors, control, register }} />
                 </div>
-                <div>
-                  <span>
-                    {t("Rating")}: <span>{ratingFilter}</span>
-                  </span>
-                  <div className={styles.ratingSliderContainer}>
-                    <Textbox
-                      className={styles.ratingSlider}
-                      type="range"
-                      onChange={(e) => changeRatingFilter(e)}
-                      min={0}
-                      max={24}
-                      list="ratingDataList"
-                      value={ratingFilter}
-                      id="ratingSlider"
-                    />
-                    <datalist className={styles.dataList} id="ratingDataList">
-                      <option value="0" label="0"></option>
-                      <option value="6" label="6"></option>
-                      <option value="12" label="12"></option>
-                      <option value="18" label="18"></option>
-                      <option value="24" label="24"></option>
-                    </datalist>
+
+                {window.sessionStorage.getItem("FILTER_RATING") === "OpenCatalogi" && (
+                  <div>
+                    <span>
+                      {t("Rating")}: <span>{ratingFilter}</span>
+                    </span>
+                    <div className={styles.ratingSliderContainer}>
+                      <Textbox
+                        className={styles.ratingSlider}
+                        type="range"
+                        onChange={(e) => changeRatingFilter(e)}
+                        min={0}
+                        max={24}
+                        list="ratingDataList"
+                        value={ratingFilter}
+                        id="ratingSlider"
+                      />
+                      <datalist className={styles.dataList} id="ratingDataList">
+                        <option value="0" label="0"></option>
+                        <option value="6" label="6"></option>
+                        <option value="12" label="12"></option>
+                        <option value="18" label="18"></option>
+                        <option value="24" label="24"></option>
+                      </datalist>
+                    </div>
                   </div>
-                </div>
+                )}
+                {window.sessionStorage.getItem("FILTER_RATING") === "Commonground" && (
+                  <div>
+                    <div className={styles.ratingSliderContainer}>
+                      <Textbox
+                        className={styles.ratingSlider}
+                        type="range"
+                        onChange={(e) => changeCommongroundRatingFilter(e)}
+                        min={0}
+                        max={3}
+                        list="ratingDataList"
+                        value={ratingFilterCommonground}
+                        id="ratingSlider"
+                      />
+                      <datalist className={styles.dataList} id="ratingDataList">
+                        <option value="0" label="N.V.T."></option>
+                        <option value="1" label={t("Bronze")}></option>
+                        <option value="2" label={t("Silver")}></option>
+                        <option value="3" label={t("Gold")}></option>
+                      </datalist>
+                    </div>
+                  </div>
+                )}
               </div>
             </Collapsible>
           </FormField>
diff --git a/pwa/src/templates/templateParts/resultsTemplates/cards/CardsResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/cards/CardsResultTemplate.tsx
index 969d79e2..abfe40b0 100644
--- a/pwa/src/templates/templateParts/resultsTemplates/cards/CardsResultTemplate.tsx
+++ b/pwa/src/templates/templateParts/resultsTemplates/cards/CardsResultTemplate.tsx
@@ -60,6 +60,9 @@ export const CardsResultTemplate: React.FC<CardsResultTemplateProps> = ({ compon
                   rating: component.embedded?.rating?.rating,
                   maxRating: component.embedded?.rating?.maxRating,
                 },
+                ratingCommonground: {
+                  rating: component.embedded?.nl?.embedded?.commonground?.rating,
+                },
                 status: component.developmentStatus,
                 installations: component.usedBy?.length.toString() ?? "0",
                 organization: {
diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.module.css b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.module.css
index 98ff52bc..089b313c 100644
--- a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.module.css
+++ b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.module.css
@@ -91,6 +91,21 @@
 .icon {
   margin-inline-end: var(--web-app-size-2xs);
 }
+/* Colors of commonground rating */
+.goldRating {
+  --utrecht-badge-background-color: #d4af37;
+  --utrecht-badge-color: #ffffff;
+}
+
+.silverRating {
+  --utrecht-badge-background-color: #bcc6cc;
+  --utrecht-badge-color: #ffffff;
+}
+
+.bronzeRating {
+  --utrecht-badge-background-color: #a97142;
+  --utrecht-badge-color: #ffffff;
+}
 
 /* Colors of the 5 layers */
 .interactionLayer,
diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
index b27597e9..42b25acc 100644
--- a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
+++ b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx
@@ -17,11 +17,12 @@ import clsx from "clsx";
 import { getResultsUrl } from "../../../../services/getResultsUrl";
 import { getTypeFromSchemaRef } from "../../../../services/getTypeFromSchemaRef";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faInfoCircle, faLayerGroup } from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle, faLayerGroup, faMedal } from "@fortawesome/free-solid-svg-icons";
 import { TOOLTIP_ID } from "../../../../layout/Layout";
 import { getStatusColor } from "../../../../services/getStatusColor";
 import { HorizontalOverflowWrapper } from "@conduction/components";
 import { RatingIndicatorTemplate } from "../../ratingIndicator/RatingIndicatorTemplate";
+import { getCommongroundRating } from "../../../../services/getCommongroundRating";
 
 interface TableResultTemplateProps {
   components: any[];
@@ -42,7 +43,6 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
               <TableHeaderCell>{t("Name")}</TableHeaderCell>
               <TableHeaderCell>{t("Type")}</TableHeaderCell>
               <TableHeaderCell>{t("Layer")}</TableHeaderCell>
-              <TableHeaderCell>{t("Sources")}</TableHeaderCell>
               <TableHeaderCell>{t("Software type")}</TableHeaderCell>
               <TableHeaderCell>{t("Status")}</TableHeaderCell>
               <TableHeaderCell>{t("Rating")}</TableHeaderCell>
@@ -64,7 +64,9 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
                     {component.name}
                   </span>
                 </TableCell>
+
                 <TableCell>{t(_.upperFirst(getTypeFromSchemaRef(component._self?.schema.ref)))}</TableCell>
+
                 <TableCell>
                   <div
                     className={clsx(
@@ -98,22 +100,6 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
                   </div>
                 </TableCell>
 
-                <TableCell>
-                  <DataBadge
-                    data-tooltip-id={TOOLTIP_ID}
-                    data-tooltip-content={t("Sources")}
-                    className={styles.tagWidth}
-                  >
-                    {_.upperFirst(
-                      component._self?.synchronizations
-                        ? component._self?.synchronizations?.length
-                          ? component._self?.synchronizations?.at(-1)?.source.name
-                          : "Onbekend"
-                        : "N.V.T.",
-                    )}
-                  </DataBadge>
-                </TableCell>
-
                 <TableCell>
                   <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Component Type">
                     {_.upperFirst(
@@ -144,21 +130,47 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
                   </StatusBadge>
                 </TableCell>
 
-                <TableCell className={styles.ratingTableCell}>
-                  {component._self.schema.ref.includes("component.schema.json") ? (
-                    component.embedded?.rating?.rating ? (
-                      <RatingIndicatorTemplate
-                        layoutClassName={styles.ratingIndicatorContainer}
-                        maxRating={component.embedded?.rating?.maxRating}
-                        rating={component.embedded?.rating?.rating}
-                      />
+                {window.sessionStorage.getItem("FILTER_RATING") === "OpenCatalogi" && (
+                  <TableCell className={styles.ratingTableCell}>
+                    {component._self.schema.ref.includes("component.schema.json") ? (
+                      component.embedded?.rating?.rating ? (
+                        <RatingIndicatorTemplate
+                          layoutClassName={styles.ratingIndicatorContainer}
+                          maxRating={component.embedded?.rating?.maxRating}
+                          rating={component.embedded?.rating?.rating}
+                        />
+                      ) : (
+                        t("No rating available")
+                      )
                     ) : (
-                      t("No rating available")
-                    )
-                  ) : (
-                    "N.V.T."
-                  )}
-                </TableCell>
+                      "N.V.T."
+                    )}
+                  </TableCell>
+                )}
+
+                {window.sessionStorage.getItem("FILTER_RATING") === "Commonground" && (
+                  <TableCell>
+                    <DataBadge
+                      data-tooltip-id={TOOLTIP_ID}
+                      data-tooltip-content={t("Commonground rating")}
+                      className={
+                        styles[
+                          _.camelCase(
+                            t(
+                              `${getCommongroundRating(
+                                component.embedded?.nl?.embedded?.commonground?.rating ?? "0",
+                              )} rating`,
+                            ),
+                          )
+                        ]
+                      }
+                    >
+                      <FontAwesomeIcon icon={faMedal} />
+                      {t(getCommongroundRating(component.embedded?.nl?.embedded?.commonground?.rating))}
+                    </DataBadge>
+                  </TableCell>
+                )}
+
                 <TableCell>
                   <Link
                     onClick={() => navigate(`/${getResultsUrl(component._self?.schema?.ref)}/${component.id}`)}
@@ -182,6 +194,7 @@ export const TableResultTemplate: React.FC<TableResultTemplateProps> = ({ compon
               <TableCell />
               <TableCell />
               <TableCell />
+              <TableCell />
             </TableRow>
           )}
         </TableBody>
diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
index 80ebe94c..ae4aa595 100644
--- a/pwa/src/translations/en.ts
+++ b/pwa/src/translations/en.ts
@@ -73,6 +73,9 @@ export const en = {
   Unavailable: "Unavailable",
   Rating: "Rating",
   Description: "Description",
+  Gold: "Gold",
+  Silver: "Silver",
+  Bronze: "Bronze",
   "Open Catalogs": "Open Catalogs",
   "Reusable components within the government": "Reusable components within the government",
   "Information Models": "Information Models",
@@ -155,4 +158,6 @@ export const en = {
   "Left scroll button": "Left scroll button",
   "Right scroll button": "Right scroll button",
   "No application found": "No application found",
+  "Commonground rating": "Commonground rating",
+  "No rating": "No rating",
 };
diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
index 348ae727..6d6019ed 100644
--- a/pwa/src/translations/nl.ts
+++ b/pwa/src/translations/nl.ts
@@ -75,6 +75,9 @@ export const nl = {
   Rating: "Beoordeling",
   Points: "Punten",
   Description: "Beschrijving",
+  Gold: "Goud",
+  Silver: "Zilver",
+  Bronze: "Brons",
   "Open Catalogs": "OpenCatalogi",
   "Reusable components within the government": "Herbruikbare componenten binnen de overheid",
   "Information Models": "Informatiemodellen",
@@ -158,4 +161,6 @@ export const nl = {
   "Left scroll button": "Linker scrollknop",
   "Right scroll button": "Rechter scrollknop",
   "No application found": "Geen applicatie gevonden",
+  "Commonground rating": "Commonground beoordeling",
+  "No rating": "Geen beoordeling",
 };
diff --git a/pwa/static/.env.development b/pwa/static/.env.development
index ffe59c20..b878234c 100644
--- a/pwa/static/.env.development
+++ b/pwa/static/.env.development
@@ -42,6 +42,9 @@ GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/OpenCatalogi/web-app/25
 # options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" 
 GATSBY_FOOTER_CONTENT_HEADER="" 
 
+# Filters
+# options: "OpenCatalogi" | "Commonground" 
+GATSBY_FILTER_RATING="OpenCatalogi"
 
 # Home
 GATSBY_OPTIONAL_START_PAGE=
diff --git a/pwa/static/.env.production b/pwa/static/.env.production
index 5ac4375c..e9851fec 100644
--- a/pwa/static/.env.production
+++ b/pwa/static/.env.production
@@ -43,6 +43,10 @@ GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/OpenCatalogi/web-app/25
 # options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" 
 GATSBY_FOOTER_CONTENT_HEADER="" 
 
+# Filters
+# options: "OpenCatalogi" | "Commonground" 
+GATSBY_FILTER_RATING="OpenCatalogi"
+
 # Home
 GATSBY_OPTIONAL_START_PAGE=