diff --git a/.github/workflows/opencatalogi-page-deploy.yml b/.github/workflows/opencatalogi-page-deploy.yml
index c06a744bc..43cffc2b2 100644
--- a/.github/workflows/opencatalogi-page-deploy.yml
+++ b/.github/workflows/opencatalogi-page-deploy.yml
@@ -11,6 +11,7 @@ env: # Change these to your preferences any image url can also be a base encoded
 
   ME_URL: "https://api.opencatalogi.nl/api/users/me"
   API_URL: "https://api.opencatalogi.nl/api"
+  NEXTCLOUD_API_URL: "https://nextcloud.test.commonground.nu/index.php/apps/opencatalogi/api"
   ADMIN_URL: "https://api.opencatalogi.nl/admin"
   BASE_URL: "https://api.opencatalogi.nl"
   FRONTEND_URL: "https://api.opencatalogi.nl"
@@ -83,6 +84,7 @@ jobs:
           envkey_GATSBY_SHOW_THEME_SWITCHER: ${{ env.SHOW_THEME_SWITCHER }}
           envkey_GATSBY_ME_URL: ${{ env.ME_URL }}
           envkey_GATSBY_API_URL: ${{ env.API_URL }}
+          envkey_NEXTCLOUD_API_URL: ${{ env.NEXTCLOUD_API_URL }}
           envkey_GATSBY_ADMIN_URL: ${{ env.ADMIN_URL }}
           envkey_GATSBY_BASE_URL: ${{ env.BASE_URL }}
           envkey_GATSBY_FRONTEND_URL: ${{ env.FRONTEND_URL }}
diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts
index f1b2cce95..aba6cbccb 100644
--- a/pwa/src/apiService/apiService.ts
+++ b/pwa/src/apiService/apiService.ts
@@ -105,7 +105,7 @@ export default class APIService {
     const authorization = this.JWT ? { Authorization: "Bearer " + this.JWT } : {};
 
     return axios.create({
-      baseURL: "http://localhost:8080/index.php/apps/opencatalogi/api",
+      baseURL: window.sessionStorage.getItem("NEXTCLOUD_API_URL") ?? "",
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
diff --git a/pwa/src/hooks/useEnvironment.ts b/pwa/src/hooks/useEnvironment.ts
index 803123179..9aef93a8c 100644
--- a/pwa/src/hooks/useEnvironment.ts
+++ b/pwa/src/hooks/useEnvironment.ts
@@ -31,6 +31,10 @@ export const useEnvironment = () => {
     );
     window.sessionStorage.setItem("API_URL", process.env.GATSBY_API_URL ?? "");
     window.sessionStorage.setItem("BASE_URL", process.env.GATSBY_BASE_URL ?? "");
+    window.sessionStorage.setItem(
+      "NEXTCLOUD_API_URL",
+      process.env.GATSBY_NEXTCLOUD_BASE_URL ?? "http://nextcloud.local/index.php/apps/opencatalogi/api",
+    );
     window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "");
     window.sessionStorage.setItem("GITHUB_ORGANIZATION_URL", process.env.GATSBY_GITHUB_ORGANIZATION_URL ?? "");
     window.sessionStorage.setItem("FAVICON_URL", process.env.GATSBY_FAVICON_URL ?? "");
@@ -80,6 +84,10 @@ export const useEnvironment = () => {
       config.GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX ?? "",
     );
     window.sessionStorage.setItem("API_URL", config.GATSBY_API_URL ?? "");
+    window.sessionStorage.setItem(
+      "NEXTCLOUD_API_URL",
+      config.GATSBY_NEXTCLOUD_BASE_URL ?? "http://nextcloud.local/index.php/apps/opencatalogi/api",
+    );
     window.sessionStorage.setItem("BASE_URL", config.GATSBY_BASE_URL ?? "");
     window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", config.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "");
     window.sessionStorage.setItem("GITHUB_ORGANIZATION_URL", config.GATSBY_GITHUB_ORGANIZATION_URL ?? "");
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
index c9e25103d..729383f87 100644
--- a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
+++ b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -150,7 +150,7 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
   const imageHasValidSource = (src: string): boolean => {
     try {
       const url = new URL(src);
-      return url.protocol === "htpp:" || url.protocol === "https:";
+      return url.protocol === "http:" || url.protocol === "https:";
     } catch (_) {
       return false;
     }
diff --git a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css
index ada7a021d..4d8dc65ac 100644
--- a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css
+++ b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css
@@ -191,7 +191,7 @@
 
 .cardsContainer {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
 .cardsContainer > :not(:last-child) {
diff --git a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx
index 3747b91ca..11cf5801e 100644
--- a/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx
+++ b/pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx
@@ -1,13 +1,11 @@
 import * as React from "react";
 import * as styles from "./PublicationsDetailTemplate.module.css";
 import _ from "lodash";
-import clsx from "clsx";
 import Skeleton from "react-loading-skeleton";
 import componentPlacholderLogo from "../../assets/images/grey.png";
 import {
   Heading,
   Icon,
-  Button,
   DataBadge,
   BadgeCounter,
   Link,
@@ -15,45 +13,19 @@ import {
   TableHeaderCell,
   Heading3,
 } from "@utrecht/component-library-react/dist/css-module";
-import {
-  Container,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanel,
-  NotificationPopUp as _NotificationPopUp,
-  DisplaySwitch,
-  HorizontalOverflowWrapper,
-} from "@conduction/components";
+import { Container, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper } from "@conduction/components";
 import { navigate } from "gatsby";
-import { IconExternalLink, IconArrowLeft } from "@tabler/icons-react";
+import { IconArrowLeft } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { Table, TableBody, TableCell, TableRow } from "@utrecht/component-library-react/dist/css-module";
-import { QueryClient } from "react-query";
-import { useComponent } from "../../hooks/components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowLeft,
-  faScroll,
-} from "@fortawesome/free-solid-svg-icons";
+import { faBrush, faClock, faHouse, faList, faScroll, faTag } from "@fortawesome/free-solid-svg-icons";
 import { OrganizationCard } from "../../components/organizationCard/OrganizationCard";
-import { GitHubLogo } from "../../assets/svgs/GitHub";
-import { DependenciesTemplate } from "../templateParts/dependenciesTemplates/ComponentDependenciesTemplate";
-import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout";
-import { ComponentCardsAccordionTemplate } from "../templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate";
-import { DownloadTemplate } from "../templateParts/download/DownloadTemplate";
-import { IDisplaySwitchButton } from "@conduction/components/lib/components/displaySwitch/DisplaySwitch";
 import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph";
 import { TOOLTIP_ID } from "../../layout/Layout";
-import { ComponentCard } from "../../components";
-import { getCommongroundRating } from "../../services/getCommongroundRating";
-import {
-  CommongroundRatingGold,
-  CommongroundRatingSilver,
-  CommongroundRatingBronze,
-} from "../../assets/svgs/CommongroundRatingImages";
 import { usePublication } from "../../hooks/publication";
 import { translateDate } from "../../services/dateFormat";
+import { QueryClient } from "react-query";
 
 interface PublicationsDetailTemplateProps {
   publicationId: string;
@@ -61,92 +33,27 @@ interface PublicationsDetailTemplateProps {
 
 export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProps> = ({ publicationId }) => {
   const { t } = useTranslation();
-  const { resultDisplayLayout, setResultDisplayLayout } = useResultDisplayLayoutContext();
-  const [moreInformationVisible, setMoreInformationVisible] = React.useState<boolean>(false);
 
   const [tabIndex, setTabIndex] = React.useState(0);
 
-  const NotificationPopUp = _NotificationPopUp.NotificationPopUp;
-
   const tabsRef: any = React.useRef();
-  const queryClient = new QueryClient();
-  const _useComponent = useComponent(queryClient);
-  // @ts-expect-error because
-  const _getComponent = _useComponent.getOne(undefined);
 
+  const queryClient = new QueryClient();
   const _usePublication = usePublication(queryClient);
   const _getPublication = _usePublication.getOne(publicationId);
 
-  const getConfigComponents = _useComponent.getAllConfig(_getComponent.data?.name);
-
-  const gemma = _getComponent.data?.embedded?.nl?.embedded?.gemma;
-  const publicationData = _getPublication.data?.data?.data;
-
-  if (_getComponent.isError) return <>Something went wrong...</>;
-
-  const organisation = _getPublication?.data?.data?.organization;
+  const organisation =
+    _getPublication.data?.catalogi?.organisation?.title && _getPublication.data?.catalogi?.organisation;
 
   const imageHasValidSource = (src: string): boolean => {
     try {
       const url = new URL(src);
-      return url.protocol === "htpp:" || url.protocol === "https:";
+      return url.protocol === "http:" || url.protocol === "https:";
     } catch (_) {
       return false;
     }
   };
 
-  const displaySwitchButtons: IDisplaySwitchButton[] = [
-    {
-      label: t("Layer"),
-      pressed: resultDisplayLayout.dependenciesDisplayLayout === "layer",
-      handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, dependenciesDisplayLayout: "layer" }),
-      icon: {
-        name: "layer-group",
-        prefix: "fas",
-      },
-    },
-    {
-      label: t("Relations"),
-      pressed: resultDisplayLayout.dependenciesDisplayLayout === "relations",
-      handleClick: () => setResultDisplayLayout({ ...resultDisplayLayout, dependenciesDisplayLayout: "relations" }),
-      icon: {
-        name: "circle-nodes",
-        prefix: "fas",
-      },
-    },
-  ];
-
-  const openModal = (onClick: () => any): void => {
-    onClick();
-    setTimeout(() => {
-      const element = document.querySelectorAll('[class*="NotificationPopUp"]').item(0) as HTMLElement;
-      const elementRect = element.getBoundingClientRect();
-      const newHeight =
-        Math.ceil(elementRect.height) % 2 === 0 ? Math.ceil(elementRect.height) : Math.ceil(elementRect.height) + 1;
-      element.style.height = `${newHeight}px`;
-      element.style.maxHeight = `${newHeight}px`;
-      const newWidth =
-        Math.ceil(elementRect.width) % 2 === 0 ? Math.ceil(elementRect.width) : Math.ceil(elementRect.width) + 1;
-      element.style.width = `${newWidth}px`;
-      element.style.maxWidth = newWidth < 1170 ? `${newWidth}px` : `${1170}px`;
-    }, 300); // Give the modal some time to finish animating
-  };
-
-  const getCommongroundImage = (rating: number) => {
-    switch (rating) {
-      case 0:
-        return <CommongroundRatingBronze />;
-      case 1:
-        return <CommongroundRatingBronze />;
-      case 2:
-        return <CommongroundRatingSilver />;
-      case 3:
-        return <CommongroundRatingGold />;
-      default:
-        return <CommongroundRatingBronze />;
-    }
-  };
-
   return (
     <Container layoutClassName={styles.container}>
       <Link
@@ -167,283 +74,140 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
           <div className={styles.headingContainer}>
             <div className={styles.headingContent}>
               <Heading level={1} className={styles.componentName}>
-                {_getPublication?.data?.title}
+                {_getPublication.data?.title}
               </Heading>
 
               <ExpandableLeadParagraph
-                description={
-                  _getPublication?.data?.description ?? t("No description available")
-                }
+                description={_getPublication.data?.description ?? t("No description available")}
               />
-
-
-              {_getPublication.data?.metaData &&
-                <Table>
-                  <TableBody>
-                    {_getPublication.data?.reference &&
-                      <TableRow>
-                        <TableCell><b>{t("Reference")}</b></TableCell>
-                        <TableCell>{_getPublication.data.reference}</TableCell>
-                      </TableRow>
-                    }
-                    {_getPublication.data?.license &&
-                      <TableRow>
-                        <TableCell><b>{t("License")}</b></TableCell>
-                        <TableCell>{_getPublication.data.license}</TableCell>
-                      </TableRow>
-                    }
-                    {_getPublication.data?.category &&
-                      <TableRow>
-                        <TableCell><b>{t("Category")}</b></TableCell>
-                        <TableCell>{_getPublication.data.category}</TableCell>
-                      </TableRow>
-                    }
-                    {_getPublication.data?.data?.themes &&
-                      <TableRow>
-                        <TableCell><b>{t("Themas")}</b></TableCell>
-                        <TableCell>{_getPublication.data?.data?.themes.join(', ')}</TableCell>
-                      </TableRow>
-                    }
-                    {_getPublication.data?.status &&
-                      <TableRow>
-                        <TableCell><b>{t("Status")}</b></TableCell>
-                        <TableCell>{_getPublication.data.status}</TableCell>
-                      </TableRow>
-                    }
-                    {_getPublication.data?.published &&
-                      <TableRow>
-                        <TableCell><b>{t("Published")}</b></TableCell>
-                        <TableCell>{translateDate('nl', _getPublication.data.published)}</TableCell>
-                      </TableRow>
-                    }
-                    {_getPublication.data?.modified &&
-                      <TableRow>
-                        <TableCell><b>{t("Modified")}</b></TableCell>
-                        <TableCell>{translateDate('nl',_getPublication.data.modified)}</TableCell>
-                      </TableRow>
-                    }
-                  </TableBody>
-                </Table>
-              }
             </div>
 
             <div className={styles.addToCatalogusContainer}>
               <div className={styles.logoContainer}>
                 <img
                   src={
-                    imageHasValidSource(_getPublication.data?.image)
-                      ? _getPublication.data?.image
+                    imageHasValidSource(_getPublication.data.image)
+                      ? _getPublication.data.image
                       : componentPlacholderLogo
                   }
                   className={styles.logo}
                 />
               </div>
-
-              <div className={styles.headerButtonsContainer}>
-                {/* This button should only be visible for authenticated users; feature will come in the future. */}
-                {/* <Button>
-                <Icon>
-                  <IconExternalLink />
-                </Icon>{" "}
-                Toevoegen aan catalogus
-              </Button> */}
-
-                {_getPublication.data?.data?.embedded?.url?.url && (
-                  <Button
-                    appearance="secondary-action-button"
-                    onClick={() => open(_getPublication.data?.data?.embedded?.url?.url)}
+              <div className={styles.tags}>
+                {organisation?.title && (
+                  <DataBadge
+                    className={styles.clickableBadge}
+                    onClick={() => {
+                      navigate("/organizations/" + organisation.id);
+                    }}
+                    data-tooltip-id={TOOLTIP_ID}
+                    data-tooltip-content="Organisatie"
                   >
-                    <Icon>
-                      <GitHubLogo />
-                    </Icon>{" "}
-                    {t("View Repository")}
-                  </Button>
+                    <FontAwesomeIcon icon={faHouse} />
+                    {organisation.title}
+                  </DataBadge>
                 )}
 
-                {_getPublication.data?.data?.embedded?.downloads && (
-                  <DownloadTemplate
-                    downloads={_getPublication?.data?.data?.embedded?.downloads}
-                    backUrl={`/components/${_getPublication.data?.data?.id}`}
-                  />
+                {_getPublication.data.reference && (
+                  <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Referentie">
+                    <FontAwesomeIcon icon={faTag} />
+                    {_getPublication.data.reference}
+                  </DataBadge>
                 )}
-
-                {(gemma?.applicatiefunctie ||
-                  gemma?.bedrijfsfuncties ||
-                  gemma?.bedrijfsservices ||
-                  gemma?.model ||
-                  gemma?.referentiecomponenten?.length > 0 ||
-                  _getPublication.data?.data?.embedded?.nl?.upl?.length > 0) && (
-                  <>
-                    <Button
-                      appearance="secondary-action-button"
-                      onClick={(e) => {
-                        e.preventDefault(), openModal(() => setMoreInformationVisible(true));
-                      }}
-                    >
-                      {t("More information")}
-                    </Button>
-
-                    {moreInformationVisible && (
-                      <div className={styles.overlay}>
-                        <NotificationPopUp
-                          isVisible
-                          hide={() => setMoreInformationVisible(false)}
-                          title={`${t("More information")}:`}
-                          customContent={
-                            <HorizontalOverflowWrapper
-                              ariaLabels={{
-                                scrollLeftButton: t("Left scroll button"),
-                                scrollRightButton: t("Right scroll button"),
-                              }}
-                            >
-                              <Table className={styles.table}>
-                                <TableBody className={styles.tableBody}>
-                                  {gemma?.applicatiefunctie && (
-                                    <TableRow className={styles.tableRow}>
-                                      <TableCell className={styles.title}>Applicatiefunctie:</TableCell>
-                                      <TableCell className={styles.description}>{gemma.applicatiefunctie}</TableCell>
-                                    </TableRow>
-                                  )}
-
-                                  {gemma?.bedrijfsfuncties && (
-                                    <TableRow className={styles.tableRow}>
-                                      <TableCell className={styles.title}>Bedrijfsfuncties:</TableCell>
-                                      <TableCell className={styles.description}>
-                                        {gemma.bedrijfsfuncties.join(", ")}
-                                      </TableCell>
-                                    </TableRow>
-                                  )}
-
-                                  {gemma?.bedrijfsservices && (
-                                    <TableRow className={styles.tableRow}>
-                                      <TableCell className={styles.title}>Bedrijfsservices:</TableCell>
-                                      <TableCell className={styles.description}>
-                                        {gemma.bedrijfsservices.join(", ")}
-                                      </TableCell>
-                                    </TableRow>
-                                  )}
-
-                                  {gemma?.model && (
-                                    <TableRow className={styles.tableRow}>
-                                      <TableCell className={styles.title}>Model:</TableCell>
-                                      <TableCell className={styles.description}>{gemma.model}</TableCell>
-                                    </TableRow>
-                                  )}
-
-                                  {gemma?.referentiecomponenten?.length > 0 && (
-                                    <TableRow className={styles.tableRow}>
-                                      <TableCell className={styles.title}>Referentie componenten:</TableCell>
-                                      <TableCell className={styles.description}>
-                                        {gemma.referentiecomponenten.join(", ")}
-                                      </TableCell>
-                                    </TableRow>
-                                  )}
-
-                                  {_getPublication.data?.data?.embedded?.nl?.upl?.length > 0 && (
-                                    <TableRow className={styles.tableRow}>
-                                      <TableCell className={styles.title}>{t("Products")}</TableCell>
-                                      <TableCell>
-                                        {_getPublication.data?.data?.embedded?.nl?.upl.map(
-                                          (product: string, idx: number) => (
-                                            <span key={idx}>
-                                              <Link
-                                                target="_new"
-                                                href="http://standaarden.overheid.nl/owms/terms/AangifteVertrekBuitenland"
-                                              >
-                                                <Icon>
-                                                  <IconExternalLink />
-                                                </Icon>
-                                                {product},{" "}
-                                              </Link>
-                                            </span>
-                                          ),
-                                        )}
-                                      </TableCell>
-                                    </TableRow>
-                                  )}
-                                </TableBody>
-                              </Table>
-                            </HorizontalOverflowWrapper>
-                          }
-                          primaryButton={{
-                            label: t("Close"),
-                            icon: <FontAwesomeIcon icon={faArrowLeft} />,
-                            handleClick: () => ({}),
-                          }}
-                          layoutClassName={styles.popup}
-                        />
-                      </div>
-                    )}
-                  </>
+                {_getPublication.data.category && (
+                  <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Category">
+                    <FontAwesomeIcon icon={faList} />
+                    {_.upperFirst(_getPublication.data.category)}
+                  </DataBadge>
+                )}
+                {_getPublication.data.themes &&
+                  _getPublication.data.themes.map((theme: any, idx: number) => (
+                    <DataBadge key={idx} data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Theme">
+                      <FontAwesomeIcon icon={faBrush} />
+                      {_.upperFirst(theme)}
+                    </DataBadge>
+                  ))}
+                {_getPublication.data.license && (
+                  <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content="Licentie">
+                    <FontAwesomeIcon icon={faScroll} />
+                    {_getPublication.data.license}
+                  </DataBadge>
+                )}
+                {_getPublication.data.published && (
+                  <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content={t("Published")}>
+                    <FontAwesomeIcon icon={faClock} />
+                    {translateDate("nl", _getPublication.data.published)}
+                  </DataBadge>
+                )}
+                {_getPublication.data.modified && (
+                  <DataBadge data-tooltip-id={TOOLTIP_ID} data-tooltip-content={t("Modified")}>
+                    <FontAwesomeIcon icon={faClock} />
+                    {translateDate("nl", _getPublication.data.modified)}
+                  </DataBadge>
                 )}
-                {_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating &&
-                  _getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating !== 0 && (
-                    <Button
-                      tabIndex={-1}
-                      className={clsx(
-                        styles[
-                          _.camelCase(
-                            t(
-                              `${getCommongroundRating(
-                                _getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? 0,
-                              )} ratingButton`,
-                            ),
-                          )
-                        ],
-                        styles.commongroundRating,
-                      )}
-                      onClick={(e) => {
-                        e.preventDefault();
-                      }}
-                      data-tooltip-id={TOOLTIP_ID}
-                      data-tooltip-content={`${t("This component has a rating of")} ${t(
-                        getCommongroundRating(
-                          _getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? 0,
-                        ),
-                      )}`}
-                    >
-                      <Icon>
-                        {getCommongroundImage(
-                          _getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? 0,
-                        )}
-                      </Icon>
-                      {t("Common Ground rating")}
-                    </Button>
-                  )}
               </div>
             </div>
           </div>
 
           <div className={styles.cardsHeaderContainer}>
-            <Heading3 className={styles.cardsHeading}>MetaData</Heading3>
+            <Heading3 className={styles.cardsHeading}>{t("Catalogi")}</Heading3>
+            <Heading3 className={styles.cardsHeading}>{t("MetaData")}</Heading3>
             <Heading3 className={styles.cardsHeading}>{t("Organization")}</Heading3>
           </div>
 
           <div className={styles.cardsContainer}>
-          {_getPublication.data?.metaData &&
-            <Table>
-              <TableBody>
-                {_getPublication.data.metaData?.title &&
+            {_getPublication.data.catalogi && (
+              <Table>
+                <TableBody>
                   <TableRow>
-                    <TableCell><b>{t("Title")}</b></TableCell>
-                    <TableCell>{_getPublication.data.metaData.title ?? t("No title known")}</TableCell>
+                    <TableCell>
+                      <b>{t("Title")}</b>
+                    </TableCell>
+                    <TableCell>{_getPublication.data.catalogi.title ?? t("No title known")}</TableCell>
                   </TableRow>
-                }
-                {_getPublication.data.metaData?.version &&
                   <TableRow>
-                    <TableCell><b>{t("Version")}</b></TableCell>
-                    <TableCell>{_getPublication.data.metaData.version ?? t("No version known") }</TableCell>
+                    <TableCell>
+                      <b>{t("Summary")}</b>
+                    </TableCell>
+                    <TableCell>{_getPublication.data.catalogi.summary || t("No summary known")}</TableCell>
                   </TableRow>
-                }
-                {_getPublication.data.metaData?.description &&
                   <TableRow>
-                    <TableCell><b>{t("Description")}</b></TableCell>
-                    <TableCell>{_getPublication.data.metaData.description ?? t("No description known") }</TableCell>
+                    <TableCell>
+                      <b>{t("Description")}</b>
+                    </TableCell>
+                    <TableCell>{_getPublication.data.catalogi.description || t("No description known")}</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            )}
+            {!_getPublication.data.catalogi && (
+              <span className={styles.noOrganizationCardAvailable}>{t("No catalogus found")}</span>
+            )}
+
+            {_getPublication.data.catalogi.metadata[0]?.id && (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHeaderCell>{t("Title")}</TableHeaderCell>
+                    <TableHeaderCell>{t("Version")}</TableHeaderCell>
+                    <TableHeaderCell>{t("Description")}</TableHeaderCell>
                   </TableRow>
-                }
-              </TableBody>
-            </Table>
-          }
+                </TableHeader>
+
+                <TableBody>
+                  {_getPublication.data.catalogi.metadata.map((data: any, idx: number) => (
+                    <TableRow key={`${data.id}-${idx}`}>
+                      <TableCell>{data.title || t("No title known")}</TableCell>
+                      <TableCell>{data.version || t("No version known")}</TableCell>
+                      <TableCell>{data.description || t("No description known")}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            )}
+            {!_getPublication.data.catalogi.metadata[0]?.id && (
+              <span className={styles.noOrganizationCardAvailable}>{t("No metadata found")}</span>
+            )}
 
             {organisation && (
               <OrganizationCard
@@ -463,268 +227,27 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                 gitLab={organisation.gitlab}
                 type={"Organization"}
                 layoutClassName={styles.organizationCardContainer}
-                contactInfo={publicationData?.contactPoint}
+                contactInfo={organisation.contactInformation}
               />
             )}
-            {!_getPublication?.data?.data?.organization && (
-              <span className={styles.noOrganizationCardAvailable}>{t("No organization found")}</span>
-            )}
-
+            {!organisation && <span className={styles.noOrganizationCardAvailable}>{t("No organization found")}</span>}
           </div>
-          {(_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open ||
-            getConfigComponents.data?.results?.length > 0 ||
-            _getPublication.data?.data?.embedded?.supportedBy?.length > 0 ||
-            _getPublication.data?.data?.embedded?.usedBy?.length > 0 ||
-            getConfigComponents.data?.results?.length > 0 ||
-            _getPublication.data?.data?.attachments ||
-            _getPublication.data?.data?.data) && (
+
+          {_getPublication?.data?.attachments[0]?.title && (
             <div id="Tabs" ref={tabsRef}>
               <Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)}>
                 <TabList>
-                  {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open && (
-                    <Tab>
-                      <span>Componenten & Afhankelijkheden</span>
-                      <BadgeCounter className={styles.badgeLayout}>
-                        {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open.length ?? 0}
-                      </BadgeCounter>
-                    </Tab>
-                  )}
-                  {_getPublication.data?.data?.embedded?.supportedBy && (
-                    <Tab>
-                      <span>{t("Suppliers")}</span>
-                      <BadgeCounter className={styles.badgeLayout}>
-                        {_getPublication.data?.data?.embedded?.supportedBy?.length ?? 0}
-                      </BadgeCounter>
-                    </Tab>
-                  )}
-                  {_getPublication.data?.data?.embedded?.usedBy && (
-                    <Tab>
-                      <span>{t("Reuse")}</span>
-                      <BadgeCounter className={styles.badgeLayout}>
-                        {_getPublication.data?.data?.embedded?.usedBy?.length ?? 0}
-                      </BadgeCounter>
-                    </Tab>
-                  )}
-                  {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open && (
-                    <Tab>
-                      <span>{t("Schema's")}</span>
-                      <BadgeCounter className={styles.badgeLayout}>
-                        {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open.length ?? 0}
-                      </BadgeCounter>
-                    </Tab>
-                  )}
-                  {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open && (
-                    <Tab>
-                      <span>{t("Processes")}</span>
-                      <BadgeCounter className={styles.badgeLayout}>
-                        {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open.length ?? 0}
-                      </BadgeCounter>
-                    </Tab>
-                  )}
-                  {getConfigComponents.data?.results?.length > 0 && (
-                    <Tab>
-                      <span>{t("Configurations")}</span>
-                      <BadgeCounter className={styles.badgeLayout}>
-                        {getConfigComponents.data?.results?.length ?? 0}
-                      </BadgeCounter>
-                    </Tab>
-                  )}
-                  {_getPublication.data?.attachments?.length > 0 && (
+                  {_getPublication?.data?.attachments?.length > 0 && (
                     <Tab>
                       <span>{t("Attachments")}</span>
                       <BadgeCounter className={styles.badgeLayout}>
-                        {_getPublication.data?.attachments?.length ?? 0}
+                        {_getPublication?.data?.attachments?.length ?? 0}
                       </BadgeCounter>
                     </Tab>
                   )}
-                  {_getPublication.data?.data?.data && (
-                    <Tab>
-                      <span>{t("Extensions")}</span>
-                    </Tab>
-                  )}
                 </TabList>
-                {_getPublication.data?.data?.embedded?.dependsOn && (
-                  <TabPanel>
-                    <div className={styles.components}>
-                      {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open && (
-                        <DisplaySwitch
-                          buttons={displaySwitchButtons}
-                          layoutClassName={styles.dependenciesDisplaySwitchButtons}
-                        />
-                      )}
-
-                      <DependenciesTemplate
-                        type={resultDisplayLayout.dependenciesDisplayLayout}
-                        components={_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open ?? []}
-                        mainComponent={{
-                          id: publicationId,
-                          name: _getPublication.data?.data?.name,
-                          layer: _getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.layerType,
-                        }}
-                      />
-                    </div>
-                  </TabPanel>
-                )}
-                {_getPublication.data?.data?.embedded?.supportedBy?.length > 0 && (
-                  <TabPanel>
-                    <Table className={styles.table}>
-                      <TableHeader className={styles.tableHeader}>
-                        <TableRow>
-                          <TableHeaderCell>{t("Name")}</TableHeaderCell>
-                          {/* This table row should be visible when the organization has a maintenanceType. feature will come in the future. */}
-                          {/* <TableHeaderCell>{t("Type of support")}</TableHeaderCell>  */}
-                          <TableHeaderCell>{t("Email")}</TableHeaderCell>
-                          <TableHeaderCell>{t("Phone number")}</TableHeaderCell>
-                          <TableHeaderCell>{t("Website")}</TableHeaderCell>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody className={styles.tableBody}>
-                        {_getPublication.data?.data?.embedded?.supportedBy?.map((organization: any) => (
-                          <TableRow className={styles.tableRow} key={organization?._self.id}>
-                            <TableCell>{organization?.name}</TableCell>
-                            {/* This table row should be visible when the organization has a maintenanceType. feature will come in the future. */}
-                            {/* <TableCell>
-                            {organization?.maintenanceType && organization?.maintenanceType !== ""
-                              ? organization?.maintenanceType
-                              : t("Unavailable")}
-                          </TableCell> */}
 
-                            <TableCell>
-                              {organization?.email && organization?.email !== "" ? (
-                                <Link
-                                  onClick={(e: any) => {
-                                    e.preventDefault(), navigate(`mailto:${organization?.email}`);
-                                  }}
-                                  href={`mailto:${organization?.email}`}
-                                  aria-label={`${t("Email")}, ${organization?.email}`}
-                                >
-                                  {organization?.email}
-                                </Link>
-                              ) : (
-                                t("Unavailable")
-                              )}
-                            </TableCell>
-                            <TableCell>
-                              {organization?.phone && organization?.phone !== "" ? (
-                                <Link
-                                  onClick={(e: any) => {
-                                    e.preventDefault(), navigate(`tel:${organization?.phone}`);
-                                  }}
-                                  href={`tel:${organization?.phone}`}
-                                  aria-label={`${t("Phone number")}, ${organization?.phone}`}
-                                >
-                                  {organization?.phone}
-                                </Link>
-                              ) : (
-                                t("Unavailable")
-                              )}
-                            </TableCell>
-                            <TableCell>
-                              {organization?.website && organization?.website !== "" ? (
-                                <Link
-                                  onClick={(e: any) => {
-                                    e.preventDefault(), open(organization?.website ?? "");
-                                  }}
-                                  href={organization?.website ?? ""}
-                                  aria-label={
-                                    organization?.website
-                                      ? `${t("Website")}, ${organization?.website
-                                          .replace("https://", "www.")
-                                          .replace("/", "")}, ${t("Opens a new window")}`
-                                      : ""
-                                  }
-                                >
-                                  {organization?.website.replace("https://", "www.").replace("/", "")}
-                                </Link>
-                              ) : (
-                                t("Unavailable")
-                              )}
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </TabPanel>
-                )}
-                {_getPublication.data?.data?.embedded?.usedBy?.length > 0 && (
-                  <TabPanel>
-                    <div className={styles.organizations}>
-                      {_getPublication.data?.data?.embedded?.usedBy?.map((organization: any) => (
-                        <OrganizationCard
-                          key={organization._self.id}
-                          title={{
-                            label: organization?.name,
-                            href: `/organizations/${organization._self.id}`,
-                          }}
-                          description={organization?.description}
-                          website={organization?.website}
-                          logo={organization?.logo}
-                          components={{
-                            owned: organization?.owns?.length.toString() ?? "0",
-                            supported: organization?.supports?.length.toString() ?? "0",
-                            used: organization?.uses?.length.toString() ?? "0",
-                          }}
-                          gitHub={organization?.github}
-                          gitLab={organization?.gitlab}
-                          type={organization?.type}
-                          layoutClassName={styles.organizationCardContainer}
-                        />
-                      ))}
-                    </div>
-                  </TabPanel>
-                )}
-                {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open && (
-                  <TabPanel>
-                    <ComponentCardsAccordionTemplate
-                      components={_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open}
-                    />
-                  </TabPanel>
-                )}
-                {_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open && (
-                  <TabPanel>
-                    <ComponentCardsAccordionTemplate
-                      components={_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open}
-                    />
-                  </TabPanel>
-                )}
-                {getConfigComponents.data?.results?.length > 0 && (
-                  <TabPanel>
-                    <div className={styles.organizations}>
-                      {getConfigComponents.data?.results?.map((component: any) => {
-                        return (
-                          <ComponentCard
-                            key={component._self?.id}
-                            title={{
-                              label: component.name,
-                              href: `/components/${component.id ?? component._self.id}`,
-                            }}
-                            description={component.embedded?.description?.shortDescription}
-                            layer={component.embedded?.nl?.embedded?.commonground?.layerType ?? "Unknown"}
-                            categories={component.categories}
-                            tags={{
-                              rating: {
-                                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: {
-                                name: component.embedded?.url?.embedded?.organisation?.name,
-                                website: component.embedded?.url?.embedded?.organisation?.website,
-                              },
-                              licence: component.embedded?.legal?.license,
-                              githubLink: component.embedded?.url?.url,
-                            }}
-                          />
-                        );
-                      })}
-                    </div>
-                  </TabPanel>
-                )}
-                {_getPublication.data?.attachments?.length > 0 && (
+                {_getPublication?.data?.attachments?.length > 0 && (
                   <TabPanel>
                     <HorizontalOverflowWrapper
                       ariaLabels={{
@@ -742,23 +265,24 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                             <TableHeaderCell>{t("Published")}</TableHeaderCell>
                             <TableHeaderCell>{t("Modified")}</TableHeaderCell>
                             <TableHeaderCell>{t("Access url")}</TableHeaderCell>
+                            <TableHeaderCell>{t("Download url")}</TableHeaderCell>
                           </TableRow>
                         </TableHeader>
                         <TableBody className={styles.tableBody}>
                           {_getPublication?.data?.attachments.map((attachment: any) => {
-                            return attachment.published === "false" ? (
+                            return attachment?.published === "false" || !attachment.published ? (
                               <></>
                             ) : (
                               <TableRow className={styles.tableRow}>
-                                <TableCell className={styles.title}>{attachment.title}</TableCell>
+                                <TableCell className={styles.title}>{attachment?.title}</TableCell>
                                 <TableCell className={styles.description}>
                                   <div
-                                    data-tooltip-id={attachment.description.length > 100 && TOOLTIP_ID}
-                                    data-tooltip-content={attachment.description}
+                                    data-tooltip-id={attachment?.description?.length > 100 && TOOLTIP_ID}
+                                    data-tooltip-content={attachment?.description}
                                   >
-                                    {attachment.description.length > 100
-                                      ? `${attachment.description.substring(0, 100)}...`
-                                      : attachment.description}
+                                    {attachment?.description.length > 100
+                                      ? `${attachment?.description.substring(0, 100)}...`
+                                      : attachment?.description}
                                   </div>
                                 </TableCell>
                                 <TableCell>
@@ -768,119 +292,41 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
                                     data-tooltip-content={t("License")}
                                   >
                                     <FontAwesomeIcon icon={faScroll} />
-                                    {attachment.license}
+                                    {attachment?.license}
                                   </DataBadge>
                                 </TableCell>
-                                <TableCell>{attachment.type}</TableCell>
+                                <TableCell>{attachment?.type}</TableCell>
                                 <TableCell>
-                                  <span className={styles.date}>{attachment.published}</span>
+                                  <span className={styles.date}>{translateDate("nl", attachment?.published)}</span>
                                 </TableCell>
                                 <TableCell>
-                                  <span className={styles.date}>{attachment.modified}</span>
+                                  <span className={styles.date}>{translateDate("nl", attachment?.modified)}</span>
                                 </TableCell>
                                 <TableCell>
                                   <Link
                                     onClick={(e) => {
-                                      e.preventDefault(), open(attachment.downloadURL);
+                                      e.preventDefault(), open(attachment?.accessURL);
                                     }}
-                                    href={`/publications/${_getPublication.data?.data?.id}`}
+                                    href={`/publications/${_getPublication.data.id}`}
                                     className={styles.tagWidth}
                                   >
                                     {t("Access url")}
                                   </Link>
                                 </TableCell>
+                                <TableCell>
+                                  <Link
+                                    onClick={(e) => {
+                                      e.preventDefault(), open(attachment?.downloadURL);
+                                    }}
+                                    href={`/publications/${_getPublication.data.id}`}
+                                    className={styles.tagWidth}
+                                  >
+                                    {t("Download url")}
+                                  </Link>
+                                </TableCell>
                               </TableRow>
                             );
                           })}
-                          <TableRow className={styles.tableRow}>
-                            <TableCell className={styles.title}>Gegevenscatalogus</TableCell>
-                            <TableCell className={styles.description}>
-                              <div
-                                data-tooltip-id={TOOLTIP_ID}
-                                data-tooltip-content={"-"}
-                              >
-                                -
-                              </div>
-                            </TableCell>
-                            <TableCell>
-                              <DataBadge
-                                className={styles.tagWidth}
-                                data-tooltip-id={TOOLTIP_ID}
-                                data-tooltip-content={t("License")}
-                              >
-                                <FontAwesomeIcon icon={faScroll} />
-                                {_getPublication.data?.license}
-                              </DataBadge>
-                            </TableCell>
-                            <TableCell>-</TableCell>
-                            <TableCell>
-                              <span className={styles.date}>{_getPublication.data?.published}</span>
-                            </TableCell>
-                            <TableCell>
-                              <span className={styles.date}>{_getPublication.data?.modified}</span>
-                            </TableCell>
-                            <TableCell>
-                              <Link
-                                onClick={(e) => {
-                                  e.preventDefault(), open(_getPublication.data?.portal);
-                                }}
-                                href={`/publications/${_getPublication.data?.id}`}
-                                className={styles.tagWidth}
-                              >
-                                {t("Access url")}
-                              </Link>
-                            </TableCell>
-                          </TableRow>
-                        </TableBody>
-                      </Table>
-                    </HorizontalOverflowWrapper>
-                  </TabPanel>
-                )}
-                {publicationData && (
-                  <TabPanel>
-                    <HorizontalOverflowWrapper
-                      ariaLabels={{
-                        scrollLeftButton: t("Left scroll button"),
-                        scrollRightButton: t("Right scroll button"),
-                      }}
-                    >
-                      <Table className={styles.table}>
-                        <TableBody className={styles.tableBody}>
-
-                          {publicationData?.qualifiedAttribution && (
-                            <TableRow className={styles.tableRow}>
-                              <TableCell className={styles.title}><b>Toeschrijving:</b></TableCell>
-                              <TableCell>
-                                <div className={styles.publicationDataContact}>
-                                  <span>{`${t("Name")}: ${publicationData?.contactPoint?.name}`}</span>
-                                  <span>{`${t("Email")}: ${publicationData?.contactPoint?.email}`}</span>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          )}
-
-                          {publicationData?.bedrijfsservices && (
-                            <TableRow className={styles.tableRow}>
-                              <TableCell className={styles.title}><b>Bedrijfsservices:</b></TableCell>
-                              <TableCell className={styles.description}>
-                                {publicationData.bedrijfsservices.join(", ")}
-                              </TableCell>
-                            </TableRow>
-                          )}
-
-                          {publicationData?.model && (
-                            <TableRow className={styles.tableRow}>
-                              <TableCell className={styles.title}><b>Model:</b></TableCell>
-                              <TableCell className={styles.description}>{publicationData.model}</TableCell>
-                            </TableRow>
-                          )}
-
-                          {publicationData?.spatial > 0 && (
-                            <TableRow className={styles.tableRow}>
-                              <TableCell className={styles.title}><b>Referentie componenten:</b></TableCell>
-                              <TableCell className={styles.description}>{publicationData.spatial.join(", ")}</TableCell>
-                            </TableRow>
-                          )}
                         </TableBody>
                       </Table>
                     </HorizontalOverflowWrapper>
diff --git a/pwa/src/templates/templateParts/download/DownloadTemplate.tsx b/pwa/src/templates/templateParts/download/DownloadTemplate.tsx
index 1ea29db0d..5c821cb1e 100644
--- a/pwa/src/templates/templateParts/download/DownloadTemplate.tsx
+++ b/pwa/src/templates/templateParts/download/DownloadTemplate.tsx
@@ -49,10 +49,10 @@ export const DownloadTemplate: React.FC<DownloadTemplateProps> = ({ downloads, b
   };
 
   const convertedDownloads: TDownloadableItem[] = downloads.map((download: any) => ({
-    label: download.naam,
-    size: getSize(download.grootte),
+    label: download.naam ?? download.label,
+    size: getSize(download.grootte ?? download.size),
     type: download.type,
-    downloadLink: download.url,
+    downloadLink: download.url ?? download.downloadLink,
   }));
 
   const getIconFromType = (type: any) => {
diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts
index f73af80ea..2d5c42f59 100644
--- a/pwa/src/translations/en.ts
+++ b/pwa/src/translations/en.ts
@@ -84,6 +84,7 @@ export const en = {
   Reference: "Reference",
   Pagination: "Pagination",
   Extensions: "Extensions",
+  Summary: "Summary",
   "Open Catalogs": "Open Catalogs",
   "Reusable components within the government": "Reusable components within the government",
   "Information Models": "Information Models",
@@ -95,10 +96,12 @@ export const en = {
   "View all components": "View all components",
   "Show metadata": "Show metadata",
   "Access url": "Access url",
+  "Download url": "Download url",
   "Hide metadata": "Hide metadata",
   "No title known": "No title known",
   "No description known": "No description known",
   "No version known": "No version known",
+  "No summary known": "No summary known",
   "One central place for reuse of information technology within the government":
     "One central place for reuse of information technology within the government",
   "No components found with active filters": "No components found with active filters",
@@ -119,6 +122,7 @@ export const en = {
   "Score calculation": "Score calculation",
   "There is no organization available": "There is no organization available",
   "No organization found": "No organization found",
+  "No metadata found": "No metadata found",
   "There is no description available": "There is no description available",
   "My catalogi": "My Catalogi",
   "Software products": "Software products",
diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts
index 5370d8313..4dd9da58f 100644
--- a/pwa/src/translations/nl.ts
+++ b/pwa/src/translations/nl.ts
@@ -87,6 +87,7 @@ export const nl = {
   Reference: "Referentie",
   Pagination: "Paginering",
   Extensions: "Extensies",
+  Summary: "Samenvatting",
   "Open Catalogs": "OpenCatalogi",
   "Reusable components within the government": "Herbruikbare componenten binnen de overheid",
   "Information Models": "Informatiemodellen",
@@ -97,9 +98,11 @@ export const nl = {
   "Show metadata": "Toon metadata",
   "Hide metadata": "Verberg metadata",
   "No title known": "Geen titel bekend",
-  "No description known": "Geen description bekend",
-  "No version known": "Geen version bekend",
+  "No description known": "Geen beschrijving bekend",
+  "No version known": "Geen versie bekend",
+  "No summary known": "Geen samenvatting bekend",
   "Access url": "Toegangsurl",
+  "Download url": "Downloadurl",
   "One central place for reuse of information technology within the government":
     "Eén centrale plek voor hergebruik van informatietechnologie binnen de overheid",
   "No components found with active filters": "Geen componenten gevonden met actieve filters",
@@ -120,6 +123,7 @@ export const nl = {
   "Score calculation": "Score opbouw",
   "There is no organization available": "Er is geen organisatie beschikbaar",
   "No organization found": "Geen organisatie gevonden",
+  "No metadata found": "Geen metadata gevonden",
   "There is no description available": "Er is geen omschrijving beschikbaar",
   "My catalogi": "Mijn Catalogi",
   "Software products": "Software producten",
diff --git a/pwa/static/.env.development b/pwa/static/.env.development
index a749609ff..2e556243d 100644
--- a/pwa/static/.env.development
+++ b/pwa/static/.env.development
@@ -6,6 +6,7 @@ GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX=false
 
 # Backend-config
 GATSBY_API_URL=https://api.opencatalogi.nl/api
+GATSBY_NEXTCLOUD_API_URL=http://nextcloud.local/index.php/apps/opencatalogi/api
 GATSBY_BASE_URL=https://api.opencatalogi.nl
 
 # Config
diff --git a/pwa/static/.env.production b/pwa/static/.env.production
index 54402a1aa..4eecde473 100644
--- a/pwa/static/.env.production
+++ b/pwa/static/.env.production
@@ -5,6 +5,7 @@ GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX=false
 # Backend-config
 GATSBY_ME_URL=https://api.opencatalogi.nl/api/users/me
 GATSBY_API_URL=https://api.opencatalogi.nl/api
+GATSBY_NEXTCLOUD_API_URL=https://directory.opencatalogi.nl/index.php/apps/opencatalogi/api
 GATSBY_ADMIN_URL=https://api.opencatalogi.nl/admin
 GATSBY_BASE_URL=https://api.opencatalogi.nl
 GATSBY_FRONTEND_URL=https://api.opencatalogi.nl
@@ -13,6 +14,7 @@ GATSBY_ADMIN_DASHBOARD_URL=https://admin.opencatalogi.nl
 
 # Config
 GATSBY_NL_DESIGN_THEME_CLASSNAME=rotterdam-theme
+
 # GATSBY_GITHUB_ORGANIZATION_URL="https://github.com/ConductionNL"
 GATSBY_FAVICON_URL="https://dev.opencatalogi.nl/static/logo_OpenCatalogi-8b1b0a001c3f37dae4d3f69b5964ec72.png"
 GATSBY_PAGE_TITLE=