1 files changed, 29 insertions, 38 deletions
diff --git a/packages/website/ts/pages/jobs/mission.tsx b/packages/website/ts/pages/jobs/mission.tsx
index f7f874e04..28546f985 100644
--- a/packages/website/ts/pages/jobs/mission.tsx
+++ b/packages/website/ts/pages/jobs/mission.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
 
+import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
+import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
 import { ScreenWidths } from 'ts/types';
 
@@ -7,50 +10,38 @@ export interface MissionProps {
     screenWidth: ScreenWidths;
 }
 export const Mission = (props: MissionProps) => {
-    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
-    const image = (
-        <div className="col lg-col-6 md-col-6 col-12 sm-py2 px2 center">
-            <img src="/images/jobs/map.png" style={{ width: '100%' }} />
-        </div>
-    );
-    const missionStatementStyle = !isSmallScreen ? { height: 364, lineHeight: '364px' } : undefined;
+    const shouldShowImage = props.screenWidth === ScreenWidths.Lg;
+    const image = <Image src="/images/jobs/world-map.svg" maxWidth="500px" maxHeight="280px" />;
+    const missionStatementClassName = !shouldShowImage ? 'center' : undefined;
     const missionStatement = (
-        <div className="col lg-col-6 md-col-6 col-12 center" style={missionStatementStyle}>
-            <div
-                className="mx-auto inline-block align-middle"
-                style={{ maxWidth: 385, lineHeight: '44px', textAlign: 'center' }}
-            >
-                <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
-                    Our Mission
-                </div>
-                <div
-                    className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h4 sm-center"
-                    style={{ fontFamily: 'Roboto', lineHeight: 2, maxWidth: 537 }}
-                >
-                    We believe a system can exist in which all world value is accessible to anyone, anywhere, regardless
-                    of where you happen to be born.
-                </div>
-            </div>
-        </div>
+        <Container className={missionStatementClassName} maxWidth="388px">
+            <Text fontFamily="Roboto Mono" fontSize="22px" lineHeight="31px">
+                Powered by a Diverse<br />Worldwide Community
+            </Text>
+            <Container marginTop="32px">
+                <Text fontSize="14px" lineHeight="2em">
+                    We're a highly technical team with varied backgrounds in engineering, science, business, finance,
+                    and research. While the core team is headquartered in San Francisco, there are 30+ teams building on
+                    0x and hundreds of thousands of participants behind our efforts globally. We're passionate about
+                    open-source software and decentralized technology's potential to act as an equalizing force in the
+                    world.
+                </Text>
+            </Container>
+        </Container>
     );
     return (
         <div
-            className="container lg-py4 md-py4"
+            className="flex flex-column items-center py4 px3"
             style={{ backgroundColor: colors.jobsPageBackground, color: colors.black }}
         >
-            <div className="mx-auto clearfix sm-py4">
-                {isSmallScreen ? (
-                    <div>
-                        {missionStatement}
-                        {image}
-                    </div>
-                ) : (
-                    <div>
-                        {image}
-                        {missionStatement}
-                    </div>
-                )}
-            </div>
+            {shouldShowImage ? (
+                <Container className="flex items-center" maxWidth="1200px">
+                    {image}
+                    <Container marginLeft="115px">{missionStatement}</Container>
+                </Container>
+            ) : (
+                <Container className="flex flex-column items-center">{missionStatement}</Container>
+            )}
         </div>
     );
 };