diff --git a/frontend/src/Components/ArtPage.tsx b/frontend/src/Components/ArtPage.tsx
index a69be6f6d058d2e3aa83113b033df526a7a15ab0..e0f22c1e476520356b50a7780a961591c8d4f875 100644
--- a/frontend/src/Components/ArtPage.tsx
+++ b/frontend/src/Components/ArtPage.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
+import ExhibitionPiece from './ExhibitionPiece';
+import FavoriteButton from './FavoriteButton';
+import DropDown from './DropDown';
+import NavButton from './NavButton';
 
-interface props {
+;
+
+type props = {
   pageId: number; // The id of the page
 }
 
@@ -10,9 +16,16 @@ class ArtPage extends React.Component<props> {
     super(props);
   }
 
-
   render() {
-    return <div>ArtPage</div>;
+    return (
+      <div className={"artpage"}>
+        <FavoriteButton />
+        <DropDown />
+        <ExhibitionPiece artId={this.props.pageId} />
+        <NavButton />
+        <NavButton />
+      </div>
+    );
   }
 }
 
diff --git a/frontend/src/Components/DropDown.tsx b/frontend/src/Components/DropDown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce3aefc478ea38833ef0290132bdc1c3b46588de
--- /dev/null
+++ b/frontend/src/Components/DropDown.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DropDown = () => {
+  return <div>DropDown</div>
+};
+
+export default DropDown;
\ No newline at end of file
diff --git a/frontend/src/Components/ExhibitionPiece.tsx b/frontend/src/Components/ExhibitionPiece.tsx
index 9a4aab47566d133e655497d65af1a0b069e3d2c0..38ba99d0f811e4a426968284e6f379b9cefc75c8 100644
--- a/frontend/src/Components/ExhibitionPiece.tsx
+++ b/frontend/src/Components/ExhibitionPiece.tsx
@@ -1,9 +1,32 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import usePoetry from './usePoetry';
+
+const SVGs = [ // Collection of Artworks that will be displayed
+  <svg viewBox={"50 50 200 80"}>
+    <rect width={"200"} height={80} fill={"blue"} />
+  </svg>,
+  // TODO: ADD SVGS IN HERE
+]
+
+type props = {
+  artId: number;
+}
+
+const ExhibitionPiece = (props: props) => {
+  const [title, poem, author] = usePoetry(props.artId-1); // Calls on the usePoetry hook to retrieve the poem corresponding to Id
 
-const ExhibitionPiece = () => {
   return (
     <div className={'exhibition-piece'}>
-      Exhib Piece
+      <div>
+        {title}
+        {author}
+      </div>
+      <div>
+        {SVGs[props.artId-1]}
+      </div>
+      <div>
+        {poem}
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/Components/FavoriteButton.tsx b/frontend/src/Components/FavoriteButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c926277353263a8bd0265d4213396e86c2d57404
--- /dev/null
+++ b/frontend/src/Components/FavoriteButton.tsx
@@ -0,0 +1,7 @@
+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/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index 17c5939067e30d47c0a816c9d6b84340f8c415d6..b3f81d9d176285b22ac5879edb2babb5ef7a9ef0 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -7,7 +7,7 @@ import ArtPage from './ArtPage';
 
 class MainPage extends React.Component {
 
-  state = {currentPage: 0}; // Index of which page to render. 0 is the landing page
+  state = {currentPage: 1}; // Index of which page to render. 0 is the landing page
 
   determineRender() {
     return this.state.currentPage == 0 ? <LandingPage /> : <ArtPage pageId={this.state.currentPage} />
diff --git a/frontend/src/Components/NavButton.tsx b/frontend/src/Components/NavButton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2265f92a8a7710ca43bf9b2d34c8d45f4ab04d6e
--- /dev/null
+++ b/frontend/src/Components/NavButton.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const NavButton = () => {
+  return <div>NavButton</div>
+};
+
+export default NavButton;
\ No newline at end of file
diff --git a/frontend/src/Components/usePoetry.tsx b/frontend/src/Components/usePoetry.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f02531db15f0090a7f51a36ef4efe4e1d332e47f
--- /dev/null
+++ b/frontend/src/Components/usePoetry.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+
+const poets = [
+  "Walt Whitman",
+  "William Shakespeare",
+  "Alexander Pope",
+  "Edgar Allan Poe",
+  "Emily Bronte",
+  "John Keats",
+  "Oscar Wilde",
+  "William Wordsworth",
+  "Charlotte Bronte",
+  "Eliza Cook"
+]
+
+type dataResponse = {
+  title: string;
+  author: string;
+  lines: Array<string>;
+  linecount: number;
+}
+
+const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. Enter id and it will retrieve the corresponding poem
+  const [poem, setPoem] = useState<Array<string> | null>(null); // The poem itself. Initialized as null
+  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState("");
+
+  useEffect(() => { // Will run every time the Id changes
+    fetch(`https://poetrydb.org/author,poemcount,linecount/${poets[poetId]};1;4`) // GET request to poetryDb
+      .then((response) => response.json()) // Convert response to json
+      .then((data: Array<dataResponse>) => {
+        setPoem(data[0].lines); // Update the state
+        setTitle(data[0].title);
+        setAuthor(data[0].author);
+      });
+  }, [poetId]);
+
+  return [title, poem, author];
+}
+export default usePoetry;
\ No newline at end of file