diff --git a/src/components/grid.js b/src/components/grid.js
new file mode 100644
index 0000000..d946b5d
--- /dev/null
+++ b/src/components/grid.js
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+
+const Container = styled.div`
+  display: grid;
+  gap: var(--spacing-x-sm) var(--spacing-y-sm);
+  ${props =>
+    props.columns &&
+    props.columns.map((column, i) =>
+      i === 0 && column > 1
+        ? css`
+            grid-template-columns: repeat(${column}, minmax(10px, 1fr));
+          `
+        : css`
+  @media (min-width: ${props.breakpoints[i - 1]}) {
+    grid-template-columns: repeat(${column}, minmax(10px, 1fr));
+    ${
+      i === 1 &&
+      css`
+        gap: var(--spacing-x-md) var(--spacing-y-md);
+      `
+    }
+`
+    )}
+`;
+
+export default function Grid({ columns, breakpoints = ["30em"], children }) {
+  return (
+    <Container columns={columns} breakpoints={breakpoints}>
+      {children}
+    </Container>
+  );
+}
diff --git a/src/components/index.js b/src/components/index.js
index 508cd42..db482c7 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -3,6 +3,7 @@ export { default as Card } from "./card";
 export { default as Content } from "./content";
 export { default as CustomSlick } from "./custom-slick";
 export { default as Footer } from "./footer";
+export { default as Grid } from "./grid";
 export { default as HeaderLogo } from "./header-logo";
 export { default as Header } from "./header";
 export { default as Heading } from "./heading";
diff --git a/src/components/section.js b/src/components/section.js
index 9ca8711..1e3a2ec 100644
--- a/src/components/section.js
+++ b/src/components/section.js
@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { css } from "@emotion/react";
 import { Heading } from ".";
 
 const Container = styled.div`
@@ -23,27 +22,11 @@ const Head = styled.div`
   text-align: center;
 `;
 
-const Body = styled.div`
-  ${props =>
-    props.grid > 0 &&
-    css`
-      display: grid;
-      gap: var(--spacing-x-sm) 0;
-
-      @media (min-width: ${props.breakpoint}) {
-        grid-template-columns: repeat(${props.grid}, 1fr);
-        gap: var(--spacing-x-md);
-      }
-    `}
-`;
-
 export default function Section({
   heading,
   headingElement = "h2",
   children,
-  variant,
-  grid,
-  breakpoint = "30em"
+  variant
 }) {
   return (
     <Container variant={variant}>
@@ -53,9 +36,7 @@ export default function Section({
             <Heading el={headingElement}>{heading}</Heading>
           </Head>
         )}
-        <Body grid={grid} breakpoint={breakpoint}>
-          {children}
-        </Body>
+        {children}
       </Content>
     </Container>
   );
diff --git a/src/pages/contact.js b/src/pages/contact.js
index a8fc774..0247d7e 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -4,6 +4,7 @@ import { Marker } from "google-maps-react";
 import Layout from "../layout";
 import {
   Button,
+  Grid,
   Header,
   Icon,
   IconWithContent,
@@ -56,83 +57,85 @@ export default function Index({ data }) {
       >
         <h1>Get in touch</h1>
       </Header>
-      <Section grid={2} breakpoint="40em">
-        <div>
-          <Text>Get in touch with us</Text>
-          <Text textStyle="italic">More info here</Text>
-          <IconWithContent>
-            <Icon color="dark" size="lg">
-              <Phone />
-            </Icon>
-            <Text color="dark" size="lg">
-              07123 456789
-            </Text>
-          </IconWithContent>
-          <IconWithContent>
-            <Icon color="dark" size="lg">
-              <Envelope />
-            </Icon>
-            <Link
-              color="dark"
-              size="md"
-              to="mailto:quotations@abcprojectdesign.com"
-            >
-              quotations@abcprojectdesign.com
-            </Link>
-          </IconWithContent>
-        </div>
-        <div>
-          {submitted ? (
+      <Section>
+        <Grid columns={[1, 2]} breakpoints={["40rem"]}>
+          <div>
+            <Text>Get in touch with us</Text>
+            <Text textStyle="italic">More info here</Text>
             <IconWithContent>
               <Icon color="dark" size="lg">
-                <CheckCircle />
+                <Phone />
               </Icon>
-              <>
-                <Text color="dark" size="lg">
-                  Thank you for contacting us
-                </Text>
-                <Text color="dark" size="md">
-                  We will be in touch shortly
-                </Text>
-              </>
+              <Text color="dark" size="lg">
+                07123 456789
+              </Text>
             </IconWithContent>
-          ) : (
-            <>
+            <IconWithContent>
+              <Icon color="dark" size="lg">
+                <Envelope />
+              </Icon>
+              <Link
+                color="dark"
+                size="md"
+                to="mailto:quotations@abcprojectdesign.com"
+              >
+                quotations@abcprojectdesign.com
+              </Link>
+            </IconWithContent>
+          </div>
+          <div>
+            {submitted ? (
               <IconWithContent>
                 <Icon color="dark" size="lg">
-                  <Envelope />
+                  <CheckCircle />
                 </Icon>
-                <Text color="dark" size="lg">
-                  Contact us
-                </Text>
+                <>
+                  <Text color="dark" size="lg">
+                    Thank you for contacting us
+                  </Text>
+                  <Text color="dark" size="md">
+                    We will be in touch shortly
+                  </Text>
+                </>
               </IconWithContent>
-              <form
-                name="contact"
-                method="POST"
-                action="/contact"
-                onSubmit={handleSubmit}
-                data-netlify="true"
-                data-netlify-honeypot="bot-field"
-              >
-                <input type="hidden" name="form-name" value="contact" />
-                <InputText id="contact-name" name="name" label="Name" />
-                <InputText id="contact-email" name="email" label="Email" />
-                <InputText
-                  id="contact-telephone"
-                  name="telephone"
-                  label="Telephone"
-                />
-                <InputText
-                  id="contact-message"
-                  name="message"
-                  label="Message"
-                  textArea
-                />
-                <Button type="submit">Submit</Button>
-              </form>
-            </>
-          )}
-        </div>
+            ) : (
+              <>
+                <IconWithContent>
+                  <Icon color="dark" size="lg">
+                    <Envelope />
+                  </Icon>
+                  <Text color="dark" size="lg">
+                    Contact us
+                  </Text>
+                </IconWithContent>
+                <form
+                  name="contact"
+                  method="POST"
+                  action="/contact"
+                  onSubmit={handleSubmit}
+                  data-netlify="true"
+                  data-netlify-honeypot="bot-field"
+                >
+                  <input type="hidden" name="form-name" value="contact" />
+                  <InputText id="contact-name" name="name" label="Name" />
+                  <InputText id="contact-email" name="email" label="Email" />
+                  <InputText
+                    id="contact-telephone"
+                    name="telephone"
+                    label="Telephone"
+                  />
+                  <InputText
+                    id="contact-message"
+                    name="message"
+                    label="Message"
+                    textArea
+                  />
+                  <Button type="submit">Submit</Button>
+                </form>
+              </>
+            )}
+          </div>
+        </Grid>
       </Section>
       <Map
         initialCenter={{