diff --git a/client/src/components/EditableAttribute/DateAttribute.jsx b/client/src/components/EditableAttribute/DateAttribute.jsx
index 0ee65c0..80f440a 100644
--- a/client/src/components/EditableAttribute/DateAttribute.jsx
+++ b/client/src/components/EditableAttribute/DateAttribute.jsx
@@ -29,7 +29,7 @@ const DateAttribute = ({
 
   return (
     <div className={className}>
-      <p>{startCase(attributeLabel)}</p>
+      <p>{startCase(attributeLabel).toUpperCase()}</p>
       <DatePicker
         className="datePicker"
         onChange={onValueChange}
diff --git a/client/src/components/EditableAttribute/EnumAttribute.jsx b/client/src/components/EditableAttribute/EnumAttribute.jsx
index 6a896b9..c17dcef 100644
--- a/client/src/components/EditableAttribute/EnumAttribute.jsx
+++ b/client/src/components/EditableAttribute/EnumAttribute.jsx
@@ -35,7 +35,7 @@ const EnumAttribute = ({
 
   return (
     <div className={className}>
-      <p>{startCase(attributeLabel)}</p>
+      <p>{startCase(attributeLabel).toUpperCase()}</p>
       <Select
         value={getOptionFromValue(value)}
         isDisabled={isDisabled}
diff --git a/client/src/components/EditableAttribute/TextAttribute.jsx b/client/src/components/EditableAttribute/TextAttribute.jsx
index 1ea918b..c23f67b 100644
--- a/client/src/components/EditableAttribute/TextAttribute.jsx
+++ b/client/src/components/EditableAttribute/TextAttribute.jsx
@@ -29,8 +29,9 @@ const TextAttribute = ({
 
   return (
     <div className={className}>
-      <p>{startCase(attributeLabel)}</p>
+      <p>{startCase(attributeLabel).toUpperCase()}</p>
       <Form.Input
+        size="small"
         type={type}
         value={value}
         onChange={onValueChange}
diff --git a/client/src/components/ProfileCard/ProfileCard.jsx b/client/src/components/ProfileCard/ProfileCard.jsx
new file mode 100644
index 0000000..6a5c44c
--- /dev/null
+++ b/client/src/components/ProfileCard/ProfileCard.jsx
@@ -0,0 +1,420 @@
+// @flow
+import React, { useState, useEffect } from 'react';
+import { useParams, Redirect } from 'react-router-dom';
+import { Form, Message, Icon, Button, Card, Grid } from 'semantic-ui-react';
+import _ from 'lodash';
+
+import TextAttribute from '../EditableAttribute/TextAttribute';
+import EnumAttribute from '../EditableAttribute/EnumAttribute';
+import '../../css/Profile.css';
+import {
+  getMemberByID,
+  getMemberEnumOptions,
+  getMemberPermissionsByID,
+  getMemberSchemaTypes,
+  updateMember,
+  createMember,
+} from '../../utils/apiWrapper';
+import { requiredFields } from '../../utils/consts';
+
+/**
+ * @constant
+ * @type {number}
+ */
+const SUCCESS_MESSAGE_POPUP_TIME_MS = 4000;
+
+/**
+ * Checks if the given API responses were successful
+ * @param  {...any} responses Any amount of response objects
+ */
+const areResponsesSuccessful = (...responses) => {
+  let success = true;
+  responses.forEach((response) => {
+    if (response == null || response.data == null || !response.data.success)
+      success = false;
+  });
+
+  return success;
+};
+
+const Profile = () => {
+  const { memberID } = useParams();
+  const newUser = memberID === 'new';
+  const [newUserID, setNewUserID] = useState(false);
+
+  // Upstream user is the DB version. Local user captures local changes made to the user.
+  const [upstreamUser, setUpstreamUser] = useState({});
+  const [localUser, setLocalUser] = useState({});
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [successMessage, setSuccessMessage] = useState(null);
+  const [enumOptions, setEnumOptions] = useState({});
+  // const [schemaTypes, setSchemaTypes] = useState({});
+  const [userPermissions, setUserPermissions] = useState({
+    view: [],
+    edit: [],
+  });
+
+  useEffect(() => {
+    async function getUserData() {
+      if (memberID == null) return;
+
+      const responses = [];
+
+      let memberDataResponse = null;
+      if (!newUser) {
+        memberDataResponse = await getMemberByID(memberID);
+        responses.push(memberDataResponse);
+      }
+
+      const memberPermissionResponse = await getMemberPermissionsByID(memberID);
+      const memberSchemaResponse = await getMemberSchemaTypes();
+      const enumOptionsResponse = await getMemberEnumOptions();
+      responses.push(
+        enumOptionsResponse,
+        memberSchemaResponse,
+        memberPermissionResponse,
+      );
+
+      if (!areResponsesSuccessful(...responses)) {
+        setErrorMessage('An error occurred while retrieving member data.');
+        return;
+      }
+
+      if (!newUser && memberDataResponse !== null) {
+        setUpstreamUser(memberDataResponse.data.result);
+        setLocalUser(memberDataResponse.data.result);
+      }
+      setUserPermissions(memberPermissionResponse.data.result);
+      // setSchemaTypes(memberSchemaResponse.data.result);
+      setEnumOptions(enumOptionsResponse.data.result);
+      setErrorMessage(null);
+    }
+
+    getUserData();
+  }, [memberID, newUser]);
+
+  // Returns true if the member attribute is of the given type.
+  // Type is a string defined by mongoose. See https://mongoosejs.com/docs/schematypes.html
+  // const isOfType = (attribute, type) => {
+  //   if (!schemaTypes || !type || !schemaTypes[type]) return false;
+
+  //   return schemaTypes[type].includes(attribute);
+  // };
+
+  const onAttributeChange = (value, attributeLabel) => {
+    setLocalUser({
+      ...localUser,
+      [attributeLabel]: value,
+    });
+  };
+
+  const createUpdatedUser = () => {
+    const updatedUser = {};
+    userPermissions.edit.forEach((field) => {
+      updatedUser[field] = localUser[field];
+    });
+
+    return updatedUser;
+  };
+
+  const setTemporarySuccessMessage = (contents) => {
+    setSuccessMessage(contents);
+    setTimeout(() => setSuccessMessage(null), SUCCESS_MESSAGE_POPUP_TIME_MS);
+  };
+
+  const submitChanges = async () => {
+    let missingFields = false;
+    requiredFields.forEach((field) => {
+      if (!localUser[field]) {
+        missingFields = true;
+      }
+    });
+    if (missingFields) return;
+
+    const result = newUser
+      ? await createMember(createUpdatedUser())
+      : await updateMember(createUpdatedUser(), upstreamUser._id);
+    if (!areResponsesSuccessful(result)) {
+      setErrorMessage(
+        `An error occured${
+          result &&
+          result.error &&
+          result.error.response &&
+          result.error.response.data
+            ? `: ${result.error.response.data.message}`
+            : '.'
+        }`,
+      );
+      setSuccessMessage(null);
+    } else {
+      setTemporarySuccessMessage(newUser ? 'User Created' : 'User updated');
+      setErrorMessage(null);
+      setUpstreamUser(result.data.result);
+      if (newUser) setNewUserID(result.data.result._id);
+    }
+  };
+
+  return (
+    <>
+      {/* Redirects to the new member page immediately after creating and getting a success response */}
+      {newUserID && <Redirect to={`/member/${newUserID}`} />}
+      <Card fluid raised className="profile-card">
+        <Card.Content>
+          <Card.Header style={{ marginBottom: 10 }}>
+            <h2>
+              {`${upstreamUser.firstName} ${upstreamUser.lastName}`}
+              <span
+                style={{ fontSize: '13px', opacity: 0.8, marginLeft: '20px' }}
+              >
+                {upstreamUser.level}
+              </span>
+            </h2>
+          </Card.Header>
+          <Form fluid className="profile-form" onSubmit={submitChanges}>
+            <Grid columns="equal">
+              <Grid.Row className="row">
+                <Grid.Column>
+                  <TextAttribute
+                    type="text"
+                    value={localUser.firstName}
+                    key="firstName"
+                    attributeLabel="firstName"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('firstName')}
+                    isRequired={requiredFields.includes('firstName')}
+                  />
+                </Grid.Column>
+                <Grid.Column>
+                  <TextAttribute
+                    type="text"
+                    value={localUser.lastName}
+                    key="lastName"
+                    attributeLabel="lastName"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('lastName')}
+                    isRequired={requiredFields.includes('lastName')}
+                  />
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row className="row">
+                <Grid.Column>
+                  <TextAttribute
+                    type="text"
+                    value={localUser.email}
+                    key="email"
+                    attributeLabel="email"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('email')}
+                    isRequired={requiredFields.includes('email')}
+                  />
+                </Grid.Column>
+                <Grid.Column>
+                  <Grid columns="equal">
+                    <Grid.Column>
+                      <EnumAttribute
+                        value={localUser.gradSemester}
+                        valueOptions={enumOptions.gradSemester}
+                        key="gradSemester"
+                        attributeLabel="gradSemester"
+                        className="attribute"
+                        onChange={onAttributeChange}
+                        isDisabled={
+                          !userPermissions.edit.includes('gradSemester')
+                        }
+                      />
+                    </Grid.Column>
+                    <Grid.Column>
+                      <TextAttribute
+                        type="number"
+                        value={localUser.gradYear}
+                        key="gradYear"
+                        attributeLabel="gradYear"
+                        className="attribute"
+                        onChange={onAttributeChange}
+                        isDisabled={!userPermissions.edit.includes('gradYear')}
+                        isRequired={requiredFields.includes('gradYear')}
+                      />
+                    </Grid.Column>
+                  </Grid>
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row className="row">
+                <Grid.Column>
+                  <EnumAttribute
+                    value={localUser.chapter}
+                    valueOptions={enumOptions.chapter}
+                    key="chapter"
+                    attributeLabel="chapter"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('chapter')}
+                  />
+                </Grid.Column>
+                <Grid.Column>
+                  <EnumAttribute
+                    value={localUser.role}
+                    valueOptions={enumOptions.role}
+                    key="role"
+                    attributeLabel="role"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('role')}
+                  />
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row className="row">
+                <Grid.Column>
+                  <EnumAttribute
+                    value={localUser.status}
+                    valueOptions={enumOptions.status}
+                    key="status"
+                    attributeLabel="status"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('status')}
+                  />
+                </Grid.Column>
+                <Grid.Column>
+                  <Grid columns="equal">
+                    <Grid.Column>
+                      <EnumAttribute
+                        value={localUser.generationSemester}
+                        valueOptions={enumOptions.generationSemester}
+                        key="generationSemester"
+                        attributeLabel="generationSemester"
+                        className="attribute"
+                        onChange={onAttributeChange}
+                        isDisabled={
+                          !userPermissions.edit.includes('generationSemester')
+                        }
+                      />
+                    </Grid.Column>
+                    <Grid.Column>
+                      <TextAttribute
+                        type="number"
+                        value={localUser.generationYear}
+                        key="generationYear"
+                        attributeLabel="generationYear"
+                        className="attribute"
+                        onChange={onAttributeChange}
+                        isDisabled={
+                          !userPermissions.edit.includes('generationYear')
+                        }
+                        isRequired={requiredFields.includes('generationYear')}
+                      />
+                    </Grid.Column>
+                  </Grid>
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row className="row">
+                <Grid.Column>
+                  <TextAttribute
+                    type="text"
+                    value={localUser.instagram}
+                    key="instagram"
+                    attributeLabel="instagram"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('instagram')}
+                    isRequired={requiredFields.includes('instagram')}
+                  />
+                </Grid.Column>
+                <Grid.Column>
+                  <TextAttribute
+                    type="text"
+                    value={localUser.snapchat}
+                    key="snapchat"
+                    attributeLabel="snapchat"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('snapchat')}
+                    isRequired={requiredFields.includes('snapchat')}
+                  />
+                </Grid.Column>
+                <Grid.Column>
+                  <TextAttribute
+                    type="text"
+                    value={localUser.github}
+                    key="github"
+                    attributeLabel="github"
+                    className="attribute"
+                    onChange={onAttributeChange}
+                    isDisabled={!userPermissions.edit.includes('github')}
+                    isRequired={requiredFields.includes('github')}
+                  />
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row className="row">
+                <Grid.Column>
+                  <Form.TextArea
+                    style={{ minHeight: 100, maxHeight: 100 }}
+                    label="NOTES"
+                    fluid
+                  />
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+
+            {
+              // Message displayed upon successfully updating member
+              successMessage ? (
+                <div className="profile-alert">
+                  <Message icon big positive>
+                    <Icon name="thumbs up" />
+                    <Message.Content>
+                      <Message.Header>
+                        {newUser ? 'Create User' : 'Update'} Succeeded!
+                      </Message.Header>
+                      {successMessage}
+                    </Message.Content>
+                  </Message>
+                </div>
+              ) : (
+                <div />
+              )
+            }
+
+            {
+              // Message displayed upon receiving an error response
+              errorMessage !== null && errorMessage !== undefined ? (
+                <div className="profile-alert">
+                  <Message className="profile-alert" icon big negative>
+                    <Icon name="warning circle" />
+                    <Message.Content>
+                      <Message.Header>
+                        {newUser ? 'Create User' : 'Update'} Failed!
+                      </Message.Header>
+                      {errorMessage}
+                    </Message.Content>
+                  </Message>
+                </div>
+              ) : (
+                <div />
+              )
+            }
+
+            {userPermissions.edit.length > 0 ? (
+              <div id="submit-button">
+                <Button
+                  size="big"
+                  disabled={_.isEqual(upstreamUser, localUser)}
+                  type="large"
+                  onClick={submitChanges}
+                >
+                  {newUser ? 'Create User' : 'Update'}
+                </Button>
+              </div>
+            ) : (
+              <div />
+            )}
+          </Form>
+        </Card.Content>
+      </Card>
+    </>
+  );
+};
+
+export default Profile;
diff --git a/client/src/components/navbar/Navbar.jsx b/client/src/components/navbar/Navbar.jsx
index 6882a1c..ae23de6 100644
--- a/client/src/components/navbar/Navbar.jsx
+++ b/client/src/components/navbar/Navbar.jsx
@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import type { Node } from 'react';
+import { Sticky } from 'semantic-ui-react';
 import { Link, NavLink } from 'react-router-dom';
 
 import '../../css/Navbar.css';
@@ -23,29 +24,33 @@ type NavbarProp = {
  * @param {Object} user the current user of the session
  */
 const Navbar = ({ user }: NavbarProp): Node => (
-  <nav>
-    <h2 id="nav-title">
-      <Link className="nav-link" to={Routes.DEFAULT}>
-        H4I Member Database
-      </Link>
-    </h2>
-    <ul>
-      {levelEnum[user.level] >= levelEnum.DIRECTOR && (
-        <li>
-          <NavLink to="/member/new">Add Member</NavLink>
-        </li>
-      )}
-      <li>
-        <NavLink to="/">Members</NavLink>
-      </li>
-      <li>
-        <NavLink to="/notes">Notes</NavLink>
-      </li>
-      <li className="profile-item">
-        <ProfileDropdown user={user} />
-      </li>
-    </ul>
-  </nav>
+  <Sticky>
+    <nav>
+      <div className="nav-content">
+        <h2 id="nav-title">
+          <Link className="nav-link" to={Routes.DEFAULT}>
+            H4I Member Database
+          </Link>
+        </h2>
+        <ul>
+          {levelEnum[user.level] >= levelEnum.DIRECTOR && (
+            <li>
+              <NavLink to="/member/new">Add Member</NavLink>
+            </li>
+          )}
+          <li>
+            <NavLink to="/">Members</NavLink>
+          </li>
+          <li>
+            <NavLink to="/notes">Notes</NavLink>
+          </li>
+          <li className="profile-item">
+            <ProfileDropdown user={user} />
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </Sticky>
 );
 
 export default Navbar;
diff --git a/client/src/css/Home.css b/client/src/css/Home.css
index 42dd69b..91a404e 100644
--- a/client/src/css/Home.css
+++ b/client/src/css/Home.css
@@ -3,3 +3,7 @@
 html {
   font-family: 'Inter', sans-serif;
 }
+
+body {
+  background-color: #f1f3f6;
+}
diff --git a/client/src/css/Navbar.css b/client/src/css/Navbar.css
index b0686bf..aa170d3 100644
--- a/client/src/css/Navbar.css
+++ b/client/src/css/Navbar.css
@@ -1,10 +1,5 @@
 nav {
-  display: flex;
-  margin: 0 auto;
-  align-items: stretch;
-  position: relative;
-  height: 70px;
-  --font-size: 16px;
+  background-color: white;
 }
 
 nav::after {
@@ -16,6 +11,18 @@ nav::after {
   left: min(calc((100vw - 1200px) / -2), -2.5%);
 }
 
+nav .nav-content {
+  max-width: 1200px;
+  width: 95%;
+  margin: 0 auto;
+  display: flex;
+  margin: 0 auto;
+  align-items: stretch;
+  position: relative;
+  height: 70px;
+  --font-size: 16px;
+}
+
 nav #nav-title {
   text-align: left;
   margin: 0;
@@ -43,7 +50,7 @@ nav .profile-item .dropdown > p > *:last-child {
   margin-left: 1em;
 }
 
-nav > ul {
+nav > div > ul {
   padding: 0;
   margin: 0;
   display: flex;
@@ -51,26 +58,26 @@ nav > ul {
   font-size: var(--font-size);
 }
 
-nav > ul > li {
+nav > div > ul > li {
   display: flex;
 }
 
-nav > ul > li > * {
+nav > div > ul > li > * {
   padding: 0 1.5em;
   display: flex;
   align-items: center;
 }
 
-nav > ul > li > a,
-nav > ul > li > a:hover {
+nav > div > ul > li > a,
+nav > div > ul > li > a:hover {
   color: black;
 }
 
-nav > ul > li {
+nav > div > ul > li {
   border-right: 1px solid #d3d3d3;
 }
 
-nav > ul > li > a:hover {
+nav > div > ul > li > a:hover {
   background-color: navy;
   color: white;
 }
diff --git a/client/src/css/Page.css b/client/src/css/Page.css
index 159a073..ce270a2 100644
--- a/client/src/css/Page.css
+++ b/client/src/css/Page.css
@@ -1,5 +1,4 @@
-.page-wrapper,
-nav {
+.page-wrapper {
   max-width: 1200px;
   width: 95%;
   margin: 0 auto;
diff --git a/client/src/css/Profile.css b/client/src/css/Profile.css
index 98ee3b4..09a0c21 100644
--- a/client/src/css/Profile.css
+++ b/client/src/css/Profile.css
@@ -1,3 +1,28 @@
+.profile-page {
+  display: flex;
+  margin: auto;
+  width: 950px;
+  padding-bottom: 50px;
+}
+
+.profile-card {
+  padding: 30px 30px 0px 30px !important;
+}
+.profile-card .row {
+  /* padding-top: 30px !important; */
+}
+
+.profile-card #submit-button {
+  float: right;
+}
+
+.profile-card #submit-button > button {
+  margin: 2rem auto 0;
+  display: block;
+  background-color: #0069ca;
+  color: white;
+}
+
 .attribute {
   margin-bottom: 1rem;
 }
diff --git a/client/src/pages/Profile.jsx b/client/src/pages/Profile.jsx
index b1a7c53..3905f6a 100644
--- a/client/src/pages/Profile.jsx
+++ b/client/src/pages/Profile.jsx
@@ -1,314 +1,16 @@
 // @flow
-import React, { useState, useEffect } from 'react';
-import { Link, useParams, Redirect } from 'react-router-dom';
-import { Form, Message, Icon, Button, Card } from 'semantic-ui-react';
-import _ from 'lodash';
+import React from 'react';
 
 import Page from '../components/layout/Page';
-import TextAttribute from '../components/EditableAttribute/TextAttribute';
-import EnumAttribute from '../components/EditableAttribute/EnumAttribute';
-import BooleanAttribute from '../components/EditableAttribute/BooleanAttribute';
-import DateAttribute from '../components/EditableAttribute/DateAttribute';
+import ProfileCard from '../components/ProfileCard/ProfileCard';
 import '../css/Profile.css';
-import {
-  getMemberByID,
-  getMemberEnumOptions,
-  getMemberPermissionsByID,
-  getMemberSchemaTypes,
-  updateMember,
-  createMember,
-} from '../utils/apiWrapper';
-import { requiredFields } from '../utils/consts';
 
-/**
- * @constant
- * @type {number}
- */
-const SUCCESS_MESSAGE_POPUP_TIME_MS = 4000;
-
-/**
- * Checks if the given API responses were successful
- * @param  {...any} responses Any amount of response objects
- */
-const areResponsesSuccessful = (...responses) => {
-  let success = true;
-  responses.forEach((response) => {
-    if (response == null || response.data == null || !response.data.success)
-      success = false;
-  });
-
-  return success;
-};
-
-const Profile = () => {
-  const { memberID } = useParams();
-  const newUser = memberID === 'new';
-  const [newUserID, setNewUserID] = useState(false);
-
-  // Upstream user is the DB version. Local user captures local changes made to the user.
-  const [upstreamUser, setUpstreamUser] = useState({});
-  const [localUser, setLocalUser] = useState({});
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [successMessage, setSuccessMessage] = useState(null);
-  const [enumOptions, setEnumOptions] = useState({});
-  const [schemaTypes, setSchemaTypes] = useState({});
-  const [userPermissions, setUserPermissions] = useState({
-    view: [],
-    edit: [],
-  });
-
-  useEffect(() => {
-    async function getUserData() {
-      if (memberID == null) return;
-
-      const responses = [];
-
-      let memberDataResponse = null;
-      if (!newUser) {
-        memberDataResponse = await getMemberByID(memberID);
-        responses.push(memberDataResponse);
-      }
-
-      const memberPermissionResponse = await getMemberPermissionsByID(memberID);
-      const memberSchemaResponse = await getMemberSchemaTypes();
-      const enumOptionsResponse = await getMemberEnumOptions();
-      responses.push(
-        enumOptionsResponse,
-        memberSchemaResponse,
-        memberPermissionResponse,
-      );
-
-      if (!areResponsesSuccessful(...responses)) {
-        setErrorMessage('An error occurred while retrieving member data.');
-        return;
-      }
-
-      if (!newUser && memberDataResponse !== null) {
-        setUpstreamUser(memberDataResponse.data.result);
-        setLocalUser(memberDataResponse.data.result);
-      }
-      setUserPermissions(memberPermissionResponse.data.result);
-      setSchemaTypes(memberSchemaResponse.data.result);
-      setEnumOptions(enumOptionsResponse.data.result);
-      setErrorMessage(null);
-    }
-
-    getUserData();
-  }, [memberID, newUser]);
-
-  // Returns true if the member attribute is of the given type.
-  // Type is a string defined by mongoose. See https://mongoosejs.com/docs/schematypes.html
-  const isOfType = (attribute, type) => {
-    if (!schemaTypes || !type || !schemaTypes[type]) return false;
-
-    return schemaTypes[type].includes(attribute);
-  };
-
-  const onAttributeChange = (value, attributeLabel) => {
-    setLocalUser({
-      ...localUser,
-      [attributeLabel]: value,
-    });
-  };
-
-  const createUpdatedUser = () => {
-    const updatedUser = {};
-    userPermissions.edit.forEach((field) => {
-      updatedUser[field] = localUser[field];
-    });
-
-    return updatedUser;
-  };
-
-  const setTemporarySuccessMessage = (contents) => {
-    setSuccessMessage(contents);
-    setTimeout(() => setSuccessMessage(null), SUCCESS_MESSAGE_POPUP_TIME_MS);
-  };
-
-  const submitChanges = async () => {
-    let missingFields = false;
-    requiredFields.forEach((field) => {
-      if (!localUser[field]) {
-        missingFields = true;
-      }
-    });
-    if (missingFields) return;
-
-    const result = newUser
-      ? await createMember(createUpdatedUser())
-      : await updateMember(createUpdatedUser(), upstreamUser._id);
-    if (!areResponsesSuccessful(result)) {
-      setErrorMessage(
-        `An error occured${
-          result &&
-          result.error &&
-          result.error.response &&
-          result.error.response.data
-            ? `: ${result.error.response.data.message}`
-            : '.'
-        }`,
-      );
-      setSuccessMessage(null);
-    } else {
-      setTemporarySuccessMessage(newUser ? 'User Created' : 'User updated');
-      setErrorMessage(null);
-      setUpstreamUser(result.data.result);
-      if (newUser) setNewUserID(result.data.result._id);
-    }
-  };
-
-  return (
-    <Page
-      title={
-        <>
-          <Link to="/">Members</Link> / {upstreamUser.firstName}{' '}
-          {upstreamUser.lastName}
-        </>
-      }
-    >
-      {/* Redirects to the new member page immediately after creating and getting a success response */}
-      {newUserID && <Redirect to={`/member/${newUserID}`} />}
-      <Card fluid>
-        <Card.Content>
-          <Card.Header>Profile</Card.Header>
-          <Form fluid className="profile-form" onSubmit={submitChanges}>
-            <div className="form-grid">
-              {
-                // Main content
-                userPermissions.view.map((attribute) => {
-                  if (isOfType(attribute, 'Number')) {
-                    return (
-                      <TextAttribute
-                        type="number"
-                        value={localUser[attribute]}
-                        key={attribute}
-                        attributeLabel={attribute}
-                        className="attribute"
-                        onChange={onAttributeChange}
-                        isDisabled={!userPermissions.edit.includes(attribute)}
-                        isRequired={requiredFields.includes(attribute)}
-                      />
-                    );
-                  }
-
-                  if (isOfType(attribute, 'Enum')) {
-                    return (
-                      <EnumAttribute
-                        value={localUser[attribute]}
-                        valueOptions={enumOptions[attribute]}
-                        key={attribute}
-                        attributeLabel={attribute}
-                        className="attribute"
-                        onChange={onAttributeChange}
-                        isDisabled={!userPermissions.edit.includes(attribute)}
-                      />
-                    );
-                  }
-
-                  if (isOfType(attribute, 'Boolean')) {
-                    return (
-                      <BooleanAttribute
-                        value={localUser[attribute]}
-                        key={attribute}
-                        attributeLabel={attribute}
-                        className="attribute"
-                        onChange={onAttributeChange}
-                        isDisabled={!userPermissions.edit.includes(attribute)}
-                      />
-                    );
-                  }
-
-                  if (isOfType(attribute, 'Date')) {
-                    return (
-                      <DateAttribute
-                        value={Date.parse(localUser[attribute])}
-                        key={attribute}
-                        attributeLabel={attribute}
-                        onChange={onAttributeChange}
-                        className="attribute"
-                        isDisabled={!userPermissions.edit.includes(attribute)}
-                        isRequired={requiredFields.includes(attribute)}
-                      />
-                    );
-                  }
-
-                  if (isOfType(attribute, 'String')) {
-                    return (
-                      <TextAttribute
-                        type="text"
-                        value={localUser[attribute]}
-                        attributeLabel={attribute}
-                        className="attribute"
-                        key={attribute}
-                        onChange={onAttributeChange}
-                        isDisabled={!userPermissions.edit.includes(attribute)}
-                        isRequired={requiredFields.includes(attribute)}
-                      />
-                    );
-                  }
-
-                  return <div key={attribute} />;
-                })
-              }
-            </div>
-            {
-              // Message displayed upon successfully updating member
-              successMessage ? (
-                <div className="profile-alert">
-                  <Message icon big positive>
-                    <Icon name="thumbs up" />
-                    <Message.Content>
-                      <Message.Header>
-                        {newUser ? 'Create User' : 'Update'} Succeeded!
-                      </Message.Header>
-                      {successMessage}
-                    </Message.Content>
-                  </Message>
-                </div>
-              ) : (
-                <div />
-              )
-            }
-
-            {
-              // Message displayed upon receiving an error response
-              errorMessage !== null && errorMessage !== undefined ? (
-                <div className="profile-alert">
-                  <Message className="profile-alert" icon big negative>
-                    <Icon name="warning circle" />
-                    <Message.Content>
-                      <Message.Header>
-                        {newUser ? 'Create User' : 'Update'} Failed!
-                      </Message.Header>
-                      {errorMessage}
-                    </Message.Content>
-                  </Message>
-                </div>
-              ) : (
-                <div />
-              )
-            }
-
-            {userPermissions.edit.length > 0 ? (
-              <>
-                <Button
-                  size="big"
-                  id="submit-button"
-                  disabled={_.isEqual(upstreamUser, localUser)}
-                  type="large"
-                  onClick={submitChanges}
-                >
-                  {newUser ? 'Create User' : 'Update'}
-                </Button>
-              </>
-            ) : (
-              <div />
-            )}
-          </Form>
-        </Card.Content>
-      </Card>
+const Profile = () => (
+  <div className="profile-page">
+    <Page title="Profile">
+      <ProfileCard />
     </Page>
-  );
-};
+  </div>
+);
 
 export default Profile;