diff --git a/frontend/src/Components/App.css b/frontend/src/Components/App.css
new file mode 100644
index 0000000000000000000000000000000000000000..03afaff88b3456b663e262773e1361ec05c3943a
--- /dev/null
+++ b/frontend/src/Components/App.css
@@ -0,0 +1,4 @@
+body {
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/Components/App.tsx b/frontend/src/Components/App.tsx
index 2cc3e6f813f6e46d2caddb896ccee2bdbc8f3e5b..94ada66c9f29705c138c4cff1732a31f24e612b0 100644
--- a/frontend/src/Components/App.tsx
+++ b/frontend/src/Components/App.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
+import MainPage from './MainPage';
+import './App.css';
 
 const App = () => {
   return (
     <div className="App">
-      <div>Test</div>
+      <MainPage />
     </div>
   );
 };
diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a69be6f6d058d2e3aa83113b033df526a7a15ab0
--- /dev/null
+++ b/frontend/src/Components/ArtPage.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+interface props {
+  pageId: number; // The id of the page
+}
+
+class ArtPage extends React.Component<props> {
+
+  constructor(props: props) {
+    super(props);
+  }
+
+
+  render() {
+    return <div>ArtPage</div>;
+  }
+}
+
+export default ArtPage;
\ No newline at end of file
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9a4aab47566d133e655497d65af1a0b069e3d2c0
--- /dev/null
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ExhibitionPiece = () => {
+  return (
+    <div className={'exhibition-piece'}>
+      Exhib Piece
+    </div>
+  );
+};
+
+export default ExhibitionPiece;
\ No newline at end of file
diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..52fc89272e3af4860bc05966fd84f5b1db6dbc50
--- /dev/null
+++ b/frontend/src/Components/LandingPage.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+class LandingPage extends React.Component {
+
+  render() {
+    return <div>LandingPage</div>;
+  }
+}
+
+export default LandingPage;
\ No newline at end of file
diff --git a/frontend/src/Components/MainPage.css b/frontend/src/Components/MainPage.css
new file mode 100644
index 0000000000000000000000000000000000000000..cd7462d682c8e87296400cfb6376e802282a1d3a
--- /dev/null
+++ b/frontend/src/Components/MainPage.css
@@ -0,0 +1,17 @@
+.main-page {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr 15fr 1fr;
+    height: 100vh;
+}
+
+.header {
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+    background-color: grey;
+}
+
+.body {
+    grid-row: 2 / 3;
+    grid-column: 1 / -1;
+}
\ No newline at end of file
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..17c5939067e30d47c0a816c9d6b84340f8c415d6
--- /dev/null
+++ b/frontend/src/Components/MainPage.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import './MainPage.css';
+import ExhibitionPiece from './ExhibitionPiece';
+import LandingPage from './LandingPage';
+import ArtPage from './ArtPage';
+
+
+class MainPage extends React.Component {
+
+  state = {currentPage: 0}; // Index of which page to render. 0 is the landing page
+
+  determineRender() {
+    return this.state.currentPage == 0 ? <LandingPage /> : <ArtPage pageId={this.state.currentPage} />
+  }
+
+  render() {
+    return (
+      <div className={'main-page'}>
+        <div className={'header'}>
+          Header
+        </div>
+        <div className={'body'}>
+          {this.determineRender()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MainPage;
\ No newline at end of file