diff --git a/frontend/src/components/InfoBox.js b/frontend/src/components/InfoBox.js
new file mode 100644
index 0000000..2e72cb0
--- /dev/null
+++ b/frontend/src/components/InfoBox.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const InfoBox = ({ backColor, heading, paragraphDescription, children, leftChange }) =>
+(
+    <div>
+        <div style={{ backgroundColor: backColor, width: "50%", height: "200px", color: "white", textAlign: "center", marginLeft: leftChange }}>
+            <h1> {heading} </h1>
+            <p> {paragraphDescription}</p>
+            {children}
+        </div>
+    </div>
+);
+
+export { InfoBox };
diff --git a/frontend/src/pages/LandingPage.js b/frontend/src/pages/LandingPage.js
index e83df05..0d7f66d 100644
--- a/frontend/src/pages/LandingPage.js
+++ b/frontend/src/pages/LandingPage.js
@@ -1,16 +1,14 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import React from "react";
+import { InfoBox } from "../components/InfoBox";
 
 import "../styles/LandingPage.css";
 
 export default function LandingPage() {
   return (
     <div>
-      {/* This is the homepage of your app. You should have a jumbotron, a button 
-      leading to GalleryPage and another button leading to CreateObjectPage. */}
-      <div style={{ backgroundColor: "#64BEFD", width: "50%", height: "200px", marginLeft: "0px", color: "white", textAlign: "center" }}>
-        <h1>Hello world!</h1>
-      </div>
+      <InfoBox backColor="#64BEFD" heading="About This " paragraphDescription="What a cool website this is!! I can show you all the memes I love!" ></InfoBox>
+      <InfoBox backColor="#00008B" heading="About The Creator " paragraphDescription="I like to meme!" leftChange="300px"></InfoBox>
+      <InfoBox backColor="#64BEFD" heading="Iconic Memes and Vines" paragraphDescription="Meme! Meme! Meme!" leftChange="600px"></InfoBox>
     </div>
   );
 }