diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
index 47484aa34e3e06488dea7ace6f274c5dd2616f95..1aec573e911a4336b48ea2648e1bf9b8c01b35da 100644
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -6,6 +6,7 @@ import ExternalPageNavBar from "./components/global/ExternalPageNavBar";
 import About from "./pages/About";
 import DataAnalysis from "./pages/DataAnalysis";
 import AnnualReport from "./pages/AnnualReport";
+import CompendiumData from "./pages/CompendiumData";
 
 function App(): ReactElement {
   return (
@@ -15,6 +16,7 @@ function App(): ReactElement {
         <Landing /> */}
         <Navigation />
         <Routes>
+        <Route path="/data" element={<CompendiumData />} />
           <Route path="/about" element={<About />} />
           <Route path="/analysis" element={<DataAnalysis />} />
           <Route path="/report" element={<AnnualReport />} />
diff --git a/webapp/src/components/CollapsibleBox.tsx b/webapp/src/components/CollapsibleBox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..982fe704e4014a40accc847abcd335d97ebd116f
--- /dev/null
+++ b/webapp/src/components/CollapsibleBox.tsx
@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+interface CollapsibleBoxProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <div style={{ border: '3px solid #003F5F', display: 'flex', maxWidth: '50vw' }}>
+
+      {!isCollapsed && <div>
+        <h1 className="geant-header">{title}</h1>
+        {children}
+      </div> ||
+        <h1 className="geant-header">{title}</h1>}
+      <button style={{ marginLeft: 'auto' }} onClick={() => setIsCollapsed(!isCollapsed)}>
+        {isCollapsed ? 'Expand' : 'Collapse'}
+      </button>
+    </div>
+  );
+};
+
+export default CollapsibleBox;
diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx
index 1247c5f9a120460cf663a830a48a70d678c25a51..1be857a35126b31a590be82a50dde1c37e34609c 100644
--- a/webapp/src/index.tsx
+++ b/webapp/src/index.tsx
@@ -2,8 +2,8 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from "./App";
-import './styles.scss';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './main.scss';
 
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container); 
diff --git a/webapp/src/styles.scss b/webapp/src/main.scss
similarity index 95%
rename from webapp/src/styles.scss
rename to webapp/src/main.scss
index 76aced2f548085f402320042f9fa75f2a1bbb7c5..344351c4ba49a87d297fc380804c9df851e99674 100644
--- a/webapp/src/styles.scss
+++ b/webapp/src/main.scss
@@ -1,3 +1,6 @@
+@import 'scss/base/text';
+@import 'scss/layout/components';
+
 table {
   min-width: 650px;
 }
