diff --git a/src/Pages/ProductPage/ProductPage.css b/src/Pages/ProductPage/ProductPage.css
index 4ab0d24..55995ed 100644
--- a/src/Pages/ProductPage/ProductPage.css
+++ b/src/Pages/ProductPage/ProductPage.css
@@ -1,14 +1,42 @@
-.Product {
+.App1 {
+    min-height: 100vh;
+    background-color: rgb(211, 254, 255);
+    font-family: 'Times New Roman', Times, serif;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+  .panel1 {
+    font-family: 'Times New Roman', Times, serif;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+
+.header1{
     min-height: 10vh;
+    background-color: aqua;
+    font-family: 'Times New Roman', Times, serif;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+.header2{
+    position: fixed;
+    top: 110px;
+    left: 750px;
+    height: 500px;
+    width: 500px;
+    background-color: rgb(189, 207, 209);
+    font-family: 'Times New Roman', Times, serif;
+    margin: 0;
+    padding: 0;
     text-align: left;
-    background-image: url(../../images/oceanimage.jpg);
-    background-blend-mode:lighten;
-    background-position: center;
-    background-size:cover;
-    opacity:1;
-    color: black;
-    font-size:x-large;
-    margin: none;
-    border-radius: none;
-    padding: 10%;
+}
+
+button{
+    position: fixed;
+    left: 550px;
+    top: 550px;
 }
\ No newline at end of file
diff --git a/src/Pages/ProductPage/ProductPage.js b/src/Pages/ProductPage/ProductPage.js
index 8dfaf23..c9909fc 100644
--- a/src/Pages/ProductPage/ProductPage.js
+++ b/src/Pages/ProductPage/ProductPage.js
@@ -2,10 +2,24 @@ import "./ProductPage.css"
 
 function Product(){
     return(
-        <div className="Product">
-            <b>PRODUCT NAME HERE</b>
-            <button>Add to Cart</button>
-        </div>
+            <div>
+                <div className = "App1">
+                    <div className = "header1">
+                        <b>WorldWide Frames</b> - <i>See A Better World</i>
+                    </div>
+                    {/* create an overall panel, with header 2, the image, and the button inside of it */}
+                    <div className = "panel1">
+                        <div className = "header2">    
+                            <header2>
+                                <p>Name: </p>
+                                <p>Manufacturer: </p>
+                                <p> Cost: </p>
+                            </header2>
+                        </div>
+                        <button>Add to Cart</button>
+                    </div>
+                </div>
+            </div>
     );
 }