diff --git a/Changelog.md b/Changelog.md
index 3b9f6c77d71fea2450a950e404ed3dcf6d5875e5..dd3e950ad1c2c402b132b10649786512957d0142 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -1,6 +1,14 @@
 # Changelog
 
 All notable changes to this project will be documented in this file.
+## [0.5] - 2022-12-21
+- Final layout (WIP)
+
+## [0.4] - 2022-12-06
+
+
+## [0.3] - 2022-12-06
+
 
 ## [0.2] - 2022-11-22
  - COMP-48: Added SQLAlchemy link to the survey database, including instructions to create the database locally
diff --git a/compendium_v2/static/images/section_data_large.png b/compendium_v2/static/images/section_data_large.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3b730064250343dbe5bffadc490b24ed58456f8
Binary files /dev/null and b/compendium_v2/static/images/section_data_large.png differ
diff --git a/compendium_v2/static/images/section_reports_large.png b/compendium_v2/static/images/section_reports_large.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ad1ee43395ec3702bdcf8467f75a33f489d310b
Binary files /dev/null and b/compendium_v2/static/images/section_reports_large.png differ
diff --git a/compendium_v2/static/index.html b/compendium_v2/static/index.html
index 3b2df07a811eb6950c6db07152ac9514b0f5e4b3..f156b8c924ab359ea95cd646e8dfb97a64f64b80 100644
--- a/compendium_v2/static/index.html
+++ b/compendium_v2/static/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8"/>
+  <link rel="stylesheet" id="herald-fonts-css" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C600&amp;subset=latin%2Clatin-ext&amp;ver=2.5" type="text/css" media="all">
 </head>
 <body>
   <div id="root"></div>
diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
index 0f1fd9be3a912865ffc34b125d94ae807529b339..8be8487c76ff625d3fd83aff61cc72f914e0b6ba 100644
--- a/webapp/src/App.tsx
+++ b/webapp/src/App.tsx
@@ -1,31 +1,29 @@
 import React, {ReactElement} from 'react';
-import AnnualReport from './pages/AnnualReport';
-import DataAnalysis from './pages/DataAnalysis';
-import Navigation from './Navigation';
-import About from './pages/About';
 import Landing from "./pages/Landing";
