diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
index 3e7ce432e5403e851bb716a2a275357b7f8b18c4..cde5bf05c25ef5bacde28129f90f84334a838cc4 100644
--- a/frontend/src/Components/NavButton.tsx
+++ b/frontend/src/Components/NavButton.tsx
@@ -1,6 +1,8 @@
 import React, {useContext} from 'react';
 import usePoetry from "./usePoetry";
 import {PageContext} from "./MainPage";
+import leftarrow from "../Media/left-arrow.png";
+import rightarrow from "../Media/right-arrow.png";
 
 type props = {
   direction: string;
@@ -16,8 +18,13 @@ const NavButton = (props: props) => {
   };
 
   return (
-    <button onClick={onClick}>{props.direction}</button>
+    <img
+      src={props.direction === "right" ? rightarrow : leftarrow}
+      style={{ width: '4rem', height: '4rem' }}
+      onClick={onClick}
+    />
+    // <button onClick={onClick}>{props.direction}</button>
   )
 };
 
-export default NavButton;
\ No newline at end of file
+export default NavButton;
diff --git a/frontend/src/Media/left-arrow.png b/frontend/src/Media/left-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b01afd0f7165095251c072072e07ea59671d357
Binary files /dev/null and b/frontend/src/Media/left-arrow.png differ
diff --git a/frontend/src/Media/right-arrow.png b/frontend/src/Media/right-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..91c3d80fc3340c26c907ffb1d5c85c328af86c9a
Binary files /dev/null and b/frontend/src/Media/right-arrow.png differ