diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index 8532d8e84c9296845c1842191f663ecd9dc8746b..dfeae6bed1eb55b480a7138b4e3488d1f48f698a 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/frontend/src/Components/ArtPage.tsx
@@ -8,7 +8,6 @@ import '../Style/ArtPage.css';
 
 type props = {
     pageId: number; // The id of the page
-    changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
 }
 
 type options = { [key: string]: string };
@@ -45,10 +44,10 @@ class ArtPage extends React.Component<props, state> {
                 </OptionsContext.Provider>
                 <ExhibitionPiece artId={this.props.pageId}/>
                 <div className={'navbutton left'}>
-                    <NavButton changePage={this.props.changePage} direction={"left"}/>
+                    <NavButton direction={"left"}/>
                 </div>
                 <div className={'navbutton right'}>
-                    <NavButton changePage={this.props.changePage} direction={"right"}/>
+                    <NavButton direction={"right"}/>
                 </div>
             </div>
         );
diff --git a/frontend/src/Components/FavoriteButton.tsx b/frontend/src/Components/FavoriteButton.tsx
index c926277353263a8bd0265d4213396e86c2d57404..9781ab80a769a94cc5e7fbde1276c8edc1e8b006 100644
--- a/frontend/src/Components/FavoriteButton.tsx
+++ b/frontend/src/Components/FavoriteButton.tsx
@@ -2,6 +2,6 @@ import React from 'react';
 
 const FavoriteButton = () => {
   return <div>FavoriteButton</div>
-}
+};
 
 export default FavoriteButton;
\ No newline at end of file
diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index 787ff253da9ef00222710907c4bd67f3c6700d2a..d78f4270fc9446f5d487d7fbbd20662a72827873 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/frontend/src/Components/LandingPage.tsx
@@ -3,7 +3,6 @@ import NavButton from './NavButton';
 import "../Style/LandingPage.css"
 
 type props = { // Typescript definitions for the arguments received via props
-  changePage: (arg0: boolean) => void; // A function that takes a bool and returns void
 }
 
 type state = { // Typescript definitions for the state variables of the class
@@ -34,10 +33,10 @@ class LandingPage extends React.Component<props, state> {
         <p className={'welcome-p'}>Welcome to this interactive gallery! In here you will find unique art pieces, consisting of a quote and SVG. If you turn up your volume you may hear some wonderful tunes to accompony you during the viewing. You can change settings to get your desired look! You can also save these settings for future appretiation of the art pieces.
         </p>
         <div className={'navbutton left'}>
-          <NavButton direction={"left"} changePage={this.props.changePage} />
+          <NavButton direction={"left"} />
         </div>
         <div className={'navbutton right'}>
-          <NavButton direction={"right"} changePage={this.props.changePage} />
+          <NavButton direction={"right"} />
         </div>
       </div>
     );
diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index b30fd8bbeb17373352a4500b09d914b69039946d..e0c3e1ed2c5a1cf79e4add601cf8a79f21fe165f 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -4,44 +4,47 @@ import ExhibitionPiece from './ExhibitionPiece';
 import LandingPage from './LandingPage';
 import ArtPage from './ArtPage';
 
-type props = {
-
-}
+type props = {}
 
 type state = {
-  currentPage: number,
-  totalPages: number
+    currentPage: number,
+    totalPages: number
 }
 
+export const PageContext = React.createContext((arg0: boolean) => {
+});
+
 class MainPage extends React.Component<props, state> {
 
-  state = { currentPage: 1, totalPages: 11 }; // Index of which page to render. 0 is the landing page
-
-  determineRender() { // Decides what page will be rendered
-    return this.state.currentPage == 0 ? <LandingPage changePage={this.changePage}/> :
-      <ArtPage changePage={this.changePage} pageId={this.state.currentPage}/>;
-  }
-
-  changePage = (increment: boolean) => {
-    const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
-      if (newPage == -1)
-          this.setState({ currentPage: this.state.totalPages -1 }); // Negative modulo not supported
-      else
-          this.setState({ currentPage: newPage % this.state.totalPages }); // Go to the new page or loop around if you've hit last page
-  };
-
-  render() {
-    return (
-      <div className={'main-page'}>
-        <div className={'header'}>
-          Header
-        </div>
-        <div className={'body'}>
-          {this.determineRender()}
-        </div>
-      </div>
-    );
-  }
+    state = {currentPage: 1, totalPages: 11}; // Index of which page to render. 0 is the landing page
+
+    determineRender() { // Decides what page will be rendered
+        return this.state.currentPage == 0 ? <LandingPage /> :
+            <ArtPage pageId={this.state.currentPage}/>;
+    }
+
+    changePage = (increment: boolean) => {
+        const newPage = increment ? this.state.currentPage + 1 : this.state.currentPage - 1;
+        if (newPage == -1)
+            this.setState({currentPage: this.state.totalPages - 1}); // Negative modulo not supported
+        else
+            this.setState({currentPage: newPage % this.state.totalPages}); // Go to the new page or loop around if you've hit last page
+    };
+
+    render() {
+        return (
+            <div className={'main-page'}>
+                <div className={'header'}>
+                    Header
+                </div>
+                <div className={'body'}>
+                    <PageContext.Provider value={this.changePage}>
+                        {this.determineRender()}
+                    </PageContext.Provider>
+                </div>
+            </div>
+        );
+    }
 }
 
-export default MainPage;
\ No newline at end of file
+export default MainPage;
diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
index 91ce8945d41d3613c79cfd432507a4b32fc764ce..49f14565b8720c7755b87f8d0e775e4cb7b6916f 100644
--- a/frontend/src/Components/NavButton.tsx
+++ b/frontend/src/Components/NavButton.tsx
@@ -1,16 +1,18 @@
-import React from 'react';
+import React, {useContext} from 'react';
+import usePoetry from "./usePoetry";
+import {PageContext} from "./MainPage";
 
 type props = {
-  changePage: (arg0: boolean) => void;
   direction: string;
 }
 
 const NavButton = (props: props) => {
+  const changePage = useContext(PageContext);
 
   const onClick = () => {
     const increment: boolean = props.direction == "right";
-    props.changePage(increment);
-  }
+    changePage(increment);
+  };
 
   return (
     <button onClick={onClick}>{props.direction}</button>