diff --git a/frontend/src/Components/MainPage.tsx b/frontend/src/Components/MainPage.tsx
index e2a55d661a74a458ca444e15bbd325d9a411f084..3656141cb67b33cb9f13f0a7829cd93ac4fa0fb4 100644
--- a/frontend/src/Components/MainPage.tsx
+++ b/frontend/src/Components/MainPage.tsx
@@ -18,7 +18,7 @@ export const PageContext = React.createContext({
 
 class MainPage extends React.Component<props, state> {
 
-    state = {currentPage: 1, totalPages: 11}; // Index of which page to render. 0 is the landing page
+    state = {currentPage: 0, totalPages: 8}; // Index of which page to render. 0 is the landing page
 
     determineRender() { // Decides what page will be rendered
         return this.state.currentPage === 0 ? <LandingPage/> :
diff --git a/frontend/src/Components/usePoetry.tsx b/frontend/src/Components/usePoetry.tsx
index 16c76029b31289d39fec88790ebc7efbd838d7ab..ff0a69c2d9a1062bac5083715b1902748047d6ec 100644
--- a/frontend/src/Components/usePoetry.tsx
+++ b/frontend/src/Components/usePoetry.tsx
@@ -8,9 +8,6 @@ const poets = [
   "William Morris",
   "Sidney Lanier",
   "Robert Herrick",
-  "Robert Burns",
-  "Edward Thomas",
-  "Richard Crashaw",
 ];
 
 type dataResponse = {
diff --git a/frontend/src/SVGs.tsx b/frontend/src/SVGs.tsx
index 1338ecdf69d0b72a4a388ab473b27fb3f0667760..86823922041c387e04a9825ead707a10bb2940aa 100644
--- a/frontend/src/SVGs.tsx
+++ b/frontend/src/SVGs.tsx
@@ -1,35 +1,18 @@
 import React from "react";
+import {ReactComponent as SVG1} from './SVG/svg1.svg';
+import {ReactComponent as SVG2} from "./SVG/svg2.svg";
+import {ReactComponent as SVG3} from "./SVG/svg3.svg";
+import {ReactComponent as SVG4} from "./SVG/svg4.svg";
+import {ReactComponent as SVG5} from "./SVG/svg5.svg";
+import {ReactComponent as SVG6} from "./SVG/svg6.svg";
+import {ReactComponent as SVG7} from "./SVG/svg7.svg";
 
 export default [ // Collection of Artworks that will be displayed
-  <svg>
-    <rect width={"200"} height={80} fill={"blue"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"red"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"pink"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"black"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"brown"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"purple"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"yellow"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"green"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"gray"} />
-  </svg>,
-  <svg viewBox={"0 0 200 80"}>
-    <rect width={"200"} height={80} fill={"teal"} />
-  </svg>,
-  // TODO: ADD SVGS IN HERE
+    <SVG1/>,
+    <SVG2/>,
+    <SVG3/>,
+    <SVG4/>,
+    <SVG5/>,
+    <SVG6/>,
+    <SVG7/>,
 ];
diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
index fe3e4debcb767c7f738dd2bdfc87a86cc865c171..fc546eb765e61f36d74463c5e7939fdede2fd2ab 100644
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@@ -2,4 +2,10 @@
 declare module '*.mp3' {
     const src: string;
     export default src;
+}
+declare module '*.svg' {
+    import React = require('react');
+    export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+    const src: string;
+    export default src;
 }
\ No newline at end of file