diff --git a/homepage/src/components/cards.jsx b/homepage/src/components/cards.jsx
index dad06bd9..12122913 100644
--- a/homepage/src/components/cards.jsx
+++ b/homepage/src/components/cards.jsx
@@ -9,7 +9,7 @@ const Cards = ({ id, title, cards }) => {
         </div>
         <div className="row">
           {cards.map((card) => (
-            <Card key={card.data.title} card={card} />
+            <Card key={card.data.id} card={card} />
           ))}
         </div>
       </div>
@@ -18,7 +18,7 @@ const Cards = ({ id, title, cards }) => {
 };
 
 const Card = ({ card }) => (
-  <div className="col-md-4 mb-3">
+  <div className="col-md-4 mb-3" id={card.data.id}>
     <div className="section-main">
       <h3>{card.data.title}</h3>
       <div>
diff --git a/homepage/src/pages/cards.jsx b/homepage/src/pages/cards.jsx
index 50d12014..73b97c70 100644
--- a/homepage/src/pages/cards.jsx
+++ b/homepage/src/pages/cards.jsx
@@ -4,6 +4,7 @@ import { fetchPage } from '../lib/fetchPage';
 import { fetchCards } from '../lib/fetchCards';
 import { getNavigationList } from '../lib/getNavigationList';
 import { componentMapper } from '../lib/componentMapper';
+import { titleToAnchorId } from '../lib/titleToAnchorId';
 
 /**
  *
@@ -20,6 +21,7 @@ export const getStaticProps = async ({ locale }) => {
     image = !image.startsWith('/') ? `/${image}` : image;
 
     data.image = image;
+    data.id = data.id || titleToAnchorId(data.title);
 
     return {
       data,