diff --git a/webapp/src/pages/CompendiumData.tsx b/webapp/src/pages/CompendiumData.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..375f02f61bd54d28dae5baea4fc779ac96d96cb2
--- /dev/null
+++ b/webapp/src/pages/CompendiumData.tsx
@@ -0,0 +1,68 @@
+import React, { ReactElement } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import SectionDataLogo from "../images/section_data_large.png";
+import CollapsibleBox from "../components/CollapsibleBox";
+
+function CompendiumData(): ReactElement {
+    return (
+        <Container className="grey-container">
+            <Row>
+                <div>
+                    <h1 className="geant-header">Compendium Data</h1>
+                    <h1 className="geant-header">Compendium<br />Reports</h1>
+                </div>
+            </Row>
+            <Row>
+                <img src={SectionDataLogo} style={{ maxWidth: '5%' }} />
+                <p className="wordwrap">
+                    What the Compendium is, the history of it, the aim, what you can find in it etc etc etc etc
+                    Lorem ipsum dolor sit amet, consec tetur adi piscing elit, sed do eiusmod tempor inc dolor sit amet, consec
+                    tetur adi piscing elit, sed do eiusmod tempor inc
+                </p>
+            </Row>
+            <Row>
+                <div className="center">
+
+                <CollapsibleBox title="ORGANISATION">
+
+                    <Col align="left">
+                        <Row>
+                            <span>Length of NREN dark fibres leased by NRENs</span>
+                        </Row>
+
+                        <Row>
+                            <span>Length of dark fibres operated by NRENs outside their own countries</span>
+                        </Row>
+
+                        <Row>
+                            <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
+                        </Row>
+                        <Row>
+                            <span>Length of of dark fibre cables laid by the NREN in their network</span>
+                        </Row>
+                    </Col>
+                    <Col align="right">
+                        <Row>
+                            <span>Length of NREN dark fibres leased by NRENs</span>
+                        </Row>
+
+                        <Row>
+                            <span>Length of dark fibres operated by NRENs outside their own countries</span>
+                        </Row>
+
+                        <Row>
+                            <span>Average duration of NREN's Indefensible Rights of use of dark fibre cables</span>
+                        </Row>
+                        <Row>
+                            <span>Length of of dark fibre cables laid by the NREN in their network</span>
+                        </Row>
+                    </Col>
+                </CollapsibleBox>
+                </div>
+                
+            </Row>
+        </Container>
+    );
+}
+
+export default CompendiumData;
diff --git a/webapp/src/pages/Landing.tsx b/webapp/src/pages/Landing.tsx
index 873733b1801a54d262becc0a9d258718239b82a1..718ce21f3fcd1e163baae406fe0c740313ecf1f8 100644
--- a/webapp/src/pages/Landing.tsx
+++ b/webapp/src/pages/Landing.tsx
@@ -1,48 +1,54 @@
-import React, {ReactElement} from "react";
-import {Card, Container, Row, Col} from "react-bootstrap";
+import React, { ReactElement } from "react";
+import { Card, Container, Row, Col } from "react-bootstrap";
 import SectionDataLogo from "../images/section_data_large.png";
 import SectionReportsLogo from "../images/section_reports_large.png";
 
 function Landing(): ReactElement {
     return (
-        <Container>
-            <Row className="justify-content-md-center">
-                <Col align={'center'}>
-                    THE GÉANT COMPENDIUM OF NRENS
-                    <br/>
-                    <p>
-                        What the Compendium is, the history of it, the aim, what you can nd in it etc etc etc etc
-                        Lorem ipsum dolor sit amet, consec tetur adi piscing elit, sed do eiusmod tempor inc dolor sit
-                        amet,
-                        consec tetur adi piscing elit, sed do eiusmod tempor inc
+        <Container className="grey-container">
+            <Row>
+                <div className="center-text">
+                    <h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1>
+                    <br />
+                    <p className="wordwrap">
+                        What the Compendium is, the history of it, the aim, what you can
+                        find in it etc etc etc etc
+                        Lorem ipsum dolor sit amet, consec tetur
+                        adi piscing elit, sed do eiusmod tempor inc dolor sit amet, consec
+                        tetur adi piscing elit, sed do eiusmod tempor inc
                     </p>
-                </Col>
+                </div>
             </Row>
             <Row>
                 <Col>
-                    <Container>
+                    <Container
+                        style={{ backgroundColor: "white" }}
+                        className="rounded-border"
+                    >
                         <Row className="justify-content-md-center">
-                            <Col align={'center'}>
-                                <Card style={{ width: '18rem' }}>
+                            <Col align={"center"}>
+                                <Card style={{ width: "18rem" }}>
                                     <Card.Img src={SectionDataLogo}></Card.Img>
                                     <Card.Body>
                                         <Card.Title>Compendium Data</Card.Title>
-                                        <Card.Text>The results of the Compendium Surveys
-                                            lled in annually by NRENs. Questions cover
-                                            many topics: Network, Connected Users,
-                                            Services, Standards & Policies</Card.Text>
+                                        <Card.Text>
+                                            The results of the Compendium Surveys lled in annually by
+                                            NRENs. Questions cover many topics: Network, Connected
+                                            Users, Services, Standards & Policies
+                                        </Card.Text>
                                     </Card.Body>
                                 </Card>
                             </Col>
-                            <Col align={'center'}>
-                                <Card style={{ width: '18rem' }}>
+                            <Col align={"center"}>
+                                <Card style={{ width: "18rem" }}>
                                     <Card.Img src={SectionReportsLogo}></Card.Img>
                                     <Card.Body>
                                         <Card.Title>Compendium Reports</Card.Title>
-                                        <Card.Text>A GÉANT Compendium Report is published
-                                            annually, drawing on data from the Compendium
-                                            Survey lled in by NRENs, complemented by
-                                            information from other surveys</Card.Text>
+                                        <Card.Text>
+                                            A GÉANT Compendium Report is published annually, drawing
+                                            on data from the Compendium Survey lled in by NRENs,
+                                            complemented by information from other surveys
+                                        </Card.Text>
                                     </Card.Body>
                                 </Card>
                             </Col>
@@ -54,4 +60,4 @@ function Landing(): ReactElement {
     );
 }
 
-export default Landing;
\ No newline at end of file
+export default Landing;
diff --git a/webapp/src/scss/abstracts/_variables.scss b/webapp/src/scss/abstracts/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fbde7c7d93bddc6293aac46a9d182b79c3d06260
--- /dev/null
+++ b/webapp/src/scss/abstracts/_variables.scss
@@ -0,0 +1,10 @@
+$ash-grey: rgb(109, 110, 112);       // #6D6E70
+$light-ash-grey: rgb(185, 190, 197); // #B9BEC5
+$light-off-white: rgb(234, 237, 243);// #EAEDF3
+$teal-green: rgb(42, 166, 156);      // #2AA69C
+$teal-blue: rgb(83, 187, 180);       // #53BBB4
+$turquoise-blue: rgb(167, 220, 216); // #A7DCD8
+$yellow-orange: rgb(247, 158, 59);   // #F79E3B
+$yellow: rgb(250, 190, 102);         // #FABE66
+$light-beige: rgb(252, 231, 201);    // #FCE7C9
+$dark-teal: rgb(0, 63, 95);          // #003F5F
\ No newline at end of file
diff --git a/webapp/src/scss/base/_text.scss b/webapp/src/scss/base/_text.scss
new file mode 100644
index 0000000000000000000000000000000000000000..30970f41fcefa0311aa7cd360decef296d6ee1a1
--- /dev/null
+++ b/webapp/src/scss/base/_text.scss
@@ -0,0 +1,46 @@
+@import '../abstracts/variables';
+
+.regular-17pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 17pt;
+    font-weight: normal;
+}
+
+.bold-20pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 20pt;
+    font-weight: bold;
+}
+
+.bold-caps-16pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 16pt;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.bold-caps-17pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 17pt;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.bold-caps-20pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 20pt;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.bold-caps-30pt {
+    font-family: "Open Sans", sans-serif;
+    font-size: 30pt;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.geant-header {
+    @extend .bold-caps-20pt;
+    color: $dark-teal;
+}
\ No newline at end of file
diff --git a/webapp/src/scss/layout/_components.scss b/webapp/src/scss/layout/_components.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7b562dfb986a67b1424da9a0373d02eddce6ef6a
--- /dev/null
+++ b/webapp/src/scss/layout/_components.scss
@@ -0,0 +1,33 @@
+@import '../abstracts/variables';
+
+.rounded-border {
+  border-radius: 25px;
+  border: 1px solid $light-ash-grey
+}
+
+.grey-container {
+  background-color: $light-off-white;
+  max-width: 100vw;
+  height: 100vh;
+  padding: 2% 0;
+}
+
+.wordwrap {
+  max-width: 30vw;
+  word-wrap: break-word;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.center-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 2%;
+  max-width: 100vw;
+  flex-direction: column;
+}
\ No newline at end of file