diff --git a/webapp/src/components/DataPage.tsx b/webapp/src/components/DataPage.tsx
index 31bff5ad24eef0bc48cc8acdde2e779fd08b7a10..fb6fa2746bb9f0afc8e116c450e27fb3c64de4b5 100644
--- a/webapp/src/components/DataPage.tsx
+++ b/webapp/src/components/DataPage.tsx
@@ -3,20 +3,24 @@ import { Container, Row, Col } from "react-bootstrap";
 import OrganizationSidebar from "./OrganizationSidebar";
 import PageHeader from "../components/global/PageHeader"
 import SectionLink from "../components/global/SectionLink";
+import SectionNavigation from "./SectionNavigation";
+import { Sections } from "../helpers/constants";
 
 interface inputProps {
     title: string,
     filter: ReactElement,
-    children: ReactElement
+    children: ReactElement,
+    category: Sections
 }
 
-function DataPage({ title, filter, children }: inputProps): ReactElement {
+function DataPage({ title, filter, children, category }: inputProps): ReactElement {
     return (
         <>
             <OrganizationSidebar />
             <PageHeader type={'data'} header={'Compendium Data'}>
                 <SectionLink section={"Reports"} />
             </PageHeader>
+            <SectionNavigation activeCategory={category} />
             <Container className="grow">
                 <Col xs={9}>
                     <Row>
diff --git a/webapp/src/components/SectionNavigation.tsx b/webapp/src/components/SectionNavigation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..606048fff7dd2e131f3ed03df5d2d1439e1dff51
--- /dev/null
+++ b/webapp/src/components/SectionNavigation.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Container, Row, ButtonToolbar, Button } from 'react-bootstrap';
+import { Sections } from '../helpers/constants';
+
+interface inputProps {
+    activeCategory: Sections
+}
+
+const SectionNavigation = ({ activeCategory }: inputProps) => {
+    return (
+        <Container>
+            <Row>
+                <ButtonToolbar className="navbox-bar gap-2 m-3">
+                    <Link to={activeCategory === Sections.Organisation ? '.' : '/funding'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.Organisation}>
+                            <span>{Sections.Organisation}</span>
+                        </Button>
+                    </Link>
+                    <Link to={activeCategory === Sections.Policy ? '.' : '/policy'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.Policy}>
+                            <span>{Sections.Policy}</span>
+                        </Button>
+                    </Link>
+                    <Link to={activeCategory === Sections.ConnectedUsers ? '.' : '.'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.ConnectedUsers}
+                            disabled={true}>
+                            <span>{Sections.ConnectedUsers}</span>
+                        </Button>
+                    </Link>
+                    <Link to={activeCategory === Sections.Network ? '.' : '.'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.Network}
+                            disabled={true}>
+                            <span>{Sections.Network}</span>
+                        </Button>
+                    </Link>
+                    <Link to={activeCategory === Sections.Services ? '.' : '.'}>
+                        <Button
+                            variant={'nav-box'}
+                            active={activeCategory === Sections.Services}
+                            disabled={true}>
+                            <span>{Sections.Services}</span>
+                        </Button>
+                    </Link>
+                </ButtonToolbar>
+            </Row>
+        </Container>
+
+    )
+}
+
+export default SectionNavigation
\ No newline at end of file
diff --git a/webapp/src/helpers/constants.ts b/webapp/src/helpers/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d168518898778c51bb0aa2b070e5d921cb5dff2d
--- /dev/null
+++ b/webapp/src/helpers/constants.ts
@@ -0,0 +1,7 @@
+export enum Sections {
+    Organisation = 'ORGANISATION',
+    Policy = 'STANDARDS AND POLICIES',
+    ConnectedUsers = 'CONNECTED USERS',
+    Network = 'NETWORK',
+    Services = 'SERVICES',
+};
diff --git a/webapp/src/pages/Budget.tsx b/webapp/src/pages/Budget.tsx
index 126ec18ae8519d2c0308703a83d8c0b02f0538f7..3c3df6231f2d302f8a1fc652ef191f571e3cb6a0 100644
--- a/webapp/src/pages/Budget.tsx
+++ b/webapp/src/pages/Budget.tsx
@@ -6,6 +6,7 @@ import { createBudgetDataset, getYearsAndNrens, loadDataWithFilterNrenSelectionF
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter";
 import LineGraph from "../components/graphing/LineGraph";
+import { Sections } from '../helpers/constants';
 
 
 interface inputProps {
@@ -39,7 +40,7 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE
     />
 
     return (
-        <DataPage title="Budgets" filter={filterNode}>
+        <DataPage title="Budgets" category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
                     <LineGraph data={budgetData} />
diff --git a/webapp/src/pages/ChargingStructure.tsx b/webapp/src/pages/ChargingStructure.tsx
index 65a8cf545c8c27d9a8c23365a716a7bcc48d6cbe..04d3b63ae69d151553dbbca3bb7776470926b4ae 100644
--- a/webapp/src/pages/ChargingStructure.tsx
+++ b/webapp/src/pages/ChargingStructure.tsx
@@ -7,6 +7,7 @@ import { createChargingStructureDataLookup, getYearsAndNrens, loadDataWithFilter
 import ColorPill from "../components/ColorPill";
 import DataPage from "../components/DataPage";
 import Filter from "../components/graphing/Filter";
+import { Sections } from "../helpers/constants";
 
 
 ChartJS.register(
@@ -49,7 +50,7 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
     />
 
     return (
-        <DataPage title="Charging Structure" filter={filterNode}>
+        <DataPage title="Charging Structure" category={Sections.Organisation} filter={filterNode}>
             <Table className="charging-struct-table" striped bordered responsive >
                 <colgroup>
                     <col span={1} style={{ width: "10%" }} />
diff --git a/webapp/src/pages/ECProjects.tsx b/webapp/src/pages/ECProjects.tsx
index 09123ca9179747377e540e4500688f3ea41b26db..e32c1d062b89bcd40e87c0ba38efe68cfd8f0763 100644
--- a/webapp/src/pages/ECProjects.tsx
+++ b/webapp/src/pages/ECProjects.tsx
@@ -5,6 +5,7 @@ import { ECProject, FilterSelection } from "../Schema";
 import { createECProjectsDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion';
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 interface inputProps {
@@ -54,7 +55,7 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Involvement in European Commission Projects" filter={filterNode}>
+        <DataPage title="NREN Involvement in European Commission Projects" category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>
diff --git a/webapp/src/pages/FundingSource.tsx b/webapp/src/pages/FundingSource.tsx
index 50a36d13802402c51be5abc7c43278312a08cb1b..c6d7d1ba9a475558d5f098daf625d8e7d1436842 100644
--- a/webapp/src/pages/FundingSource.tsx
+++ b/webapp/src/pages/FundingSource.tsx
@@ -6,6 +6,7 @@ import { FundingSource, FilterSelection } from "../Schema";
 import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 ChartJS.register(
@@ -97,7 +98,7 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
 
 
     return (
-        <DataPage title="Funding Source" filter={filterNode}>
+        <DataPage title="Funding Source" category={Sections.Organisation} filter={filterNode}>
             <div className="chart-container" style={{ 'minHeight': '100vh', 'width': '60vw', }}>
                 <Bar
                     data={fundingSourceDataset}
diff --git a/webapp/src/pages/Landing.tsx b/webapp/src/pages/Landing.tsx
index 7f9d79553e27662e560a69084d81c55640a12064..aefef21e890dd5821986fec7207b2f9036911532 100644
--- a/webapp/src/pages/Landing.tsx
+++ b/webapp/src/pages/Landing.tsx
@@ -8,7 +8,7 @@ function Landing(): ReactElement {
     return (
         <Container className="grey-container">
             <Row>
-                <div className="center-text max-width-100vw">
+                <div className="center-text">
                     <h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1>
                     <br />
                     <div className="wordwrap">
diff --git a/webapp/src/pages/ParentOrganisation.tsx b/webapp/src/pages/ParentOrganisation.tsx
index 16f6a7ed3fcf556236936a4c994c21ff2ca03868..86a955c5e52417cc08967374b319bb6de95f5fe6 100644
--- a/webapp/src/pages/ParentOrganisation.tsx
+++ b/webapp/src/pages/ParentOrganisation.tsx
@@ -5,6 +5,7 @@ import { Organisation, FilterSelection } from "../Schema";
 import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -49,7 +50,7 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
     />
 
     return (
-        <DataPage title="NREN Parent Organisations" filter={filterNode}>
+        <DataPage title="NREN Parent Organisations" category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>
diff --git a/webapp/src/pages/Policy.tsx b/webapp/src/pages/Policy.tsx
index b6574655e8fbf2d18b822f472b689c0f9602c233..8b0590afba64001007d94a5e2a0fe2ec9779f2cf 100644
--- a/webapp/src/pages/Policy.tsx
+++ b/webapp/src/pages/Policy.tsx
@@ -5,6 +5,7 @@ import { Policy, FilterSelection } from "../Schema";
 import { createPolicyDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion';
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 interface inputProps {
     filterSelection: FilterSelection
@@ -69,7 +70,7 @@ function PolicyPage({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Policies" filter={filterNode}>
+        <DataPage title="NREN Policies" category={Sections.Policy} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>
diff --git a/webapp/src/pages/StaffGraph.tsx b/webapp/src/pages/StaffGraph.tsx
index faf4941c6c87c7e02a5314e5509844e1d2a84199..64ded0c1c0fcf620c5d6cc4ccaa6ce7532ca928a 100644
--- a/webapp/src/pages/StaffGraph.tsx
+++ b/webapp/src/pages/StaffGraph.tsx
@@ -6,6 +6,7 @@ import { NrenStaff, FilterSelection } from "../Schema";
 import { createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 ChartJS.register(
@@ -103,7 +104,7 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
 
     const text = roles ? "Roles" : "Employment";
     return (
-        <DataPage title={"NREN Staff " + text} filter={filterNode}>
+        <DataPage title={"NREN Staff " + text} category={Sections.Organisation} filter={filterNode}>
             <div className="chart-container" style={{ 'minHeight': '60vh', 'width': '60vw', }}>
                 <Bar
                     data={nrenStaffDataset}
diff --git a/webapp/src/pages/SubOrganisation.tsx b/webapp/src/pages/SubOrganisation.tsx
index 1dfa8c77263c1924105336b7c0fb80bb99577b3d..1005cf9aedec5280ee4c40f3e2be74d862d32feb 100644
--- a/webapp/src/pages/SubOrganisation.tsx
+++ b/webapp/src/pages/SubOrganisation.tsx
@@ -5,6 +5,7 @@ import { Organisation, FilterSelection } from "../Schema";
 import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
+import { Sections } from '../helpers/constants';
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -54,7 +55,7 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
     />
 
     return (
-        <DataPage title="NREN Suborganisations" filter={filterNode}>
+        <DataPage title="NREN Suborganisations" category={Sections.Organisation} filter={filterNode}>
             <Table borderless className='compendium-table'>
                 <thead>
                     <tr>
diff --git a/webapp/src/scss/layout/SectionNavigation.scss b/webapp/src/scss/layout/SectionNavigation.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1d129485bd96017a46ea113220ab92de3c5a2ee8
--- /dev/null
+++ b/webapp/src/scss/layout/SectionNavigation.scss
@@ -0,0 +1,26 @@
+@import '../abstracts/variables';
+
+.btn-nav-box {
+    --bs-btn-color: rgb(0, 63, 95);
+    --bs-btn-border-color: #6c757d;
+    --bs-btn-border-radius: none;
+
+    // active
+    --bs-btn-active-color: #fff;
+    // see https://stackoverflow.com/a/76213205 for why this syntax is necessary
+    --bs-btn-active-bg: #{$yellow-orange};
+    --bs-btn-active-border-color: #{$yellow-orange};
+
+    // hover
+    --bs-btn-hover-color: rgb(0, 63, 95);
+    --bs-btn-hover-bg: #{$yellow-orange};
+    --bs-btn-hover-border-color: #{$yellow-orange};
+
+
+    // disabled
+    --bs-btn-disabled-color: #6c757d;
+    --bs-btn-disabled-bg: transparent;
+    // --bs-btn-disabled-border-color: #6c757d;
+
+    border: 2px solid $yellow-orange;
+}
\ No newline at end of file