-import {BrowserRouter as Router,Switch, Route} from 'react-router-dom'
+import ExternalPageNavBar
+from "./components/global/ExternalPageNavBar";
 
 
-
-// const api_url = window.location.origin+'/';
-
-// console.log(api_url)
-
 function App(): ReactElement {
     return (
-      <Router>
-        <Navigation/>
-          <Switch>
-            <Route exact path="/about" component={About} />
-            <Route exact path='/analysis' component={DataAnalysis} />
-            <Route exact path="/report" component={AnnualReport} />
-            <Route path="*" component={Landing} />
-        </Switch>
+        <div>
+
+            <ExternalPageNavBar/>
+            <Landing/>
 
-      </Router>
-      
-      );
-    }
+        </div>
+        // <Router>
+        //   <Navigation/>
+        //     <Switch>
+        //       <Route exact path="/about" component={About} />
+        //       <Route exact path='/analysis' component={DataAnalysis} />
+        //       <Route exact path="/report" component={AnnualReport} />
+        //       <Route path="*" component={Landing} />
+        //   </Switch>
+        //
+        // </Router>
+        //
+    );
+}
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/webapp/src/components/global/ExternalPageFooter.tsx b/webapp/src/components/global/ExternalPageFooter.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..158da048d19411f1ed2dfe6216899a846a40ae89
--- /dev/null
+++ b/webapp/src/components/global/ExternalPageFooter.tsx
@@ -0,0 +1,9 @@
+import React, {ReactElement} from "react";
+
+function ExternalPageFooter(): ReactElement {
+    return (<div>
+
+    </div>);
+}
+
+export default ExternalPageFooter
\ No newline at end of file
diff --git a/webapp/src/components/global/ExternalPageNavBar.tsx b/webapp/src/components/global/ExternalPageNavBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f915aafab4d6d4827ef9115bf4e0687e34adaf2b
--- /dev/null
+++ b/webapp/src/components/global/ExternalPageNavBar.tsx
@@ -0,0 +1,39 @@
+import React, {ReactElement} from "react";
+import {Container, Row, Col} from "react-bootstrap";
+import GeantLogo from "../../images/geant_logo_f2020_new.svg";
+
+/**
+ * NavBar
+ *
+ * This NavBar is only to be used when doing development, as the main site will run inside an iframe with
+ * the correct menu around it
+ */
+function ExternalPageNavBar(): ReactElement {
+    return (
+        <div className={'external-page-nav-bar'}>
+
+            <Container>
+                <Row>
+                    <Col>
+                        <img src={GeantLogo}/>
+                        <ul>
+                            <li><a>NETWORK</a></li>
+                            <li><a>SERVICES</a></li>
+                            <li><a>COMMUNITY</a></li>
+                            <li><a>TNC</a></li>
+                            <li><a>PROJECTS</a></li>
+                            <li><a>CONNECT</a></li>
+                            <li><a>IMPACT</a></li>
+                            <li><a>CAREERS</a></li>
+                            <li><a>ABOUT</a></li>
+                            <li><a>NEWS</a></li>
+                            <li><a>RESOURCES</a></li>
+                        </ul>
+                    </Col>
+                </Row>
+            </Container>
+        </div>
+    );
+}
+
+export default ExternalPageNavBar;
\ No newline at end of file
diff --git a/webapp/src/images/geant_logo_f2020_new.svg b/webapp/src/images/geant_logo_f2020_new.svg
new file mode 100644
index 0000000000000000000000000000000000000000..31bfead62b052812096b5a9c79cf782ce330a87c
--- /dev/null
+++ b/webapp/src/images/geant_logo_f2020_new.svg
@@ -0,0 +1,16 @@
+<svg width="79" height="35" viewBox="0 0 79 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_101_15)">
+<path d="M15.9 17.8C16.5 17.3 17 17.1 17.4 17.1C18.4 17.1 18.7 17.8 18.7 18.2C18.5 18.3 14.2 19.7 14 19.8C13.9 19.7 13.9 19.6 13.8 19.6C14 19.4 15.9 17.8 15.9 17.8Z" fill="white" fill-opacity="0.85"/>
+<path d="M0 27C0 31.8 2.1 34.3 6.3 34.3C9.1 34.3 10.8 33.1 10.8 33L10.9 32.9V26.2H5.2V28.1C5.2 28.1 8.1 28.1 8.6 28.1C8.6 28.6 8.6 31.6 8.6 31.9C8.3 32.1 7.4 32.4 6.2 32.4C3.7 32.4 2.5 30.6 2.5 27C2.5 24.9 3.1 22.4 5.9 22.4C7.8 22.4 8.5 23.5 8.5 24.5V24.8H11.1V24.5C11.1 22.1 9 20.5 5.9 20.5C2.2 20.5 0 22.9 0 27Z" fill="white" fill-opacity="0.85"/>
+<path d="M20.2 20.7H12.6V34.1H20.7V32.2C20.7 32.2 15.5 32.2 14.9 32.2C14.9 31.7 14.9 28.5 14.9 28C15.5 28 20.2 28 20.2 28V26.1C20.2 26.1 15.5 26.1 14.9 26.1C14.9 25.6 14.9 23 14.9 22.5C15.5 22.5 20.5 22.5 20.5 22.5V20.6H20.2V20.7Z" fill="white" fill-opacity="0.85"/>
+<path d="M54.5 20.7H42.9C42.9 20.7 42.9 28.7 42.9 30.6C42 29 37.2 20.7 37.2 20.7H34.5V34.1H36.8C36.8 34.1 36.8 26.1 36.8 24.2C37.7 25.8 42.5 34.1 42.5 34.1H45.2C45.2 34.1 45.2 23.2 45.2 22.6C45.7 22.6 48.4 22.6 48.9 22.6C48.9 23.2 48.9 34.1 48.9 34.1H51.3C51.3 34.1 51.3 23.2 51.3 22.6C51.8 22.6 54.9 22.6 54.9 22.6V20.7H54.5V20.7Z" fill="white" fill-opacity="0.85"/>
+<path d="M28.9 20.7H28.7H26.4L21.4 34.1H23.8C23.8 34.1 25.1 30.6 25.3 30.2C25.7 30.2 29.8 30.2 30.2 30.2C30.3 30.6 31.7 34.1 31.7 34.1H34L28.9 20.7ZM25.9 28.3C26.1 27.6 27.3 24.4 27.7 23.3C28.1 24.4 29.2 27.6 29.5 28.3C28.7 28.3 26.6 28.3 25.9 28.3Z" fill="white" fill-opacity="0.85"/>
+<path d="M77 8C68.2 -2.9 32.6 12.5 23 16.5C22.3 16.8 21.4 16.7 20.9 15.7C21.3 16.7 22.1 17.1 23.1 16.7C35.8 11.6 66.5 0.600002 74.2 10.7C77.7 15.3 76.7 20.9 72.9 28.8C72.7 29.1 72.6 29.4 72.6 29.4C72.6 29.4 72.6 29.4 72.6 29.5C72.6 29.5 72.6 29.5 72.6 29.6C72.3 30.1 71.9 30.3 71.6 30.4C72 30.4 72.5 30.2 72.9 29.6C73 29.5 73.1 29.3 73.3 29C78.7 19.5 80.7 12.5 77 8Z" fill="white" fill-opacity="0.85"/>
+<path d="M70.3 29.9C70.2 29.8 68.6 28.4 67 26.9C58.7 19 33.4 -5.3 22.4 1.1C19.3 2.9 18.8 8.2 20.7 15.2C20.7 15.3 20.8 15.4 20.8 15.5C21 16.2 21.5 16.7 22.2 16.7C21.7 16.6 21.3 16.2 21.1 15.7C21.1 15.6 21 15.5 21 15.5C21 15.4 20.9 15.3 20.9 15.1C20.9 15 20.9 14.9 20.8 14.9C19.8 9 21 5.1 23.4 3.5C32.3 -2.5 53.5 15.8 64.2 25C66.6 27.1 69.4 29.5 70.2 30.1C71.4 31 72.4 30 72.7 29.5C72.3 30.1 71.3 30.7 70.3 29.9Z" fill="white" fill-opacity="0.85"/>
+</g>
+<defs>
+<clipPath id="clip0_101_15">
+<rect width="78.9" height="34.3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/webapp/src/images/section_data_large.png b/webapp/src/images/section_data_large.png
new file mode 100644
index 0000000000000000000000000000000000000000..33db5101e4ebfa25ab2e7fbb9d6b41f361018a08
Binary files /dev/null and b/webapp/src/images/section_data_large.png differ
diff --git a/webapp/src/images/section_reports_large.png b/webapp/src/images/section_reports_large.png
new file mode 100644
index 0000000000000000000000000000000000000000..a87845b5c8a4a7589c1d95ae6c3e64c26e68df9f
Binary files /dev/null and b/webapp/src/images/section_reports_large.png differ
diff --git a/webapp/src/styles.scss b/webapp/src/styles.scss
index 85b5b785a869758b7b4b78c6c29b2282d0417432..76aced2f548085f402320042f9fa75f2a1bbb7c5 100644
--- a/webapp/src/styles.scss
+++ b/webapp/src/styles.scss
@@ -1,17 +1,17 @@
 table {
-    min-width: 650px;
+  min-width: 650px;
 }
 
 thead {
-    background-color: lightgray;
+  background-color: lightgray;
 }
 
 .state_true {
-    background-color: lightgreen;
+  background-color: lightgreen;
 }
 
 .state_false {
-    background-color: red;
+  background-color: red;
 }
 
 $border-color: #064c6e !default;
