diff --git a/src/App.scss b/src/App.scss
index ea1fdf9..1b40fd8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -41,37 +41,23 @@ a {
   text-decoration: none;
 }
 
-body {
-  display: flex;
-}
-
+// main is the component enclosing the Home content, including a background image and the text content it will have above it.
+// The layering of the content is done with grid: main is the parent, .backrground-img and .home-content are its children
 main {
   display: grid;
-  grid-template-rows: 200vw;
-  grid-template-columns: 200vh;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
 }
 
-.backround-img {
-  // display: flex;
-  position: absolute;
-  // z-index: -5;
-  width: 200vw;
-  height: 200vh;
-  // top: 0;
-  // left: 0;
-
+.background-img {
   z-index: -2;
-  grid-area: 1 / 1 / 1 / 1;
+  grid-area: 1 / 1 / 3 / 2;
 }
 
-.testContent {
-  width: 100%;
-  grid-area: 1 / 1 / 1 / 1;
-  z-index: 1;
-}
-
-// remove this when we have actual content for our Home
-// .test-home-bg {
-//   width: 80vw;
-//   height: 80vh;
-// }
\ No newline at end of file
+.home-content {
+  color: $text-color;
+  z-index: 0;
+  grid-area: 1 / 1 / 2 / 2;
+}
\ No newline at end of file
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index 855b0f9..5114cd8 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -15,7 +15,7 @@ function Home() {
         <>
         <main>
         <DisplayBgImage />
-        <div className="testContent">
+        <div className="home-content">
         {/* Other components and content */}
             <form onSubmit={handleSubmit}>
                 <label>Enter name: 
diff --git a/src/images/DisplayBgImage.tsx b/src/images/DisplayBgImage.tsx
index a669df9..10ee7e6 100644
--- a/src/images/DisplayBgImage.tsx
+++ b/src/images/DisplayBgImage.tsx
@@ -19,17 +19,7 @@ const DisplayBgImage = () => {
         try {
             setIsLoading(true);
 
-            // const pictureData = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
-                //    test picture data for when the API requests have reached their limit:
-            const pictureData = {
-        "date": "2024-07-30",
-        "explanation": "To some, it looks like a penguin. But to people who study the universe, it is an interesting example of two big galaxies interacting. Just a few hundred million years ago, the upper NGC 2936 was likely a normal spiral galaxy: spinning, creating stars, and minding its own business.  Then it got too close to the massive elliptical galaxy NGC 2937, below, and took a dive.  Together known as Arp 142, they are featured in this new Webb infrared image, while a visible light Hubble image appears in comparison.  NGC 2936 is not only being deflected, but distorted, by this close gravitational interaction.  When massive galaxies pass near each other, gas is typically condensed from which new stars form.  A young group of stars appears as the nose of the penguin toward the right of the upper galaxy, while in the center of the spiral, bright stars together appear as an eye.  Before a billion years, the two galaxies will likely merge into one larger galaxy.   Explore Your Universe: Random APOD Generator",
-        "hdurl": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_1487.jpg",
-        "media_type": "image",
-        "service_version": "v1",
-        "title": "Arp 142: Interacting Galaxies from Webb",
-        "url": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_960.jpg"
-    }
+            const pictureData = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
 
             setMyPictureData(pictureData);
             setIsLoading(false);
@@ -53,18 +43,9 @@ const DisplayBgImage = () => {
     if (!myPictureData) return (<div>EMPTY</div>);
 
 
-    // return (
-    //     <div style={{ backgroundImage: `url(${myPictureData.hdurl})`}}>
-    //         {/* remove this when we have actual content for our Home  */}
-    //         <div className='test-home-bg'>
-    //             Current bg image: {myPictureData.hdurl}
-    //         </div>
-    //     </div>
-    // )
-
-return (
-    <img className='backgroung-img' src={myPictureData.hdurl}/>
-)
+    return (
+        <img className='background-img' src={myPictureData.hdurl} />
+    )
 
 };