diff --git a/frontend/src/App.js b/frontend/src/App.js
index 7c0edab9c9..2d9c321429 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -14,11 +14,12 @@ import { TopBanner } from './TopBanner'
 import { PhaseBanner } from './PhaseBanner'
 import { Footer } from './Footer'
 import { Navigation } from './Navigation'
-import { Flex, Link, CSSReset, useToast } from '@chakra-ui/core'
+import { Flex, Link, CSSReset } from '@chakra-ui/core'
 import { SkipLink } from './SkipLink'
-import { useQuery, useApolloClient } from '@apollo/react-hooks'
+import { useQuery } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
 import { TwoFactorNotificationBar } from './TwoFactorNotificationBar'
+import { UserPage } from './UserPage'
 import { UserList } from './UserList'
 import { DmarcReportPage } from './DmarcReportPage'
 
@@ -29,12 +30,15 @@ export default function App() {
     {
       jwt @client
       tfa @client
+      userName @client
     }
   `
   const { i18n } = useLingui()
-  const toast = useToast()
-  const client = useApolloClient()
-  const { data } = useQuery(GET_JWT_TOKEN)
+  const { data, loading } = useQuery(GET_JWT_TOKEN)
+
+  if (loading) {
+    return <p>Loading...</p>
+  }
 
   return (
     <>
@@ -68,21 +72,8 @@ export default function App() {
               <Trans>Sign In</Trans>
             </Link>
           ) : (
-            <Link
-              to="/"
-              onClick={() => {
-                // This clears the JWT, essentially logging the user out in one go
-                client.writeData({ data: { jwt: null } }) // How is this done?
-                toast({
-                  title: 'Sign Out.',
-                  description: 'You have successfully been signed out.',
-                  status: 'success',
-                  duration: 9000,
-                  isClosable: true,
-                })
-              }}
-            >
-              <Trans>Sign Out</Trans>
+            <Link to="/user">
+              <Trans>User Profile</Trans>
             </Link>
           )}
           <Link to="/user-list">
@@ -103,6 +94,10 @@ export default function App() {
             <DomainsPage />
           </Route>
 
+          <Route path="/user">
+            <UserPage userName={data && data.userName ? data.userName : null} />
+          </Route>
+
           <Route path="/sign-in">
             <SignInPage />
           </Route>
diff --git a/frontend/src/DomainsPage.js b/frontend/src/DomainsPage.js
index e1c1961fe0..f4774fe62d 100644
--- a/frontend/src/DomainsPage.js
+++ b/frontend/src/DomainsPage.js
@@ -23,10 +23,10 @@ export function DomainsPage() {
               <Trans>This is the full list of domains</Trans>
             </Text>
             <List>
-              {data.domains.map((domain, i) => {
+              {data.domains.edges.map((edge, i) => {
                 return (
-                  <ListItem key={domain.url + i}>
-                    <Text>{domain.url}</Text>
+                  <ListItem key={edge.node.url + i}>
+                    <Text>{edge.node.url}</Text>
                   </ListItem>
                 )
               })}
diff --git a/frontend/src/SignInPage.js b/frontend/src/SignInPage.js
index 246bfe464e..79abaa8969 100644
--- a/frontend/src/SignInPage.js
+++ b/frontend/src/SignInPage.js
@@ -36,7 +36,8 @@ export function SignInPage() {
       cache.writeData({
         data: {
           jwt: signIn.authToken,
-          tfa: signIn.user.tfaValidated,
+          tfa: signIn.user.tfa,
+          userName: signIn.user.userName,
         },
       })
     },
@@ -92,7 +93,7 @@ export function SignInPage() {
         {(props) => (
           // Needed for testing library
           // eslint-disable-next-line jsx-a11y/no-redundant-roles
-          <form onSubmit={props.handleSubmit} role="form">
+          <form onSubmit={props.handleSubmit} role="form" aria-label="form" name="form">
             <Field name="email">
               {({ field, form }) => (
                 <FormControl
diff --git a/frontend/src/UserPage.js b/frontend/src/UserPage.js
new file mode 100644
index 0000000000..98f5f43c1c
--- /dev/null
+++ b/frontend/src/UserPage.js
@@ -0,0 +1,255 @@
+/* eslint react/prop-types: 0 */
+import React from 'react'
+
+import { Formik } from 'formik'
+import { useHistory } from 'react-router-dom'
+
+import { string } from 'prop-types'
+
+import {
+  Stack,
+  SimpleGrid,
+  Button,
+  Text,
+  Select,
+  Input,
+  Divider,
+  Checkbox,
+  CheckboxGroup,
+  useToast,
+} from '@chakra-ui/core'
+import { useApolloClient, useMutation, useQuery } from '@apollo/react-hooks'
+import { PasswordConfirmation } from './PasswordConfirmation'
+import gql from 'graphql-tag'
+
+export function UserPage({ userName }) {
+  // TODO: Move to mutations folder
+  const UPDATE_PASSWORD = gql`
+    mutation UpdatePassword(
+      $userName: EmailAddress!
+      $password: String!
+      $confirmPassword: String!
+    ) {
+      updatePassword(
+        userName: $userName
+        password: $password
+        confirmPassword: $confirmPassword
+      ) {
+        user {
+          userName
+        }
+      }
+    }
+  `
+
+  const QUERY_USER = gql`
+    query User($userName: EmailAddress!) {
+      user(userName: $userName) {
+        userName
+        displayName
+        lang
+      }
+    }
+  `
+
+  const client = useApolloClient()
+  const toast = useToast()
+  const history = useHistory()
+
+  const [
+    updatePassword,
+    {
+      loading: updatePasswordLoading,
+      error: updatePasswordError,
+      data: updatePasswordData,
+    },
+  ] = useMutation(UPDATE_PASSWORD)
+
+  const {
+    loading: queryUserLoading,
+    error: queryUserError,
+    data: queryUserData,
+  } = useQuery(QUERY_USER, {
+    variables: { userName: userName },
+  })
+
+  if (updatePasswordLoading || queryUserLoading) {
+    return <p>Loading...</p>
+  }
+
+  if (queryUserError || updatePasswordError) {
+    return <p>Error</p>
+  }
+
+  return (
+    <SimpleGrid columns={{ md: 1, lg: 2 }} spacing="60px" width="100%">
+      <Formik
+        initialValues={{
+          email: userName, // Taken from prop or query, does not matter.
+          lang: queryUserData.user.lang,
+          displayName: queryUserData.user.displayName,
+        }}
+        onSubmit={(values, actions) => {
+          window.alert('coming soon!!\n' + JSON.stringify(values, null, 2))
+          actions.setSubmitting(false)
+        }}
+      >
+        {(props) => (
+          <form onSubmit={props.handleSubmit}>
+            <Stack p={25} spacing={4}>
+              <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+                User Profile
+              </Text>
+
+              <Stack mt="20px">
+                <Text fontSize="xl">Display Name:</Text>
+                <Input
+                  id="displayName"
+                  name="displayName"
+                  type="text"
+                  onChange={props.handleChange}
+                  value={props.values.displayName}
+                />
+              </Stack>
+
+              <Stack>
+                <Text fontSize="xl">Email:</Text>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  onChange={props.handleChange}
+                  value={props.values.email}
+                />
+              </Stack>
+
+              <Stack>
+                <Text fontSize="xl">Language:</Text>
+                <Select
+                  id="lang"
+                  name="lang"
+                  type="text"
+                  placeholder="Select option"
+                  onChange={props.handleChange}
+                  value={props.values.lang}
+                >
+                  <option value="en">English</option>
+                  <option value="fr">French</option>
+                </Select>
+              </Stack>
+              <Button type="submit" variantColor="teal" w={'50%'} mt={5}>
+                Save Changes
+              </Button>
+            </Stack>
+          </form>
+        )}
+      </Formik>
+
+      <Stack Stack p={25} spacing={4}>
+        <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+          Account Details
+        </Text>
+        <CheckboxGroup
+          mt="20px"
+          variantColor="teal"
+          defaultValue={['admin', 'active']}
+        >
+          <Checkbox value="admin">Administrative Account</Checkbox>
+          <Checkbox value="active">Account Active</Checkbox>
+        </CheckboxGroup>
+        <Divider />
+        <Stack isInline>
+          <Button
+            leftIcon="lock"
+            variantColor="blue"
+            onClick={() => {
+              history.push('/two-factor-code')
+            }}
+          >
+            Enable 2FA
+          </Button>
+          <Button
+            leftIcon="edit"
+            variantColor="teal"
+            onClick={() => {
+              window.alert('coming soon')
+            }}
+          >
+            Manage API keys
+          </Button>
+        </Stack>
+        <Button
+          variantColor="teal"
+          w={'50%'}
+          onClick={() => {
+            // This clears the JWT, essentially logging the user out in one go
+            client.writeData({ data: { jwt: null, tfa: null, userName: null } }) // How is this done?
+            history.push('/')
+            toast({
+              title: 'Sign Out.',
+              description: 'You have successfully been signed out.',
+              status: 'success',
+              duration: 9000,
+              isClosable: true,
+            })
+          }}
+        >
+          Sign Out
+        </Button>
+      </Stack>
+      <Stack p={25} spacing={4}>
+        <Text fontSize="2xl" fontWeight="bold" textAlign="center">
+          Change Password
+        </Text>
+        <Text>
+          Change your password below by entering and confirming a new password.
+        </Text>
+
+        <Formik
+          initialValues={{ password: '', confirmPassword: '' }}
+          onSubmit={async (values) => {
+            // Submit GraphQL mutation
+            console.log(values)
+            await updatePassword({
+              variables: {
+                userName: 'testuser@test.ca', // This needs to be retreived from a seperate GQL query or props that will populate this entire page with data.
+                password: values.password,
+                confirmPassword: values.confirmPassword,
+              },
+            })
+
+            if (!updatePasswordError) {
+              console.log(updatePasswordData)
+              toast({
+                title: 'Password Updated.',
+                description: 'You have successfully changed your password.',
+                status: 'success',
+                duration: 9000,
+                isClosable: true,
+              })
+            }
+          }}
+        >
+          {({ handleSubmit, isSubmitting }) => (
+            <form id="form" onSubmit={handleSubmit}>
+              <PasswordConfirmation />
+
+              <Stack mt={6} spacing={4} isInline>
+                <Button
+                  variantColor="teal"
+                  isLoading={isSubmitting}
+                  type="submit"
+                  id="submitBtn"
+                >
+                  Change Password
+                </Button>
+              </Stack>
+            </form>
+          )}
+        </Formik>
+      </Stack>
+    </SimpleGrid>
+  )
+}
+
+UserPage.propTypes = { userName: string.isRequired }
diff --git a/frontend/src/__tests__/App.test.js b/frontend/src/__tests__/App.test.js
index 5f0c6efada..3e67739ed3 100644
--- a/frontend/src/__tests__/App.test.js
+++ b/frontend/src/__tests__/App.test.js
@@ -24,7 +24,11 @@ const mocks = [
       query: gql`
         {
           domains(organization: BOC) {
-            url
+            edges {
+              node {
+                url
+              }
+            }
           }
         }
       `,
@@ -32,14 +36,20 @@ const mocks = [
     },
     result: {
       data: {
-        domains: [
-          {
-            url: 'canada.ca',
-          },
-          {
-            url: 'alpha.canada.ca',
-          },
-        ],
+        domains: {
+          edges: [
+            {
+              node: {
+                url: 'canada.ca',
+              },
+            },
+            {
+              node: {
+                url: 'alpha.canada.ca',
+              },
+            },
+          ],
+        },
       },
     },
   },
diff --git a/frontend/src/__tests__/SignInPage.test.js b/frontend/src/__tests__/SignInPage.test.js
index ce39565afe..7b80ffef19 100644
--- a/frontend/src/__tests__/SignInPage.test.js
+++ b/frontend/src/__tests__/SignInPage.test.js
@@ -120,7 +120,7 @@ describe('<SignInPage />', () => {
                 signIn(userName: $userName, password: $password) {
                   user {
                     userName
-                    tfaValidated
+                    tfa
                   }
                   authToken
                 }
@@ -136,8 +136,7 @@ describe('<SignInPage />', () => {
               signIn: {
                 user: {
                   userName: 'Thalia.Rosenbaum@gmail.com',
-                  failedLoginAttempts: 4,
-                  tfaValidated: false,
+                  tfa: false,
                 },
                 authToken: 'test123stringJWT',
               },
@@ -153,7 +152,7 @@ describe('<SignInPage />', () => {
         initialIndex: 0,
       })
 
-      const { container, getByRole } = render(
+      const { container, getByRole, queryByText } = render(
         <ThemeProvider theme={theme}>
           <I18nProvider i18n={i18n}>
             <Router history={history}>
@@ -168,6 +167,11 @@ describe('<SignInPage />', () => {
           </I18nProvider>
         </ThemeProvider>,
       )
+      await waitFor(() => {
+        expect(
+          queryByText(/Sign in with your username and password./i),
+        ).toBeInTheDocument()
+      })
 
       const email = container.querySelector('#email')
       const password = container.querySelector('#password')
diff --git a/frontend/src/graphql/mutations.js b/frontend/src/graphql/mutations.js
index a244f4cd09..698dcd8ce5 100644
--- a/frontend/src/graphql/mutations.js
+++ b/frontend/src/graphql/mutations.js
@@ -25,7 +25,7 @@ export const SIGN_IN = gql`
     signIn(userName: $userName, password: $password) {
       user {
         userName
-        tfaValidated
+        tfa
       }
       authToken
     }
@@ -41,3 +41,5 @@ export const VALIDATE_TWO_FACTOR = gql`
     }
   }
 `
+
+export default ''
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index 845af9555a..2bb464a2e6 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -3,7 +3,11 @@ import gql from 'graphql-tag'
 export const DOMAINS = gql`
   {
     domains(organization: BOC) {
-      url
+      edges {
+        node {
+          url
+        }
+      }
     }
   }
 `