@@ -25,22 +25,23 @@ $queue_link_hover: #ffffff !default;
   padding-bottom: 15px;
   padding-bottom: 15px;
 }
+
 $footer-height: 75px !default;
 
-.footer-img{
+.footer-img {
   width: 55px;
-  height:38px
+  height: 38px
 }
 
 .footer {
   margin-top: 8px;
   background-color: #064c6e;
   font-size: 8px;
-  height:75px;
+  height: 75px;
   color: black;
-  width:100%;
-  padding:15px;
-  clear:both;
+  width: 100%;
+  padding: 15px;
+  clear: both;
 }
 
 .footer-text {
@@ -52,7 +53,7 @@ $footer-height: 75px !default;
   padding-left: 55px;
 }
 
-.header-naviagtion{
+.header-naviagtion {
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -61,10 +62,36 @@ $footer-height: 75px !default;
   color: white
 }
 
-.nav-links{
+.nav-links {
   width: 50%;
   display: flex;
-  justify-content:  space-around;
+  justify-content: space-around;
   align-items: center;
   list-style: none;
+}
+
+.external-page-nav-bar {
+  background-color: #003753;
+  color: #b0cde1;
+  padding-top: 10px;
+
+  img {
+    float: left;
+  }
+
+  ul {
+    list-style: none;
+    float: left;
+    margin-bottom: 0;
+
+    li {
+      float: left;
+      padding: 10px;
+      a {
+        font-family: "Open Sans";
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/webapp/src/types/images.d.ts b/webapp/src/types/images.d.ts
index 3e9abb64721e6abeacd732e21aaa1bd4eac1b839..28764f8fb2d81da027a78890e03fb6cd32aeb6fd 100644
--- a/webapp/src/types/images.d.ts
+++ b/webapp/src/types/images.d.ts
@@ -1 +1,2 @@
-declare module '*png';
\ No newline at end of file
+declare module '*png';
+declare module '*svg';
\ No newline at end of file