diff --git a/react-app/src/components/CardComponent.tsx b/react-app/src/components/CardComponent.tsx
index 12ea661..498595b 100644
--- a/react-app/src/components/CardComponent.tsx
+++ b/react-app/src/components/CardComponent.tsx
@@ -1,14 +1,13 @@
 import { ReactElement } from "react";
 
-export default function CardComponent(prop: { classes: string, title: string, text: string, button: string }): ReactElement {
+export default function CardComponent(prop: { classes: string, title: string, text: string, button: string, buttonClasses: string }): ReactElement {
     const title: ReactElement = (
         <h2 className="text-center text-white text-xl font-semibold">{prop.title}</h2>
     );
 
-    var buttonClasses: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
     const button: ReactElement = (
         <div className="card-actions justify-center">
-            <button className={buttonClasses}>{prop.button}</button>
+            <button className={prop.buttonClasses}>{prop.button}</button>
         </div>
     );
     
diff --git a/react-app/src/components/FooterComponent.tsx b/react-app/src/components/FooterComponent.tsx
index f95068e..38c5ea2 100644
--- a/react-app/src/components/FooterComponent.tsx
+++ b/react-app/src/components/FooterComponent.tsx
@@ -1,23 +1,22 @@
 import { ReactElement } from 'react';
 import {ILink, ISVG} from '../interfaces/types';
+import { Link } from 'react-router-dom';
+import { LINK_CLASSES } from '../constants';
 
 export default function FooterComponent(): ReactElement {
-
-  var footerClasses: string = 'footer p-10 bg-base-100 text-base-content';
   
-  var linkClasses: string = 'link link-hover';
   var linksCol1: { [id: string] : ILink; } = {
-      'l1': { text: 'Anonymization Tool', classes: linkClasses, link: '/' },
-      'l2': { text: 'Data Search', classes: linkClasses, link: '/' },
-      'l3': { text: 'Data Types', classes: linkClasses, link: '/' },
-      'l4': { text: 'Events & News', classes: linkClasses, link: '/' },
+      'l1': { text: 'Anonymization Tool', classes: LINK_CLASSES, link: '/' },
+      'l2': { text: 'Data Search', classes: LINK_CLASSES, link: '/' },
+      'l3': { text: 'Data Types', classes: LINK_CLASSES, link: '/' },
+      'l4': { text: 'Events & News', classes: LINK_CLASSES, link: '/' },
   };
 
   var linksCol2: { [id: string] : ILink; } = {
-      'l1': { text: 'About us', classes: linkClasses, link: '/' },
-      'l2': { text: 'Contact', classes: linkClasses, link: '/' },
-      'l3': { text: 'Open Source Contribution', classes: linkClasses, link: '/' },
-      'l4': { text: 'Privacy Policy', classes: linkClasses, link: '/' },
+      'l1': { text: 'About us', classes: LINK_CLASSES, link: '/' },
+      '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' },
   };
 
   var svgConfig: string[] = ['/', 'http://www.w3.org/2000/svg', '24', '24', '0 0 24 24', 'fill-current']
@@ -29,15 +28,15 @@ export default function FooterComponent(): ReactElement {
 
 
   return (
-    <footer className={footerClasses}>
+    <footer className='footer p-10 bg-base-100 text-base-content'>
       <nav>
       {Object.keys(linksCol1).map( key => (
-          <a className={linksCol1[key].classes} href={linksCol1[key].link}>{linksCol1[key].text}</a>
+          <Link className={linksCol1[key].classes} to={linksCol1[key].link}>{linksCol1[key].text}</Link>
       ))}
       </nav> 
       <nav>
       {Object.keys(linksCol2).map( key => (
-          <a className={linksCol2[key].classes} href={linksCol2[key].link}>{linksCol2[key].text}</a>
+          <Link className={linksCol2[key].classes} to={linksCol2[key].link}>{linksCol2[key].text}</Link>
       ))}
       </nav> 
       <nav>
diff --git a/react-app/src/components/HeaderComponent.tsx b/react-app/src/components/HeaderComponent.tsx
index aabc7b2..c0f7c98 100644
--- a/react-app/src/components/HeaderComponent.tsx
+++ b/react-app/src/components/HeaderComponent.tsx
@@ -1,32 +1,31 @@
 import { Link, NavLink } from 'react-router-dom';
 import { ILink } from '../interfaces/types';
+import { BUTTON_TYPE_ONE, LINK_CLASSES } from '../constants';
 
 export default function HeaderComponent() {
     
-    var linkClasses: string = 'link link-hover';
     var links: { [id: string] : ILink; } = {
         'l1': { text: 'Random text for now', classes: 'pointer-events-none', link: '/#' },
-        'l2': { text: 'Data', classes: linkClasses, link: 'data' },
-        'l3': { text: 'Events & News', classes: linkClasses, link: 'eventsandnews' },
-        'l4': { text: 'Contact', classes: linkClasses, link: 'contact' },
-        'l5': { text: 'About', classes: linkClasses, link: 'about' },
+        'l2': { text: 'Data', classes: LINK_CLASSES, link: 'data' },
+        'l3': { text: 'Events & News', classes: LINK_CLASSES, link: 'eventsandnews' },
+        'l4': { text: 'Contact', classes: LINK_CLASSES, link: 'contact' },
+        'l5': { text: 'About', classes: LINK_CLASSES, link: 'about' },
     };
 
-    var buttonClasses: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
     var buttons: { [id: string] : ILink; } = {
-        'b1': { text: 'Sign In', classes: buttonClasses, link: 'signin' },
+        'b1': { text: 'Sign In', classes: BUTTON_TYPE_ONE, link: 'signin' },
     };
 
     return (
         // use bg-zinc-200 instead? similar to daisyUI light-theme footer
-        <div className="navbar h-[8rem] bg-base-100">
+        <div className="navbar bg-base-100 px-8">
             <div className="navbar-start">
                 <Link to="/">
-                    <img className="w-[340px] h-[82px]" src="/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png" alt="SciLifeLab Logo" />
+                    <img className="h-auto w-80" src="/images/SciLifeLab logo/NEG/Digital/SciLifeLab_Logotype_NEG.png" alt="SciLifeLab Logo" />
                 </Link>
             </div>
-            <div className="navbar-center hidden lg:flex">
-                <ul className="menu menu-horizontal px-1">
+            <div className="navbar-center lg:flex">
+                <ul className="menu menu-horizontal">
                 {Object.keys(links).map( key => (
                     <li>{<NavLink className={links[key].classes} to={links[key].link}>{links[key].text}</NavLink>}</li>
                 ))}
diff --git a/react-app/src/components/Routes.tsx b/react-app/src/components/Routes.tsx
index 6add477..923d901 100644
--- a/react-app/src/components/Routes.tsx
+++ b/react-app/src/components/Routes.tsx
@@ -7,6 +7,7 @@ import ContactPage from '../pages/ContactPage';
 import DataPage from '../pages/DataPage';
 import EventsAndNewsPage from '../pages/EventsAndNewsPage';
 import SignInPage from '../pages/SignInPage';
+import PrivacyPage from '../pages/PrivacyPage';
 
 const router = createBrowserRouter([
     {
@@ -37,6 +38,10 @@ const router = createBrowserRouter([
                 path: 'signin',
                 element: <SignInPage />,
             },
+            {
+                path: 'privacy',
+                element: <PrivacyPage />,
+            },
         ]
     },
   ]);
diff --git a/react-app/src/constants.ts b/react-app/src/constants.ts
new file mode 100644
index 0000000..55678fc
--- /dev/null
+++ b/react-app/src/constants.ts
@@ -0,0 +1,11 @@
+// reused tailwind classes
+export const HEADER_ONE: 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 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 LINK_CLASSES: string = 'link link-hover';
\ No newline at end of file
diff --git a/react-app/src/pages/HomePage.tsx b/react-app/src/pages/HomePage.tsx
index c630a29..2e3af9e 100644
--- a/react-app/src/pages/HomePage.tsx
+++ b/react-app/src/pages/HomePage.tsx
@@ -3,6 +3,7 @@ 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';
 
 export default function HomePage(): ReactElement {
 
@@ -13,35 +14,33 @@ export default function HomePage(): ReactElement {
         trackPageView()
     }, [])
 
-    var headerOne: string = "text-left text-black text-[40px] font-semibold";
     var whiteTextCardClasses: string = "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300";
-    var blackCardClasses: string = "w-[700px] h-[253px] bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2";
-    var textBarClasses: string = "bg-gradient-to-b from-base-100 from-90% to-white text-justify text-[48px] font-bold py-8";
+    var blackCardClasses: string = "bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2";
     var textBarContent: string = "UNDER CONSTRUCTION - Web portal by DDLS Data Science Node";
 
     return (
         <div>
-            <TextBarComponent classes={textBarClasses} text={textBarContent} />
-            <div className="bg-white space-y-14">
+            <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={headerOne}>Latest News</h1>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+                    <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={headerOne}>Upcoming Events</h1>
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
-                    <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+                    <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" />
-                    <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
+                    <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}/>
                 </div>
             </div>
         </div>
diff --git a/react-app/src/pages/PrivacyPage.tsx b/react-app/src/pages/PrivacyPage.tsx
new file mode 100644
index 0000000..da9e563
--- /dev/null
+++ b/react-app/src/pages/PrivacyPage.tsx
@@ -0,0 +1,80 @@
+import React, { ReactElement } from 'react';
+import { useMatomo } from '@jonkoops/matomo-tracker-react';
+import TextBarComponent from '../components/TextBarComponent';
+import {
+    BODY_CLASSES,
+    BUTTON_TYPE_ONE,
+    BUTTON_TYPE_TWO,
+    HEADER_ONE,
+    PAGE_DESCRIPTION_TEXT_BAR_CLASSES,
+} from '../constants';
+import { Link } from 'react-router-dom';
+import { ILink } from '../interfaces/types';
+
+export default function PrivacyPage(): ReactElement {
+    const { trackPageView,} = useMatomo()
+
+    // Track page view
+    React.useEffect(() => {
+        trackPageView()
+    }, [])
+
+    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 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 breadcrumbs: { [id: string] : ILink; } = {
+        'l1': { text: 'Home', classes: '', link: '/' },
+        'l2': { text: 'Privacy', classes: '', link: '' },
+    };
+
+    var dividers: string[] = ['Default', 'Default'];
+
+    var alertMessage: string = "we use cookies for no reason.";
+    
+    return (
+        <>
+            <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={HEADER_ONE}>Privacy Policy</div>
+                <div className="divider">{dividers[0]}</div>
+                <p>{privacyDescription}</p>
+                <div className="divider">{dividers[1]}</div>
+                <p>{trackingMessage}</p>
+                <div role="alert" className="alert">
+                    <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">
+                        <button className={BUTTON_TYPE_TWO}>Deny</button>
+                        <button className={BUTTON_TYPE_ONE}>Accept</button>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file