diff --git a/gatsby-config.js b/gatsby-config.js
index a1eb2154..eebf8d74 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -17,6 +17,7 @@ module.exports = {
         ],
       },
     },
+    `gatsby-plugin-lodash`,
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-manifest`,
diff --git a/package-lock.json b/package-lock.json
index 230bded4..39e59947 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3426,6 +3426,18 @@
         }
       }
     },
+    "babel-plugin-lodash": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/babel-plugin-lodash/-/babel-plugin-lodash-3.3.4.tgz",
+      "integrity": "sha512-yDZLjK7TCkWl1gpBeBGmuaDIFhZKmkoL+Cu2MUUjv5VxUZx/z7tBGBCBcQs5RI1Bkz5LLmNdjx7paOyQtMovyg==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0-beta.49",
+        "@babel/types": "^7.0.0-beta.49",
+        "glob": "^7.1.1",
+        "lodash": "^4.17.10",
+        "require-package-name": "^2.0.1"
+      }
+    },
     "babel-plugin-macros": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
@@ -8381,6 +8393,16 @@
       "resolved": "https://registry.npmjs.org/gatsby-plugin-firebase/-/gatsby-plugin-firebase-0.2.0-beta.4.tgz",
       "integrity": "sha512-F1uh9T5dY38aeNvKzqj+3K655dce1QS70wuG4bhV9L3cnTJR2vitTWyIoCvRJJfPs7Xq7LgjUDmHDrEos4S3gQ=="
     },
+    "gatsby-plugin-lodash": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-lodash/-/gatsby-plugin-lodash-3.3.9.tgz",
+      "integrity": "sha512-ZfqxyWiWMn4jyVSv9VMk1HhUHfxXEcrbheMOZ06eruIzZBknP48E2wcydF59B1foowmDucVNyfP5B7p98IY6yg==",
+      "requires": {
+        "@babel/runtime": "^7.10.3",
+        "babel-plugin-lodash": "^3.3.4",
+        "lodash-webpack-plugin": "^0.11.5"
+      }
+    },
     "gatsby-plugin-manifest": {
       "version": "2.4.17",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.17.tgz",
@@ -11777,6 +11799,14 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-webpack-plugin": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/lodash-webpack-plugin/-/lodash-webpack-plugin-0.11.5.tgz",
+      "integrity": "sha512-QWfEIYxpixOdbd6KBe5g6MDWcyTgP3trDXwKHFqTlXrWiLcs/67fGQ0IWeRyhWlTITQIgMpJAYd2oeIztuV5VA==",
+      "requires": {
+        "lodash": "^4.17.4"
+      }
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -15807,6 +15837,11 @@
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
     },
+    "require-package-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz",
+      "integrity": "sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk="
+    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
diff --git a/package.json b/package.json
index b460fa16..f5121db0 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.12",
     "gatsby-plugin-firebase": "^0.2.0-beta.4",
+    "gatsby-plugin-lodash": "^3.3.9",
     "gatsby-plugin-manifest": "^2.4.17",
     "gatsby-plugin-postcss": "^2.3.9",
     "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
@@ -27,6 +28,7 @@
     "gatsby-plugin-sharp": "^2.6.17",
     "gatsby-source-filesystem": "^2.3.18",
     "gatsby-transformer-sharp": "^2.5.10",
+    "lodash": "^4.17.15",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-firebase-hooks": "^2.2.0",
diff --git a/src/components/landing/Hero.js b/src/components/landing/Hero.js
index 84386b5a..4f6c592c 100644
--- a/src/components/landing/Hero.js
+++ b/src/components/landing/Hero.js
@@ -1,36 +1,21 @@
 import React, { useContext } from "react";
-import { useStaticQuery, graphql } from "gatsby";
-import GatsbyImage from "gatsby-image";
 import { FaGithub } from "react-icons/fa";
 import ThemeContext from "../../contexts/ThemeContext";
 import ModalContext from "../../contexts/ModalContext";
 import UserContext from "../../contexts/UserContext";
 import Button from "../shared/Button";
+import Logo from "../shared/Logo";
 
 const Hero = () => {
   const { user, loading } = useContext(UserContext);
   const { toggleDarkMode } = useContext(ThemeContext);
   const { authModal } = useContext(ModalContext);
-  const { file } = useStaticQuery(graphql`
-    query {
-      file(relativePath: { eq: "logo.png" }) {
-        childImageSharp {
-          fixed(width: 256, height: 256) {
-            ...GatsbyImageSharpFixed
-          }
-        }
-      }
-    }
-  `);
 
   const handleLogin = () => authModal.setOpen(true);
 
   return (
     <div className="flex items-center">
-      <GatsbyImage
-        className="shadow-md rounded"
-        fixed={file.childImageSharp.fixed}
-      />
+      <Logo size="256px" />
 
       <div className="ml-12">
         <h1 className="text-5xl font-bold">Reactive Resume</h1>
diff --git a/src/components/shared/Logo.js b/src/components/shared/Logo.js
new file mode 100644
index 00000000..6f0e5e27
--- /dev/null
+++ b/src/components/shared/Logo.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { useStaticQuery, graphql } from "gatsby";
+import GatsbyImage from "gatsby-image";
+
+const Logo = ({ size = "256px" }) => {
+  const { file } = useStaticQuery(graphql`
+    query {
+      file(relativePath: { eq: "logo.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 512) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <GatsbyImage
+      className="shadow-md rounded"
+      style={{ width: size, height: size }}
+      fluid={file.childImageSharp.fluid}
+    />
+  );
+};
+
+export default Logo;
diff --git a/src/contexts/UserContext.js b/src/contexts/UserContext.js
index d58b5f77..97ac01fd 100644
--- a/src/contexts/UserContext.js
+++ b/src/contexts/UserContext.js
@@ -2,9 +2,17 @@ import React, { createContext, useState, useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
 import firebase from "gatsby-plugin-firebase";
 import { toast } from "react-toastify";
+import { pick } from "lodash";
+
+const defaultUser = {
+  uid: null,
+  displayName: null,
+  email: null,
+  photoURL: null,
+};
 
 const defaultState = {
-  user: null,
+  user: defaultUser,
   logout: () => {},
   loginWithGoogle: async () => {},
 };
@@ -16,7 +24,18 @@ const UserProvider = ({ children }) => {
   const [user, setUser] = useState(null);
 
   useEffect(() => {
-    setUser(firebaseUser);
+    if (firebaseUser) {
+      const user = pick(firebaseUser, Object.keys(defaultUser));
+      setUser(user);
+
+      const addUserToDatabase = async () => {
+        const docRef = firebase.firestore().collection("users").doc(user.uid);
+        const snapshot = await docRef.get();
+        !snapshot.exists && docRef.set(user);
+      };
+
+      addUserToDatabase();
+    }
   }, [firebaseUser]);
 
   const loginWithGoogle = async () => {
@@ -31,6 +50,7 @@ const UserProvider = ({ children }) => {
 
   const logout = () => {
     firebase.auth().signOut();
+    setUser(null);
   };
 
   return (
diff --git a/src/modals/AuthModal.js b/src/modals/AuthModal.js
index 3061f02b..6d6631ab 100644
--- a/src/modals/AuthModal.js
+++ b/src/modals/AuthModal.js
@@ -19,9 +19,17 @@ const AuthModal = () => {
     console.log("Go to App");
   };
 
+  const getTitle = () =>
+    user ? `Welcome, ${user.displayName}` : "Who are you?";
+
+  const getMessage = () =>
+    user
+      ? `Awesome. Now that you've authenticated yourself, we can get on with the real reason you're here. Click on the Go to App button to start building your resume!`
+      : `Reactive Resume needs to know who you are so it can securely authenticate you into the app and show you only your information. Once you are in, you can start building your resume, editing it to add new skills or sharing it with the world!`;
+
   const loggedInAction = (
     <Fragment>
-      <Button className="mr-6" title="Logout" onClick={logout} />
+      <Button outline className="mr-8" title="Logout" onClick={logout} />
       <Button title="Go to App" onClick={handleGoToApp} />
     </Fragment>
   );
@@ -37,15 +45,10 @@ const AuthModal = () => {
   return (
     <BaseModal
       state={authModal}
-      title="Who are you?"
+      title={getTitle()}
       action={user ? loggedInAction : loggedOutAction}
     >
-      <p>
-        Reactive Resume needs to know who you are so it can securely
-        authenticate you into the app and show you only your information. Once
-        you are in, you can start building your resume, editing it to add new
-        skills or sharing it with the world!
-      </p>
+      <p>{getMessage()}</p>
     </BaseModal>
   );
 };
diff --git a/src/modals/BaseModal.module.css b/src/modals/BaseModal.module.css
index c7d9efcf..7a0d809f 100644
--- a/src/modals/BaseModal.module.css
+++ b/src/modals/BaseModal.module.css
@@ -20,7 +20,7 @@
 }
 
 .modal .body {
-  @apply my-8;
+  @apply mt-8 mb-10;
 }
 
 .modal .actions {