diff --git a/react-app/public/content/Contact_page.rtf b/react-app/public/content/Contact_page.rtf
new file mode 100644
index 0000000..6267785
--- /dev/null
+++ b/react-app/public/content/Contact_page.rtf
@@ -0,0 +1,30 @@
+{\rtf1\ansi\ansicpg1252\cocoartf2709
+\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fswiss\fcharset0 Helvetica-Oblique;}
+{\colortbl;\red255\green255\blue255;\red25\green28\blue31;\red56\green90\blue161;}
+{\*\expandedcolortbl;;\cssrgb\c12941\c14510\c16078;\cssrgb\c27843\c43922\c69412;}
+\paperw11900\paperh16840\margl1440\margr1440\vieww12740\viewh10840\viewkind0
+\deftab720
+\pard\pardeftab720\partightenfactor0
+
+\f0\fs80 \cf2 \expnd0\expndtw0\kerning0
+#Contact form\
+\pard\pardeftab720\partightenfactor0
+
+\fs32 \cf2 Please fill out this form if you need to contact us at the 
+\f1\i Swedish Precision Medicine Portal. 
+\f0\i0 Please provide your contact information and we should get back to you within a week\'92s time. \
+\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs56 \cf2 ##Personal data policy\
+\pard\pardeftab720\sa320\partightenfactor0
+
+\fs32 \cf2 The personal data you provide in this form, your name and email address, will be used to process your suggestion of added resource to the\uc0\u8239 \cf3 Swedish Precision Medicine Portal. \cf2 It is a service run by the SciLifeLab Data Centre on assignment from the \'85 It serves to address\'85 \
+The information you provide will be processed for research purposes, i.e. using the lawful basis of public interest and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016, the General Data Protection Regulation.\
+The following parties will have access to processing your personal data: SciLifeLab Data Centre, Uppsala University. Your personal data will be deleted when no longer needed, or when stipulated by the archival rules for the university as a government authority. If you want to update or remove your personal data please contact\uc0\u8239 the controller SciLifeLab Data Centre at Uppsala University using datacentre@scilifelab.se.\
+\pard\pardeftab720\partightenfactor0
+
+\fs80 \cf2 \
+\pard\pardeftab720\sa160\partightenfactor0
+\cf2 \
+}
\ No newline at end of file
diff --git a/react-app/public/content/Index_page.rtf b/react-app/public/content/Index_page.rtf
new file mode 100644
index 0000000..90757d3
--- /dev/null
+++ b/react-app/public/content/Index_page.rtf
@@ -0,0 +1,48 @@
+{\rtf1\ansi\ansicpg1252\cocoartf2709
+\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
+{\colortbl;\red255\green255\blue255;\red25\green28\blue31;}
+{\*\expandedcolortbl;;\cssrgb\c12941\c14510\c16078;}
+\paperw11900\paperh16840\margl1440\margr1440\vieww16820\viewh11860\viewkind0
+\deftab720
+\pard\pardeftab720\sa80\partightenfactor0
+
+\f0\fs48 \cf2 \expnd0\expndtw0\kerning0
+Welcome to the newly launched Swedish Precision Medicine Portal\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 This portal aims to offer a data catalogue where you can search and gain access to Swedish Precision Medicine datasets. We are currently conducting a pilot project with BrainChild (link) to fill the important need of sharing data within childhood cancer to researchers and clinicians. Stay tuned!\
+
+\fs48 \
+\pard\pardeftab720\sa80\partightenfactor0
+\cf2 Find your repository\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Links to area-specific data repositories and tools that could be used in your Precision Medicine research \
+
+\fs48 \
+\pard\pardeftab720\sa80\partightenfactor0
+\cf2 Latest news\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Latest news in the Precision Medicine field and new functionalities on the platform 
+\fs48 \
+\
+\pard\pardeftab720\sa80\partightenfactor0
+\cf2 Upcoming events\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Find bioinformatics, GDPR and other types of training, as well as Precision Medicine events in Europe\
+\
+\pard\pardeftab720\sa80\partightenfactor0
+
+\fs48 \cf2 Data platform\
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Our Precision Medicine data catalogue is still under development \
+\
+\pard\pardeftab720\sa80\partightenfactor0
+
+\fs48 \cf2 Trusted Research Environment \
+\pard\pardeftab720\sa160\partightenfactor0
+
+\fs28 \cf2 Our Precision Medicine TRE is still under development. Our aim is to offer a centralised place for storage, analysis and sharing.}
\ No newline at end of file
diff --git a/react-app/public/content/Privacy_page.md b/react-app/public/content/Privacy_page.md
new file mode 100644
index 0000000..4ac6c36
--- /dev/null
+++ b/react-app/public/content/Privacy_page.md
@@ -0,0 +1,18 @@
+#Privacy Policy
+SciLifeLab operates the Swedish Precision Medicine Portal, which provides the Service.
+This page is used to inform website visitors regarding our personal data processing policy. If you choose to use our Service, then your personal data will be processed in accordance with this policy.
+The personal information that we collect is used for providing and improving the Service. We will not use or share your information with anyone except as described in this policy. All collected personal information will be processed for research purposes, i.e. using the lawful basis of public interest and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016, the General Data Protection Regulation.
+##Visitor statistics
+We want to inform you that whenever you visit our Service, we collect the information that your browser sends to us, which is called ’log data’. Log data may include: the website that you visited us from, the parts of our Service you visit, the date and duration of your visit, your anonymised IP address, information from the device that you used during your visit (device type, operating system, screen resolution, language, country you are located in, and web browser type), and more. We process this usage data in Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab) for statistical purposes, to improve our Service, and to recognise and stop any misuse.
+You can opt out of your statistics being collected below:
+The tracking opt-out feature requires cookies to be enabled.
+
+##Forms
+Our Service contains a number of forms that visitors can use to contact us or send us suggestions. The website visitors may choose to provide their personal information such as their name and e-mail address through these forms.
+The following parties will have access to processing the personal data provided through the forms; SciLifeLab Data Centre, Uppsala University, Kungliga Tekniska högskolan (KTH). Your personal data will be deleted when no longer needed, or when stipulated by the archival rules for the university as a government authority. If you want to update or remove your personal data, please contact the controller SciLifeLab Data Centre at Uppsala University using x@scilifelab.se
+##Links to Other Sites
+Our Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by us. Therefore, we strongly advise you to review the privacy policy of these websites. We have no control over, and assume no responsibility for, the content, privacy policies, or practices of any third-party sites or services.
+##Changes to This Privacy Policy
+We may update our privacy policy from time to time. Thus, we advise you to review this page periodically for any changes. We will notify you of any changes by posting the new privacy policy on this page. These changes posted on this page are effective immediately.
+##Contact Us
+If you have any questions or suggestions about our privacy policy, do not hesitate to contact us (link to contact page).
diff --git a/react-app/src/components/AccordionComponent.tsx b/react-app/src/components/AccordionComponent.tsx
new file mode 100644
index 0000000..e4a1575
--- /dev/null
+++ b/react-app/src/components/AccordionComponent.tsx
@@ -0,0 +1,36 @@
+import { ReactElement } from 'react'
+
+export default function AccordionComponent(): ReactElement {
+
+    return (
+        <>
+            <div className="collapse collapse-arrow bg-base-200">
+                <input type="radio" name="my-accordion-2" checked={true} /> 
+                <div className="collapse-title text-xl font-medium">
+                    Click to open this one and close others
+                </div>
+                <div className="collapse-content"> 
+                    <p>hello</p>
+                </div>
+            </div>
+            <div className="collapse collapse-arrow bg-base-200">
+                <input type="radio" name="my-accordion-2" checked={true} /> 
+                <div className="collapse-title text-xl font-medium">
+                    Click to open this one and close others
+                </div>
+                <div className="collapse-content"> 
+                    <p>hello</p>
+                </div>
+            </div>
+            <div className="collapse collapse-arrow bg-base-200">
+                <input type="radio" name="my-accordion-2" checked={true} /> 
+                <div className="collapse-title text-xl font-medium">
+                    Click to open this one and close others
+                </div>
+                <div className="collapse-content"> 
+                    <p>hello</p>
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/react-app/src/components/CardComponent.tsx b/react-app/src/components/CardComponent.tsx
index 498595b..609aa6f 100644
--- a/react-app/src/components/CardComponent.tsx
+++ b/react-app/src/components/CardComponent.tsx
@@ -1,22 +1,29 @@
 import { ReactElement } from "react";
+import { ICardConfig, ICardContent } from "../interfaces/types";
 
-export default function CardComponent(prop: { classes: string, title: string, text: string, button: string, buttonClasses: string }): ReactElement {
+export default function CardComponent(prop: { cardConfig: ICardConfig, cardContent: ICardContent }): ReactElement {
     const title: ReactElement = (
-        <h2 className="text-center text-white text-xl font-semibold">{prop.title}</h2>
+        <h2 className={prop.cardConfig.titleClasses}>{prop.cardContent.title}</h2>
     );
 
+    const image: ReactElement = (
+        <figure><img src={prop.cardContent.imageSrc} alt={prop.cardContent.imageAlt} /></figure>
+    );
+
+    var buttonClasses: string = "card-actions " + prop.cardConfig.buttonPlacement;
     const button: ReactElement = (
-        <div className="card-actions justify-center">
-            <button className={prop.buttonClasses}>{prop.button}</button>
+        <div className={buttonClasses}>
+            <button className={prop.cardConfig.buttonClasses}>{prop.cardContent.buttonText}</button>
         </div>
     );
     
     return (
-        <div className={"card " + prop.classes}>
+        <div className={"card " + prop.cardConfig.cardClasses}>
+            {prop.cardContent.imageSrc && image}
             <div className="card-body">
-                {prop.title && title}
-                <p className="text-center content-end">{prop.text}</p>
-                {prop.button && button}
+                {prop.cardContent.title && title}
+                <p className={prop.cardConfig.textClasses}>{prop.cardContent.text}</p>
+                {prop.cardContent.buttonText && button}
             </div>
         </div>
     );
diff --git a/react-app/src/components/FooterComponent.tsx b/react-app/src/components/FooterComponent.tsx
index 38c5ea2..14e1af3 100644
--- a/react-app/src/components/FooterComponent.tsx
+++ b/react-app/src/components/FooterComponent.tsx
@@ -13,7 +13,7 @@ export default function FooterComponent(): ReactElement {
   };
 
   var linksCol2: { [id: string] : ILink; } = {
-      'l1': { text: 'About us', classes: LINK_CLASSES, link: '/' },
+      'l1': { text: 'About us', classes: LINK_CLASSES, link: '/about' },
       'l2': { text: 'Contact', classes: LINK_CLASSES, link: '/' },
       'l3': { text: 'Open Source Contribution', classes: LINK_CLASSES, link: '/' },
       'l4': { text: 'Privacy Policy', classes: LINK_CLASSES, link: '/privacy' },
diff --git a/react-app/src/components/Routes.tsx b/react-app/src/components/Routes.tsx
index 923d901..3912bc6 100644
--- a/react-app/src/components/Routes.tsx
+++ b/react-app/src/components/Routes.tsx
@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, redirect, RouterProvider } from 'react-router-dom';
 import App from '../App';
 import HomePage from '../pages/HomePage';
 import AboutPage from '../pages/AboutPage';
@@ -8,6 +8,9 @@ import DataPage from '../pages/DataPage';
 import EventsAndNewsPage from '../pages/EventsAndNewsPage';
 import SignInPage from '../pages/SignInPage';
 import PrivacyPage from '../pages/PrivacyPage';
+import AboutProductPage from '../pages/AboutProductPage';
+import AboutFAQPage from '../pages/AboutFAQPage';
+import AboutPartnersPage from '../pages/AboutPartnersPage';
 
 const router = createBrowserRouter([
     {
@@ -21,6 +24,24 @@ const router = createBrowserRouter([
             {
                 path: 'about',
                 element: <AboutPage />,
+                children: [
+                    {
+                        index: true,
+                        loader: async () => redirect('product')
+                    },
+                    {
+                        path: 'product',
+                        element: <AboutProductPage />,
+                    },
+                    {
+                        path: 'faq',
+                        element: <AboutFAQPage />,
+                    },
+                    {
+                        path: 'partners',
+                        element: <AboutPartnersPage />,
+                    },
+                ]
             },
             {
                 path: 'contact',
@@ -48,4 +69,8 @@ const router = createBrowserRouter([
 
 export default function Routes(): ReactElement {
     return <RouterProvider router={router} />;
-}
\ No newline at end of file
+}
+
+function async(): import("react-router-dom").LoaderFunction<any> | undefined {
+    throw new Error('Function not implemented.');
+}
diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts
index 55678fc..409d8b8 100644
--- a/react-app/src/constants.ts
+++ b/react-app/src/constants.ts
@@ -1,11 +1,11 @@
 // reused tailwind classes
-export const HEADER_ONE: string = "text-left text-black text-[40px] font-semibold";
+export const H_1: string = "text-left text-black text-[40px] font-semibold";
 
-export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold p-6";
+export const PAGE_DESCRIPTION_TEXT_BAR_CLASSES: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-5xl leading-snug font-bold p-6";
 
 export const BUTTON_TYPE_ONE: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
 export const BUTTON_TYPE_TWO: string = 'btn bg-gray-950 text-white hover:bg-gray-800 active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-300';
 
-export const BODY_CLASSES: string = "bg-white space-y-4 py-4 px-12";
+export const BODY_CLASSES: string = "bg-white space-y-8 py-4 px-12 pb-60";
 
 export const LINK_CLASSES: string = 'link link-hover';
\ No newline at end of file
diff --git a/react-app/src/interfaces/types.ts b/react-app/src/interfaces/types.ts
index 3828093..c2cdd50 100644
--- a/react-app/src/interfaces/types.ts
+++ b/react-app/src/interfaces/types.ts
@@ -12,4 +12,20 @@ export interface ISVG {
     viewBox: string;
     classes: string;
     svg: string;
+};
+
+export interface ICardConfig {
+    cardClasses: string;
+    titleClasses: string;
+    textClasses: string;
+    buttonClasses: string;
+    buttonPlacement: string;
+};
+
+export interface ICardContent {
+    title: string; 
+    text: string; 
+    buttonText: string;
+    imageSrc: string;
+    imageAlt: string;
 };
\ No newline at end of file
diff --git a/react-app/src/pages/AboutFAQPage.tsx b/react-app/src/pages/AboutFAQPage.tsx
new file mode 100644
index 0000000..8c73edd
--- /dev/null
+++ b/react-app/src/pages/AboutFAQPage.tsx
@@ -0,0 +1,19 @@
+import React, { ReactElement } from 'react';
+import { useMatomo } from '@jonkoops/matomo-tracker-react';
+import AccordionComponent from '../components/AccordionComponent';
+
+export default function AboutFAQPage(): ReactElement {
+    const { trackPageView,} = useMatomo()
+
+    // Track page view
+    React.useEffect(() => {
+        trackPageView()
+    }, [])
+    
+    return (
+        <>
+            <div className="divider">FAQ</div>
+            <AccordionComponent />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/react-app/src/pages/AboutPage.tsx b/react-app/src/pages/AboutPage.tsx
index e0bb5a6..83101b8 100644
--- a/react-app/src/pages/AboutPage.tsx
+++ b/react-app/src/pages/AboutPage.tsx
@@ -1,5 +1,13 @@
 import React, { ReactElement } from 'react';
 import { useMatomo } from '@jonkoops/matomo-tracker-react';
+import TextBarComponent from '../components/TextBarComponent';
+import {
+    BODY_CLASSES,
+    H_1,
+    PAGE_DESCRIPTION_TEXT_BAR_CLASSES,
+} from '../constants';
+import { Link, NavLink, Outlet } from 'react-router-dom';
+import { ILink, } from '../interfaces/types';
 
 export default function AboutPage(): ReactElement {
     const { trackPageView,} = useMatomo()
@@ -9,9 +17,33 @@ export default function AboutPage(): ReactElement {
         trackPageView()
     }, [])
 
+    var pageTitle: string = "About Us";
+    var textBarContent: string = "Get to know about the team behind the [product name] and our mission to connect you with the data you need.";
+
+    var breadcrumbs: { [id: string] : ILink; } = {
+        'l1': { text: 'Home', classes: '', link: '/' },
+        'l2': { text: 'About', classes: '', link: '' },
+    };
+    
     return (
-        <div>
-            <p className="bg-green text-bold">About page under construction</p>
-        </div>
+        <>
+            <TextBarComponent classes={PAGE_DESCRIPTION_TEXT_BAR_CLASSES} text={textBarContent} />
+            <div className={BODY_CLASSES}>
+                <div className="text-sm breadcrumbs">
+                <ul>
+                {Object.keys(breadcrumbs).map( key => (
+                    <li>{breadcrumbs[key].link ? <Link to={breadcrumbs[key].link}>{breadcrumbs[key].text}</Link> : <>{breadcrumbs[key].text}</>}</li>
+                ))}
+                </ul>
+                </div>
+                <div className={H_1}>{pageTitle}</div>
+                <div role="tablist" className="tabs tabs-lifted pb-4">
+                    <NavLink to='/about/product' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>Product</NavLink>
+                    <NavLink to='/about/faq' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>FAQ</NavLink>
+                    <NavLink to='/about/partners' role='tab' className={({ isActive }) => `tab ${ isActive ? 'tab-active' : ''}`}>Partners</NavLink>
+                </div>
+                <Outlet />
+            </div>
+        </>
     );
 }
\ No newline at end of file
diff --git a/react-app/src/pages/AboutPartnersPage.tsx b/react-app/src/pages/AboutPartnersPage.tsx
new file mode 100644
index 0000000..6f95bb2
--- /dev/null
+++ b/react-app/src/pages/AboutPartnersPage.tsx
@@ -0,0 +1,49 @@
+import React, { ReactElement } from 'react';
+import { useMatomo } from '@jonkoops/matomo-tracker-react';
+import { ICardConfig, ICardContent } from '../interfaces/types';
+import CardComponent from '../components/CardComponent';
+
+export default function AboutPartnersPage(): ReactElement {
+    const { trackPageView,} = useMatomo()
+
+    // Track page view
+    React.useEffect(() => {
+        trackPageView()
+    }, [])
+
+    var cardConfig: { [id: string] : ICardConfig; } = {
+        'fundersAndPartnersCard': {
+            cardClasses: "card lg:card-side bg-base-100 shadow-xl", 
+            titleClasses: "card-title", 
+            textClasses: "", 
+            buttonClasses: "", 
+            buttonPlacement: "",  
+        },
+    };
+
+    var cardContent: { [id: string] : ICardContent } = {
+        'fundersAndPartnersCard1': {
+            title: "New album is released!", 
+            text: "Click the button to listen on Spotiwhy app.", 
+            buttonText: "",
+            imageSrc: "https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg",
+            imageAlt: "Album",
+        },
+    };
+
+    
+    return (
+        <>
+            <div className="divider">Funders</div>
+            <div className="flex flex-row space-x-4 justify-between">
+                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard1']} />
+                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard1']} />
+            </div>
+            <div className="divider pt-16">Partners</div>
+            <div className="flex flex-row space-x-4 justify-between">
+                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard1']} />
+                <CardComponent cardConfig={cardConfig['fundersAndPartnersCard']} cardContent={cardContent['fundersAndPartnersCard1']} />
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/react-app/src/pages/AboutProductPage.tsx b/react-app/src/pages/AboutProductPage.tsx
new file mode 100644
index 0000000..2368907
--- /dev/null
+++ b/react-app/src/pages/AboutProductPage.tsx
@@ -0,0 +1,67 @@
+import React, { ReactElement } from 'react';
+import { useMatomo } from '@jonkoops/matomo-tracker-react';
+import { ICardConfig, ICardContent } from '../interfaces/types';
+import CardComponent from '../components/CardComponent';
+
+export default function AboutProductPage(): ReactElement {
+    const { trackPageView,} = useMatomo()
+
+    // Track page view
+    React.useEffect(() => {
+        trackPageView()
+    }, [])
+
+    var PMDDescription: string = `
+                            Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. 
+                            Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, 
+                            eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, 
+                            pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. 
+                            Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, 
+                            eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, 
+                            pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. 
+                            Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. 
+                            Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, 
+                            eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam.
+                            `;
+
+    var cardConfig: { [id: string] : ICardConfig; } = {
+        'teamCard': { 
+            cardClasses: "card w-96 bg-base-100 shadow-xl", 
+            titleClasses: "card-title", 
+            textClasses: "", 
+            buttonClasses: "", 
+            buttonPlacement: "",  
+        },
+    };
+
+    var cardContent: { [id: string] : ICardContent } = {
+        'teamCard1': {
+            title: "Shoes!", 
+            text: "If a dog chews shoes whose shoes does he choose?", 
+            buttonText: "",
+            imageSrc: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg",
+            imageAlt: "Shoes",
+        },
+    };
+    
+    return (
+        <>
+            <div className="divider">Product</div>
+            <p>{PMDDescription}</p>
+            <div className="divider pt-16">Team & Contributions</div>
+            <div className="flex flex-row justify-between">
+                <div className="flex flex-col space-y-8">
+                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent['teamCard1']} />
+                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent['teamCard1']} />
+                </div>
+                <div className="flex flex-col space-y-8">
+                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent['teamCard1']} />
+                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent['teamCard1']} />
+                </div>
+                <div className="flex flex-col space-y-8">
+                    <CardComponent cardConfig={cardConfig['teamCard']} cardContent={cardContent['teamCard1']} />
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/react-app/src/pages/HomePage.tsx b/react-app/src/pages/HomePage.tsx
index 2e3af9e..756a56d 100644
--- a/react-app/src/pages/HomePage.tsx
+++ b/react-app/src/pages/HomePage.tsx
@@ -3,7 +3,8 @@ import { useMatomo } from '@jonkoops/matomo-tracker-react';
 import CardComponent from "../components/CardComponent";
 import ImageCarouselComponent from "../components/ImageCarouselComponent";
 import TextBarComponent from "../components/TextBarComponent";
-import { BODY_CLASSES, BUTTON_TYPE_ONE, HEADER_ONE, PAGE_DESCRIPTION_TEXT_BAR_CLASSES } from '../constants';
+import { BODY_CLASSES, BUTTON_TYPE_ONE, H_1, PAGE_DESCRIPTION_TEXT_BAR_CLASSES } from '../constants';
+import { ICardConfig, ICardContent } from '../interfaces/types';
 
 export default function HomePage(): ReactElement {
 
@@ -14,33 +15,68 @@ export default function HomePage(): ReactElement {
         trackPageView()
     }, [])
 
-    var whiteTextCardClasses: string = "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300";
-    var blackCardClasses: string = "bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2";
+    var cardTitleClasses: string = "text-center text-white text-xl font-semibold";
+    var cardTextClasses: string = "text-center";
+
+    var cardConfig: { [id: string] : ICardConfig; } = {
+        'whiteCard': { 
+            cardClasses: "w-[40rem] bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300", 
+            titleClasses: cardTitleClasses, 
+            textClasses: cardTextClasses, 
+            buttonClasses: "", 
+            buttonPlacement: "",  
+        },
+        'blackCard': { 
+            cardClasses: "bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2", 
+            titleClasses: cardTitleClasses, 
+            textClasses: cardTextClasses, 
+            buttonClasses: BUTTON_TYPE_ONE, 
+            buttonPlacement: "justify-center", 
+        }
+    };
+
+    var cardContent: { [id: string] : ICardContent } = {
+        'whiteCard1': {
+            title: "", 
+            text: "If a dog chews shoes whose shoes does he choose?", 
+            buttonText: "",
+            imageSrc: "",
+            imageAlt: "",
+        },
+        'blackCard1': {
+            title: "Data Search", 
+            text: "Some text; under development", 
+            buttonText: "Sign In",
+            imageSrc: "",
+            imageAlt: "",
+        },
+
+    };
+
     var textBarContent: string = "UNDER CONSTRUCTION - Web portal by DDLS Data Science Node";
 
     return (
         <div>
             <TextBarComponent classes={PAGE_DESCRIPTION_TEXT_BAR_CLASSES} text={textBarContent} />
             <div className={BODY_CLASSES}>
-            <ImageCarouselComponent />
-            <div className="grid grid-cols-2 gap4">
-                <div className="flex flex-col space-y-1.5 ...">
-                    <h1 className={HEADER_ONE}>Latest News</h1>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
-                </div>
-                <div className="flex flex-col space-y-1.5 ...">
-                    <h1 className={HEADER_ONE}>Upcoming Events</h1>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" buttonClasses=''/>
-                </div>
-            </div>
-                <div className="grid grid-cols-2">
-                    <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" buttonClasses={BUTTON_TYPE_ONE}/>
-                    <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" buttonClasses={BUTTON_TYPE_ONE}/>
+                <ImageCarouselComponent />
+                <div className="flex flex-row space-x-16">
+                    <div className="flex flex-col space-y-1.5 ...">
+                        <h1 className={H_1}>Latest News</h1>
+                        <CardComponent cardConfig={cardConfig['whiteCard']} cardContent={cardContent['whiteCard1']} />
+                        <CardComponent cardConfig={cardConfig['whiteCard']} cardContent={cardContent['whiteCard1']} />
+                        <CardComponent cardConfig={cardConfig['whiteCard']} cardContent={cardContent['whiteCard1']} />
+                        <CardComponent cardConfig={cardConfig['whiteCard']} cardContent={cardContent['whiteCard1']} />
+                        <CardComponent cardConfig={cardConfig['blackCard']} cardContent={cardContent['blackCard1']} />
+                    </div>
+                    <div className="flex flex-col space-y-1.5 ...">
+                        <h1 className={H_1}>Latest News</h1>
+                        <CardComponent cardConfig={cardConfig['whiteCard']} cardContent={cardContent['whiteCard1']} />
+                        <CardComponent cardConfig={cardConfig['whiteCard']} cardContent={cardContent['whiteCard1']} />
+                        <CardComponent cardConfig={cardConfig['whiteCard']} cardContent={cardContent['whiteCard1']} />
+                        <CardComponent cardConfig={cardConfig['whiteCard']} cardContent={cardContent['whiteCard1']} />
+                        <CardComponent cardConfig={cardConfig['blackCard']} cardContent={cardContent['blackCard1']} />
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/react-app/src/pages/PrivacyPage.tsx b/react-app/src/pages/PrivacyPage.tsx
index da9e563..b981760 100644
--- a/react-app/src/pages/PrivacyPage.tsx
+++ b/react-app/src/pages/PrivacyPage.tsx
@@ -5,7 +5,7 @@ import {
     BODY_CLASSES,
     BUTTON_TYPE_ONE,
     BUTTON_TYPE_TWO,
-    HEADER_ONE,
+    H_1,
     PAGE_DESCRIPTION_TEXT_BAR_CLASSES,
 } from '../constants';
 import { Link } from 'react-router-dom';
@@ -20,33 +20,66 @@ export default function PrivacyPage(): ReactElement {
     }, [])
 
     var textBarContent: string = "Transparency is one of our guiding principles. Get acquainted with how we're creating a secure space for you.";
-    var privacyDescription: string = `
-                            Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. 
-                            Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, 
-                            eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, 
-                            pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. 
-                            Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, 
-                            eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, 
-                            pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. Duis nec condimentum purus. 
-                            Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, eu euismod magna dignissim. 
-                            Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam. Ut rhoncus ante in metus lobortis, 
-                            eu euismod magna dignissim. Duis nec condimentum purus. Quisque urna enim, placerat non fermentum sed, pharetra sit amet quam.
+    var policyText: string = `
+                                SciLifeLab operates the Swedish Precision Medicine Portal, which provides the Service. This page is 
+                                used to inform website visitors regarding our personal data processing policy. If you choose to use 
+                                our Service, then your personal data will be processed in accordance with this policy. The personal 
+                                information that we collect is used for providing and improving the Service. We will not use 
+                                or share your information with anyone except as described in this policy. All collected personal 
+                                information will be processed for research purposes, i.e. using the lawful basis of public interest 
+                                and in accordance with Regulation (EU) 2016/679 of the European Parliament and of the Council of 
+                                27 April 2016, the General Data Protection Regulation.
                             `;
-    var trackingMessage: string =   `
-                            We want to inform you that whenever you visit this website, we collect information that 
-                            your browser sends to us which includes: the website from which you visited us from, 
-                            the parts of the website you visit, the date and duration of your visit, your anonymised IP address, 
-                            information from the device (device type, operating system, screen resolution, language, country you are located in, and web browser type) 
-                            you used during your visit, and more. We process this usage data in Matomo Analytics (hosted on SciLifeLab servers and operated solely by SciLifeLab) 
-                            for statistical purposes, to improve the product and to recognize and stop any misuse.
+    var visitorStatisticsText: string =   `
+                                We want to inform you that whenever you visit our Service, we collect the information that your 
+                                browser sends to us, which is called "log data". Log data may include: the website that you 
+                                visited us from, the parts of our Service you visit, the date and duration of your visit, 
+                                your anonymised IP address, information from the device that you used during your visit (device 
+                                type, operating system, screen resolution, language, country you are located in, and 
+                                web browser type), and more. We process this usage data in Matomo Analytics (hosted on 
+                                SciLifeLab servers and operated solely by SciLifeLab) for statistical purposes, to 
+                                improve our Service, and to recognise and stop any misuse. You can opt out of your 
+                                statistics being collected below:\n\nThe tracking opt-out feature requires cookies to be enabled.
+                                    `;
+    var formsText: string = `
+                                Our Service contains a number of forms that visitors can use to contact us or send us suggestions. 
+                                The website visitors may choose to provide their personal information such as their name and e-mail 
+                                address through these forms. The following parties will have access to processing the personal data 
+                                provided through the forms; SciLifeLab Data Centre, Uppsala University, Kungliga Tekniska högskolan 
+                                (KTH). Your personal data will be deleted when no longer needed, or when stipulated by the archival 
+                                rules for the university as a government authority. If you want to update or remove your personal data, 
+                                please contact the controller SciLifeLab Data Centre at Uppsala University using x@scilifelab.se                            
                             `;
+    var linksToOtherSitesText: string = `
+                                Our Service may contain links to other sites. If you click on a third-party link, you will be 
+                                directed to that site. Note that these external sites are not operated by us. Therefore, we 
+                                strongly advise you to review the privacy policy of these websites. We have no control over, 
+                                and assume no responsibility for, the content, privacy policies, or practices of any third-party 
+                                sites or services.
+                                        `;
+    var changeToPrivacyText: string =   `
+                                We may update our privacy policy from time to time. Thus, we advise you to review this page 
+                                periodically for any changes. We will notify you of any changes by posting the new privacy policy 
+                                on this page. These changes posted on this page are effective immediately.
+                                        `;
+    var contactUsText: string = `
+                                If you have any questions or suggestions about our privacy policy, do not hesitate to contact 
+                                us (link to contact page).
+                                `;
 
     var breadcrumbs: { [id: string] : ILink; } = {
         'l1': { text: 'Home', classes: '', link: '/' },
         'l2': { text: 'Privacy', classes: '', link: '' },
     };
 
-    var dividers: string[] = ['Default', 'Default'];
+    var dividers: string[] = [
+        'Privacy Policy', 
+        'Visitor statistics', 
+        'Forms', 
+        'Links to Other Sites',
+        'Changes to This Privacy Policy',
+        'Contact Us',
+    ];
 
     var alertMessage: string = "we use cookies for no reason.";
     
@@ -61,12 +94,12 @@ export default function PrivacyPage(): ReactElement {
                 ))}
                 </ul>
                 </div>
-                <div className={HEADER_ONE}>Privacy Policy</div>
+                <div className={H_1}>Privacy Policy</div>
                 <div className="divider">{dividers[0]}</div>
-                <p>{privacyDescription}</p>
+                <p>{policyText}</p>
                 <div className="divider">{dividers[1]}</div>
-                <p>{trackingMessage}</p>
-                <div role="alert" className="alert">
+                <p>{visitorStatisticsText}</p>
+                <div role="alert" className="alert bg-zinc-300 text-black">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-info shrink-0 w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                     <span>{alertMessage}</span>
                     <div className="space-x-2">
@@ -74,6 +107,14 @@ export default function PrivacyPage(): ReactElement {
                         <button className={BUTTON_TYPE_ONE}>Accept</button>
                     </div>
                 </div>
+                <div className="divider">{dividers[2]}</div>
+                <p>{formsText}</p>
+                <div className="divider">{dividers[3]}</div>
+                <p>{linksToOtherSitesText}</p>
+                <div className="divider">{dividers[4]}</div>
+                <p>{changeToPrivacyText}</p>
+                <div className="divider">{dividers[5]}</div>
+                <p>{contactUsText}</p>
             </div>
         </>
     );