diff --git a/public_html/style.css b/public_html/style.css
index a3a5f58..71bab4b 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -207,11 +207,11 @@ header p {
 }
 
 #project-previews ul {
-  height: 1000px;
   width: 600px;
   display: grid;
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
   grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
   margin: 50px auto 0 auto;
   align-items: start;
 }
@@ -256,6 +256,22 @@ h3 {
   text-transform: none;
 }
 
+#contact {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas: "text form";
+  margin: 50px auto 0 auto;
+}
+
+#contact-text {
+  grid-area: text;
+}
+
+#contact-form {
+  grid-area: form;
+}
+
 body {
   background-color: rgb(255, 255, 255);
   display: grid;
diff --git a/public_html/style.css.map b/public_html/style.css.map
index 0e1e895..9489416 100644
--- a/public_html/style.css.map
+++ b/public_html/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_reset.scss","../scss/text/_icon.scss","../scss/body/_aside.scss","../scss/_colours.scss","../scss/_accessibility.scss","../scss/body/_header.scss","../scss/text/_sizes.scss","../scss/body/main/_project-previews.scss","../scss/body/_index.scss"],"names":[],"mappings":"AAAA;AAEA;AACI;AAAA;EAEA;;;AAGJ;AACI;EACA;EACA;EACA;;;AAGJ;AACI;AAAA;AAAA;EAGA;AAEA;EACA;EACA;;;AAGJ;AACI;EACA;;;AAGJ;AACI;EACA;;;AAIJ;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;ACzDJ;EACI;EACA;EACA,KACI;EAIJ;EACA;EACA;;ACRJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAIR;EAAc;;;AAEd;EACI;EACA;;AAEA;EAAO;;;AAGX;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA,OCvCG;;;ACAH;EF0CJ;IEzCQ;;;;AF0CR;EAGI;;AExCA;EFqCJ;IEpCQ;;;;AHoFJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AI7FR;EACI;EACA;EACA;EAEA;EACA;EACA;EACA,qBACI;EFNJ;EEUA;EACA;EACA,OFhBI;;;AEmBR;EACI;EACA;;;AAGJ;ECxBI,aAJa;EAKb,WAMwC;EALxC,aAK4D;EAJ5D;EDuBA;;;AAGJ;EACI;EC9BA,aAJa;EAKb,WAQ8C;EAP9C,aAHsE;EAItE;;;AD+BJ;EACI;EACA;;AJoDA;EACI;EACA;EACA;EACA;EACA;EACA;EIvDA;EACA;EACA;;;AE1CR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;ED3BI,aAJa;EAKb,WAOwC;EANxC,aAM8D;EAL9D;;;AC4BJ;ED/BI,aAJa;EAKb,WAUkD;EATlD,aAHsE;EAItE;;ALqFA;EACI;EACA;EACA;EACA;EACA;EACA;;;AO1FR;EACI,kBLLI;EKOJ;EACA;EACA;EACA;EACA;EFXA,aAJa;EAKb,WAS4C;EAR5C,aAHsE;EAItE;EEWA,OLlBI;;;AKqBR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/_reset.scss","../scss/text/_icon.scss","../scss/body/_aside.scss","../scss/_colours.scss","../scss/_accessibility.scss","../scss/body/_header.scss","../scss/text/_sizes.scss","../scss/body/main/_project-previews.scss","../scss/body/main/_contact.scss","../scss/body/_index.scss"],"names":[],"mappings":"AAAA;AAEA;AACI;AAAA;EAEA;;;AAGJ;AACI;EACA;EACA;EACA;;;AAGJ;AACI;AAAA;AAAA;EAGA;AAEA;EACA;EACA;;;AAGJ;AACI;EACA;;;AAGJ;AACI;EACA;;;AAIJ;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;ACzDJ;EACI;EACA;EACA,KACI;EAIJ;EACA;EACA;;ACRJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAIR;EAAc;;;AAEd;EACI;EACA;;AAEA;EAAO;;;AAGX;EACI;EACA;;AAEA;EACI;;;AAIR;EACI;EACA;EACA,OCvCG;;;ACAH;EF0CJ;IEzCQ;;;;AF0CR;EAGI;;AExCA;EFqCJ;IEpCQ;;;;AHoFJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AI7FR;EACI;EACA;EACA;EAEA;EACA;EACA;EACA,qBACI;EFNJ;EEUA;EACA;EACA,OFhBI;;;AEmBR;EACI;EACA;;;AAGJ;ECxBI,aAJa;EAKb,WAMwC;EALxC,aAK4D;EAJ5D;EDuBA;;;AAGJ;EACI;EC9BA,aAJa;EAKb,WAQ8C;EAP9C,aAHsE;EAItE;;;AD+BJ;EACI;EACA;;AJoDA;EACI;EACA;EACA;EACA;EACA;EACA;EIvDA;EACA;EACA;;;AE1CR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;ED3BI,aAJa;EAKb,WAOwC;EANxC,aAM8D;EAL9D;;;AC4BJ;ED/BI,aAJa;EAKb,WAUkD;EATlD,aAHsE;EAItE;;ALqFA;EACI;EACA;EACA;EACA;EACA;EACA;;;AOlGR;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;ACLJ;EACI,kBNLI;EMOJ;EACA;EACA;EACA;EACA;EHXA,aAJa;EAKb,WAS4C;EAR5C,aAHsE;EAItE;EGWA,ONlBI;;;AMqBR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/scss/body/main/_contact.scss b/scss/body/main/_contact.scss
new file mode 100644
index 0000000..e4c072c
--- /dev/null
+++ b/scss/body/main/_contact.scss
@@ -0,0 +1,15 @@
+#contact {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 2fr;
+    grid-template-areas: "text form";
+    margin: 50px auto 0 auto;
+}
+
+#contact-text {
+    grid-area: text;
+}
+
+#contact-form {
+    grid-area: form;
+}
diff --git a/scss/body/main/_index.scss b/scss/body/main/_index.scss
index 3479505..06e8351 100644
--- a/scss/body/main/_index.scss
+++ b/scss/body/main/_index.scss
@@ -1 +1,2 @@
 @use "project-previews";
+@use "contact";
diff --git a/scss/body/main/_project-previews.scss b/scss/body/main/_project-previews.scss
index 491ee0d..d373215 100644
--- a/scss/body/main/_project-previews.scss
+++ b/scss/body/main/_project-previews.scss
@@ -2,11 +2,11 @@
 
 
 #project-previews ul {
-    height: 1000px;
     width: 600px;
     display: grid;
-    grid-template-rows: repeat(2, 1fr);
+    grid-template-rows: repeat(2, auto);
     grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
     margin: 50px auto 0 auto;
     align-items: start;
 }