diff --git a/public/produce.jpg b/public/produce.jpg
index b10b25d..8a17226 100644
Binary files a/public/produce.jpg and b/public/produce.jpg differ
diff --git a/public/produce_2.jpg b/public/produce_2.jpg
new file mode 100644
index 0000000..9a91f50
Binary files /dev/null and b/public/produce_2.jpg differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 17a319d..cfa6533 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -18,14 +18,31 @@ export default function Home() {
           {/* Referral Form */}
           <ReferralForm />
         </div>
-        <div className={styles.heroImage}>
-          <Image src="/produce.jpg" alt="Fresh Produce" width={600} height={600} layout="intrinsic" />
+        <div className={styles.heroImageWrapper}>
+          <Image
+            src="/produce.jpg"
+            alt="Fresh Produce"
+            fill
+            className={styles.heroImage}
+            style={{ objectFit: "cover" }}
+          />
         </div>
       </section>
 
       {/* Why Refer & Referral History */}
       <section className={styles.referralSection}>
         <div className={styles.leftSection}>
+          <div className={styles.produceImageWrapper}>
+            <Image
+              src="/produce_2.jpg"
+              alt="Fresh Produce"
+              fill
+              className={styles.produceImage}
+              style={{ objectFit: "cover" }}
+            />
+          </div>
+        </div>
+        <div className={styles.rightSection}>
           <h2>Why Should I Refer?</h2>
           <p>
             Each new member brings fresh ideas, helps us offer more events, and keeps our shelves stocked with an even
@@ -37,9 +54,6 @@ export default function Home() {
             bottles of wine, engraved bricks, and more.
           </p>
         </div>
-        <div className={styles.rightSection}>
-          <h2 className={styles.referralHistoryTitle}>Referral History</h2>
-        </div>
       </section>
     </main>
   );
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
index 9138a74..c03d132 100644
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
@@ -1,15 +1,13 @@
-/* Header.module.css */
 .header {
   width: 100%;
-  height: 8vw; /* Adjust height as needed */
+  height: 8vw;
   background-color: white;
   display: flex;
   align-items: center;
-  justify-content: flex-start; /* Align logo to the left */
-  /* padding: 0 30px; Adjust horizontal padding as needed */
+  justify-content: flex-start;
   padding: 5vh;
   padding-bottom: 5vh;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Optional, for a subtle shadow */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .logoContainer {
@@ -19,6 +17,29 @@
 
 .logo {
   height: 4vw;
-  min-height: 60px; /* Adjust logo size as needed */
+  min-height: 60px;
   width: auto;
 }
+
+@media (max-width: 768px) {
+  .header {
+    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("/produce.jpg");
+    height: auto;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: unset;
+    padding: 60px 20px;
+    box-shadow: none;
+  }
+
+  .logo {
+    height: auto;
+    max-height: 50px;
+    width: auto;
+  }
+
+  .logoContainer {
+    width: 100%;
+  }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index c4b1d40..0c62927 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -8,7 +8,7 @@ const Header: React.FC = () => {
       <div className={styles.logoContainer}>
         {/* <img src="/logo.jpg" alt="Logo" className={styles.logo} /> */}
         <Image
-          src="/logo.jpg"
+          src="/assets/logo.png"
           alt="Logo"
           className={styles.logo}
           width={120} // Adjust based on your needs
diff --git a/src/components/ReferralForm/ReferralForm.module.css b/src/components/ReferralForm/ReferralForm.module.css
index 33e1931..8fb87e8 100644
--- a/src/components/ReferralForm/ReferralForm.module.css
+++ b/src/components/ReferralForm/ReferralForm.module.css
@@ -1,15 +1,14 @@
 /* Container styling */
 .container {
   width: 100%;
-  max-width: 800px; /* Adjusted max-width to fit more input fields */
-  /* padding: 0.2rem; */
+  max-width: 800px;
   border: none;
   border-radius: 1rem;
-  box-sizing: border-box; /* Ensure padding is included in the container size */
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: flex-start; /* Align items to the start */
+  align-items: flex-start;
 }
 
 /* Title styling */
@@ -25,17 +24,17 @@
 .form {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 1.75rem;
   width: 100%;
 }
 
 /* Input group layout */
-.inputGroup {
+.referrerEmail {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem; /* Reduced gap between input fields */
-  align-items: flex-start; /* Align items to the left */
-  margin-left: -0.4rem; /* Remove left margin */
+  gap: 0.5rem;
+  align-items: flex-start;
+  width: 100%;
 }
 
 /* Label styling */
@@ -48,12 +47,9 @@
 
 /* Input field styling */
 .input {
-  display: flex;
-  width: 30%; /* Adjusted width to fit more input fields */
+  flex: 1;
+  min-width: 0; /* This ensures inputs can shrink below their content size */
   padding: 12px 18px;
-  align-items: center;
-  gap: 10px;
-  flex-shrink: 0;
   border-radius: 8px;
   border: 2px solid var(--brown, #523018);
   background: #fff;
@@ -79,6 +75,7 @@
     background-color 0.2s,
     transform 0.1s;
   text-align: center;
+  align-self: flex-end;
 }
 
 /* Button hover and active effects */
@@ -105,37 +102,34 @@
   cursor: pointer;
 }
 
-/* Delete button */
+/* Prospect container styling */
 .prospectContainer {
   position: relative;
-  /* padding: 1px; */
-  border: none;
-  border-radius: 0px;
-  margin-bottom: 1vh;
   display: flex;
-  flex-direction: row; /* Changed to row to align input fields horizontally */
-  gap: 0.2rem; /* Reduced gap between input fields */
-  align-items: center; /* Align items to the center */
-  /*margin-left: -0.5rem; /* Remove left margin */
+  width: 100%;
+  margin-bottom: 1vh;
   box-sizing: border-box;
+  gap: 0.5rem;
 }
 
 /* Scrollable prospect list */
 .prospectList {
+  width: 100%;
   height: 15vh;
-  max-height: 15vh; /* Adjust height as needed */
+  max-height: 15vh;
   overflow-y: auto;
 }
 
 .crossButton {
+  display: flex;
   background: none;
   border: none;
   font-size: 18px;
   color: red;
   cursor: pointer;
-  margin-top: 0.5rem; /* Add margin to the top of the delete button */
-  margin-right: 0.5rem; /* Add margin to the right of the delete button */
-  align-self: flex-start; /* Align the delete button to the start */
+  /* margin-right: 10px; */
+  margin-bottom: 0.75rem;
+  align-self: flex-end;
 }
 
 .crossButton:hover {
@@ -147,3 +141,89 @@
   font-weight: bold;
   margin-top: 10px;
 }
+
+.inputFields {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.5rem;
+}
+
+.nameRow {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+/* .nameRow input {
+  flex: 1;
+  min-width: 120px; 
+} */
+
+.emailRow {
+  display: flex;
+  width: 100%;
+}
+
+.emailRow input {
+  width: 100%;
+}
+
+/* Confirmation popup styling */
+.confirmationPopup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.confirmationContent {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.closeButton {
+  margin-top: 10px;
+  padding: 8px 16px;
+  background-color: #831002;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* When larger than mobile view */
+@media (min-width: 768px) {
+  .inputFields {
+    flex-direction: row;
+    /* gap: 15px; */
+  }
+
+  .nameRow {
+    width: 60%;
+  }
+
+  .emailRow {
+    width: 40%;
+  }
+
+  /* .crossButton {
+    margin-bottom: 0;
+    align-self: center;
+  } */
+}
+
+@media (max-width: 480px) {
+  .nameRow {
+    flex-direction: column;
+  }
+}
diff --git a/src/components/ReferralForm/ReferralForm.tsx b/src/components/ReferralForm/ReferralForm.tsx
index 9f12d66..cd5ac61 100644
--- a/src/components/ReferralForm/ReferralForm.tsx
+++ b/src/components/ReferralForm/ReferralForm.tsx
@@ -126,7 +126,7 @@ export default function ReferralForm() {
         </div>
       )}
       <form onSubmit={handleSubmit} className={styles.form}>
-        <div className={styles.inputGroup}>
+        <div className={styles.referrerEmail}>
           <label htmlFor="yourEmail" className={styles.label}></label>
           <input
             id="yourEmail"
@@ -141,45 +141,52 @@ export default function ReferralForm() {
         <div className={styles.prospectList}>
           {prospects.map((prospect, index) => (
             <div key={index} className={styles.prospectContainer}>
-              <label htmlFor={`prospectFirstName${index}`} className={styles.label}></label>
-              <input
-                id={`prospectFirstName${index}`}
-                type="text"
-                value={prospect.firstName}
-                onChange={(e) => handleProspectChange(index, "firstName", e.target.value)}
-                placeholder="Prospect's First Name"
-                className={styles.input}
-              />
-              <label htmlFor={`prospectLastName${index}`} className={styles.label}></label>
-              <input
-                id={`prospectLastName${index}`}
-                type="text"
-                value={prospect.lastName}
-                onChange={(e) => handleProspectChange(index, "lastName", e.target.value)}
-                placeholder="Prospect's Last Name"
-                className={styles.input}
-              />
-              <label htmlFor={`prospectEmail${index}`} className={styles.label}></label>
-              <input
-                id={`prospectEmail${index}`}
-                type="email"
-                value={prospect.email}
-                onChange={(e) => handleProspectChange(index, "email", e.target.value)}
-                placeholder="Prospect's Email Address"
-                className={styles.input}
-              />
               <button type="button" onClick={() => deleteProspect(index)} className={styles.crossButton}>
                 <Image src="/trash.png" alt="Delete" width={18} height={18} />
               </button>
+              <div className={styles.inputFields}>
+                <div className={styles.nameRow}>
+                  <label htmlFor={`prospectFirstName${index}`} className={styles.label}></label>
+                  <input
+                    id={`prospectFirstName${index}`}
+                    type="text"
+                    value={prospect.firstName}
+                    onChange={(e) => handleProspectChange(index, "firstName", e.target.value)}
+                    placeholder="Enter First Name"
+                    className={styles.input}
+                  />
+                  <label htmlFor={`prospectLastName${index}`} className={styles.label}></label>
+                  <input
+                    id={`prospectLastName${index}`}
+                    type="text"
+                    value={prospect.lastName}
+                    onChange={(e) => handleProspectChange(index, "lastName", e.target.value)}
+                    placeholder="Enter Last Name"
+                    className={styles.input}
+                  />
+                </div>
+                <div className={styles.emailRow}>
+                  <label htmlFor={`prospectEmail${index}`} className={styles.label}></label>
+                  <input
+                    id={`prospectEmail${index}`}
+                    type="email"
+                    value={prospect.email}
+                    onChange={(e) => handleProspectChange(index, "email", e.target.value)}
+                    placeholder="Enter Referee Email Address"
+                    className={styles.input}
+                  />
+                </div>
+              </div>
             </div>
           ))}
         </div>
-        <button type="button" onClick={addProspect} className={styles.plusBox}>
-          +
-        </button>
         <button type="submit" className={styles.button}>
           Invite
         </button>
+        <button type="button" onClick={addProspect} className={styles.plusBox}>
+          +
+        </button>
+
         {errorMessage && <p className={styles.error}>{errorMessage}</p>}
         <input type="hidden" name="referrerEmail" value={referrerEmail} />
         <input type="hidden" name="referrerFirstName" value={referrerFirstName} />
diff --git a/src/styles/page.module.css b/src/styles/page.module.css
index c0d17c7..877248f 100644
--- a/src/styles/page.module.css
+++ b/src/styles/page.module.css
@@ -34,13 +34,11 @@
 .hero {
   display: flex;
   flex-wrap: wrap;
-  align-items: stretch;
-  justify-content: space-between;
   width: 100%;
   background-color: #fadfc4;
   box-sizing: border-box;
-  padding-left: 2rem; /* keep only left padding */
-  padding-right: 2rem; /* remove right padding */
+  padding-left: 2rem;
+  padding-right: 2rem;
   margin: 0;
   gap: 0; /* remove the gap so there's no forced spacing */
 }
@@ -64,26 +62,35 @@
   font-size: 1.9rem;
   color: #831002;
   margin-bottom: 0.5rem;
+  font-size: clamp(0.8rem, 4vw, 2.5rem);
 }
 
 .heroText h2 {
   font-family: "Komika Axis", sans-serif;
   font-size: 1.5rem;
   color: #523018;
+  font-size: clamp(0.8rem, 3.8vw, 2.5rem);
 }
 
-.heroImage {
-  flex: 1 1 600px;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin: 0;
-}
+/* .heroImage {
+  flex: 1 1 300px;
+  display: none;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+} */
 
-.heroImage img {
+.heroImageWrapper {
+  position: relative;
+  flex: 1 1 300px;
   width: 100%;
-  max-width: 600px;
   height: auto;
+  min-height: 400px; /*ensures some height so image isn't 0px tall */
+  max-width: 900px;
+}
+
+.heroImage {
+  display: none;
   object-fit: cover;
 }
 
@@ -94,54 +101,40 @@
   align-items: stretch; /* Ensures children fill vertically */
   width: 100%;
   box-sizing: border-box;
-  gap: 2rem;
 }
 
 .leftSection {
-  flex: 1 1 300px;
-  background-color: #831002;
-  color: white;
-  padding: 2rem;
-  font-family: "Montserrat", sans-serif;
-  display: flex;
+  display: none;
+  flex: 2 1 470px;
   flex-direction: column;
   justify-content: center;
 }
 
-.leftSection h2 {
-  font-size: 1.8rem;
-  font-family: "Komika Axis", sans-serif;
+.produceImageWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.produceImage {
+  display: none;
+  object-fit: cover;
 }
 
 .rightSection {
-  flex: 2 1 400px;
-  background-color: white;
+  flex: 1 1 300px;
+  background-color: #831002;
+  color: white;
   padding: 2rem;
+  font-family: "Montserrat", sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
-.referralHistory {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.referralHistoryTitle {
+.rightSection h2 {
+  font-size: 1.8rem;
   font-family: "Komika Axis", sans-serif;
-  color: #831002;
-}
-
-.referralHistory th,
-.referralHistory td {
-  border: 1px solid #3e1c00;
-  padding: 10px;
-  text-align: left;
-}
-
-.referralHistory th {
-  background-color: #f5d7b5;
-  color: #3e1c00;
 }
 
 .section {
@@ -184,13 +177,61 @@
   font-size: 1rem;
 }
 
+@media (max-width: 768px) {
+  .heroImageWrapper {
+    display: none;
+  }
+  .leftSection {
+    display: none;
+  }
+
+  .rightSection {
+    display: flex;
+    flex-direction: column;
+  }
+  .rightSection h2 {
+    font-size: 1.4rem;
+    font-family: "Komika Axis", sans-serif;
+    color: white;
+
+    margin-bottom: 0.8rem;
+    margin-top: 1.5rem;
+  }
+
+  .rightSection h2:first-of-type {
+    margin-top: 0;
+  }
+
+  .rightSection p {
+    font-size: 0.9rem;
+    color: white;
+    font-family: "Montserrat", sans-serif;
+    margin-bottom: 1rem;
+
+    margin-top: 0;
+  }
+
+  .rightSection p:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
 /* when it gets bigger than mobile view */
-@media (min-width: 1065px) {
+@media (min-width: 768px) {
   .hero {
     padding-right: 0;
   }
   .heroImage {
-    padding-left: 8rem;
+    display: flex;
+    padding-left: 6rem;
+  }
+
+  .produceImage {
+    display: flex;
+  }
+
+  .leftSection {
+    display: flex;
   }
 }
 
@@ -203,9 +244,4 @@
   .heroText h2 {
     font-size: 2rem;
   }
-
-  .leftSection,
-  .rightSection {
-    padding: 3rem;
-  }
 }