diff --git a/src/components/footer.js b/src/components/footer.js
index bfb235a..1a179cf 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { Grid, IconWithContent, Icon, Link, Text } from ".";
+import { css } from "@emotion/react";
+import { Grid, IconWithContent, Icon, Link } from ".";
 import Envelope from "../icons/envelope.svg";
 import Phone from "../icons/phone.svg";
 
@@ -17,32 +18,47 @@ const Content = styled.div`
   text-align: center;
 `;
 
+const Cell = styled.div`
+  display: flex;
+  ${props =>
+    props.flexEnd &&
+    css`
+      @media (min-width: ${props.flexEnd}) {
+        justify-content: flex-end;
+      }
+    `}
+`;
+
 export default function Footer() {
   const year = new Date().getFullYear();
   return (
     <Container>
       <Content>
-        <Grid columns={[1, 2]}>
-          <IconWithContent>
-            <Icon color="dark" size="lg">
-              <Phone />
-            </Icon>
-            <Link color="dark" size="lg" to="tel:+447123456789">
-              07123 456789
-            </Link>
-          </IconWithContent>
-          <IconWithContent>
-            <Icon color="dark" size="lg">
-              <Envelope />
-            </Icon>
-            <Link
-              color="dark"
-              size="md"
-              to="mailto:quotations@abcprojectdesign.com"
-            >
-              quotations@abcprojectdesign.com
-            </Link>
-          </IconWithContent>
+        <Grid columns={[1, 2]} breakpoints={["45em"]}>
+          <Cell>
+            <IconWithContent>
+              <Icon color="dark" size="lg">
+                <Phone />
+              </Icon>
+              <Link color="dark" size="lg" to="tel:+447123456789">
+                07123 456789
+              </Link>
+            </IconWithContent>
+          </Cell>
+          <Cell flexEnd={"45em"}>
+            <IconWithContent>
+              <Icon color="dark" size="lg">
+                <Envelope />
+              </Icon>
+              <Link
+                color="dark"
+                size="md"
+                to="mailto:quotations@abcprojectdesign.com"
+              >
+                quotations@abcprojectdesign.com
+              </Link>
+            </IconWithContent>
+          </Cell>
         </Grid>
         <div>&copy; {year} Abc Project Ltd</div>
       </Content>
diff --git a/src/components/icon-with-content.js b/src/components/icon-with-content.js
index 29a334f..a0e5b58 100644
--- a/src/components/icon-with-content.js
+++ b/src/components/icon-with-content.js
@@ -9,6 +9,7 @@ const Container = styled.div`
 `;
 
 const IconWrapper = styled.div`
+  display: flex;
   margin-right: var(--spacing-x-sm);
 `;