diff --git a/pages/index.module.css b/pages/index.module.css
index 79bbfa5f..7e70d2a2 100644
--- a/pages/index.module.css
+++ b/pages/index.module.css
@@ -93,12 +93,10 @@
   gap: 1rem;
 }
 
-/* TODO: use <ConnectWithUs> and <EmailSighup> components and modify/get rid of below styles */
 .contact {
   margin: 0 auto;
   max-width: calc(800rem / 16);
-  padding: calc(20rem / 16);
-  padding-bottom: calc(20rem / 16);
+  padding: calc(30rem / 16) calc(40rem / 16) calc(80rem / 16);
 }
 
 /* On a smaller desktop screen, make the events/new flow vertically */
@@ -155,7 +153,7 @@
     align-items: center;
     gap: calc(8rem / 16);
 
-    padding: calc(36rem / 16) calc(40rem / 16);
+    padding: calc(36rem / 16) calc(30rem / 16) calc(20rem / 16);
   }
 
   .cardsHeading {
@@ -175,4 +173,9 @@
     border: none;
     background-color: var(--purple-2);
   }
+
+  .contact {
+    padding: calc(30rem / 16);
+    padding-bottom: calc(80rem / 16);
+  }
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 11e75087..750331d2 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,6 +3,8 @@ import { Image } from "../components/Image";
 import { SocialLinks } from "../components/SocialLinks";
 import { EventDescriptionCard } from "../components/EventDescriptionCard";
 import { NewsCard } from "../components/NewsCard";
+import { ConnectWithUs } from "../components/ConnectWithUs";
+import { EmailSignup } from "../components/EmailSignup";
 import styles from "./index.module.css";
 
 // temporary event and news imports
@@ -72,7 +74,8 @@ export default function Home() {
         </div>
       </div>
       <div className={styles.contact}>
-        {/* TODO: use <ConnectWithUs> and <EmailSighup> components */}
+        <ConnectWithUs />
+        <EmailSignup />
       </div>
     </>
   );