diff --git a/template/src/components/AccountTab/AccountTab.js b/template/src/components/AccountTab/AccountTab.js
index 65dc34a0..4ed3f97c 100644
--- a/template/src/components/AccountTab/AccountTab.js
+++ b/template/src/components/AccountTab/AccountTab.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react";
 
 import PropTypes from "prop-types";
 
@@ -102,14 +102,35 @@ const initialState = {
   errors: null,
 };
 
-class AccountTab extends Component {
-  constructor(props) {
-    super(props);
+function AccountTab() {
 
-    this.state = initialState;
-  }
+  const [initialState, useInitialState] = useState(""); 
 
-  getNameInitialsOrIcon = () => {
+  useEffect(() => {
+    const { user, userData } = this.props;
+
+    this.setState({
+      profileCompletion: authentication.getProfileCompletion({
+        ...user,
+        ...userData,
+      }),
+      securityRating: authentication.getSecurityRating(user, userData),
+    });
+  })
+
+  useEffect(() => {
+    const { avatarUrl } = this.state;
+
+    if (avatarUrl) {
+      URL.revokeObjectURL(avatarUrl);
+
+      this.setState({
+        avatarUrl: "",
+      });
+    }
+  })
+
+  const getNameInitialsOrIcon = () => {
     const { user } = this.props;
 
     if (!user) {
@@ -138,7 +159,7 @@ class AccountTab extends Component {
     return <PersonIcon className={classes.personIcon} />;
   };
 
-  uploadAvatar = () => {
+  const uploadAvatar = () => {
     const { avatar } = this.state;
 
     if (!avatar) {
@@ -185,7 +206,7 @@ class AccountTab extends Component {
     );
   };
 
-  removeAvatar = () => {
+  const removeAvatar = () => {
     const { user } = this.props;
 
     const { avatar, avatarUrl } = this.state;
@@ -244,7 +265,7 @@ class AccountTab extends Component {
     }
   };
 
-  showField = (fieldId) => {
+  const showField = (fieldId) => {
     if (!fieldId) {
       return;
     }
@@ -254,7 +275,7 @@ class AccountTab extends Component {
     });
   };
 
-  hideFields = (callback) => {
+  const hideFields = (callback) => {
     this.setState(
       {
         showingField: "",
@@ -272,7 +293,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeFirstName = () => {
+  const changeFirstName = () => {
     const { firstName } = this.state;
 
     const errors = validate(
@@ -346,7 +367,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeLastName = () => {
+  const changeLastName = () => {
     const { lastName } = this.state;
 
     const errors = validate(
@@ -420,7 +441,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeUsername = () => {
+  const changeUsername = () => {
     const { username } = this.state;
 
     const errors = validate(
@@ -494,7 +515,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeEmailAddress = () => {
+  const changeEmailAddress = () => {
     const { emailAddress } = this.state;
 
     const errors = validate(
@@ -568,7 +589,7 @@ class AccountTab extends Component {
     );
   };
 
-  verifyEmailAddress = () => {
+  const verifyEmailAddress = () => {
     this.setState(
       {
         performingAction: true,
@@ -605,7 +626,7 @@ class AccountTab extends Component {
     );
   };
 
-  changeField = (fieldId) => {
+  const changeField = (fieldId) => {
     switch (fieldId) {
       case "first-name":
         this.changeFirstName();
@@ -628,7 +649,7 @@ class AccountTab extends Component {
     }
   };
 
-  handleKeyDown = (event, fieldId) => {
+  const handleKeyDown = (event, fieldId) => {
     if (!event || !fieldId) {
       return;
     }
@@ -650,7 +671,7 @@ class AccountTab extends Component {
     }
   };
 
-  handleAvatarChange = (event) => {
+  const handleAvatarChange = (event) => {
     if (!event) {
       return;
     }
@@ -683,7 +704,7 @@ class AccountTab extends Component {
     });
   };
 
-  handleFirstNameChange = (event) => {
+  const handleFirstNameChange = (event) => {
     if (!event) {
       return;
     }
@@ -695,7 +716,7 @@ class AccountTab extends Component {
     });
   };
 
-  handleLastNameChange = (event) => {
+  const handleLastNameChange = (event) => {
     if (!event) {
       return;
     }
@@ -707,7 +728,7 @@ class AccountTab extends Component {
     });
   };
 
-  handleUsernameChange = (event) => {
+  const handleUsernameChange = (event) => {
     if (!event) {
       return;
     }
@@ -719,7 +740,7 @@ class AccountTab extends Component {
     });
   };
 
-  handleEmailAddressChange = (event) => {
+  const handleEmailAddressChange = (event) => {
     if (!event) {
       return;
     }
@@ -731,7 +752,6 @@ class AccountTab extends Component {
     });
   };
 
-  render() {
     // Styling
     const { classes } = this.props;
 
@@ -1618,31 +1638,6 @@ class AccountTab extends Component {
         </List>
       </DialogContent>
     );
-  }
-
-  componentDidMount() {
-    const { user, userData } = this.props;
-
-    this.setState({
-      profileCompletion: authentication.getProfileCompletion({
-        ...user,
-        ...userData,
-      }),
-      securityRating: authentication.getSecurityRating(user, userData),
-    });
-  }
-
-  componentWillUnmount() {
-    const { avatarUrl } = this.state;
-
-    if (avatarUrl) {
-      URL.revokeObjectURL(avatarUrl);
-
-      this.setState({
-        avatarUrl: "",
-      });
-    }
-  }
 }
 
 AccountTab.propTypes = {
diff --git a/template/src/components/AdminPage/AdminPage.js b/template/src/components/AdminPage/AdminPage.js
index 8f7269b6..b0038fde 100644
--- a/template/src/components/AdminPage/AdminPage.js
+++ b/template/src/components/AdminPage/AdminPage.js
@@ -1,11 +1,11 @@
-import React, { Component } from "react";
+import React from "react"; 
 
-import EmptyState from "../EmptyState";
+import EmptyState from '../EmptyState'; 
 
-class AdminPage extends Component {
-  render() {
-    return <EmptyState title="Admin" />;
-  }
+function AdminPage() {
+  return (
+    <EmptyState title="Admin" /> 
+  )
 }
 
-export default AdminPage;
+export default AdminPage; 
diff --git a/template/src/components/AlertDialog/AlertDialog.js b/template/src/components/AlertDialog/AlertDialog.js
index d1b2e5df..a500c2c1 100644
--- a/template/src/components/AlertDialog/AlertDialog.js
+++ b/template/src/components/AlertDialog/AlertDialog.js
@@ -1,70 +1,67 @@
-import React, { Component } from "react";
-
-import PropTypes from "prop-types";
-
-import { withStyles } from "@material-ui/core/styles";
-
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-} from "@material-ui/core";
-
-const styles = (theme) => ({
+import React from "react"; 
+import PropTypes from "prop-types"; 
+import { withStyles } from "@material-ui/core/styles"; 
+
+import { 
+  Dialog, 
+  DialogTitle, 
+  DialogContent, 
+  DialogContentText, 
+  DialogActions, 
+} from "@material-ui/core"; 
+
+const styles = theme => ({
   noTitlePadding: {
-    paddingTop: theme.spacing(3),
-  },
-});
-
-class AlertDialog extends Component {
-  render() {
-    // Styling
-    const { classes } = this.props;
-
-    // Dialog Properties
-    const { dialogProps } = this.props;
-
-    // Custom Properties
-    const {
-      title,
-      contentText,
-      dismissiveAction,
-      confirmingAction,
-      acknowledgementAction,
-    } = this.props;
-
-    if ((dismissiveAction || confirmingAction) && acknowledgementAction) {
-      console.error(
-        "Dialogs should contain a maximum of two actions. " +
-          "If a single action is provided, it must be an acknowledgement action. " +
-          "If two actions are provided, one must be a confirming action, and the other a dismissing action. " +
-          "Providing a third action such as “Learn more” is not recommended as it navigates the user away from the dialog, leaving the dialog task unfinished. " +
-          "https://material.io/design/components/dialogs.html#actions"
-      );
+    paddingTop: theme.spacing(3), 
+  }, 
+}); 
+
+function AlertDialog() {
+
+  //Styling 
+  const { classes } = this.props; 
+
+  //Dialog Properties 
+  const { dialogProps } = this.props; 
+
+  //Custom Properties 
+  const {
+    title, 
+    contentText, 
+    dismissiveAction, 
+    confirmAction, 
+    acknowledgementAction, 
+  } = this.props; 
+
+  if ((dismissiveAction || confirmAction) && acknowledgementAction) {
+    console.error(
+      "Dialogs should contain a maximum of two actions. " +
+        "If a single action is provided, it must be an acknowledgement action. " +
+        "If two actions are provided, one must be a confirming action, and the other a dismissing action. " +
+        "Providing a third action such as “Learn more” is not recommended as it navigates the user away from the dialog, leaving the dialog task unfinished. " +
+        "https://material.io/design/components/dialogs.html#actions"
+    );
 
-      return null;
-    }
+    return null; 
+  }
 
-    return (
-      <Dialog {...dialogProps}>
-        {title && <DialogTitle>{title}</DialogTitle>}
+  return (
+    <Dialog {...dialogProps}>
+      {title && <DialogTitle>{title}</DialogTitle>}
 
-        <DialogContent className={title ? null : classes.noTitlePadding}>
-          <DialogContentText>{contentText}</DialogContentText>
-        </DialogContent>
+      <DialogContent className={title ? null : classes.noTitlePadding}>
+        <DialogContentText>{contentText}</DialogContentText>
+      </DialogContent>
 
-        {(dismissiveAction || confirmingAction || acknowledgementAction) && (
-          <DialogActions>
-            {dismissiveAction}
-            {confirmingAction}
-            {acknowledgementAction}
-          </DialogActions>
+      {(dismissiveAction || confirmAction || acknowledgementAction) && (
+        <DialogActions>
+          {dismissiveAction}
+          {confirmAction}
+          {acknowledgementAction}
+        </DialogActions>
         )}
-      </Dialog>
-    );
-  }
+    </Dialog>
+  )
 }
 
 AlertDialog.propTypes = {
diff --git a/template/src/components/AuthProviderList/AuthProviderList.js b/template/src/components/AuthProviderList/AuthProviderList.js
index e7d0cbae..1dc74d42 100644
--- a/template/src/components/AuthProviderList/AuthProviderList.js
+++ b/template/src/components/AuthProviderList/AuthProviderList.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 
 import PropTypes from "prop-types";
 
@@ -8,43 +8,42 @@ import { Box, ButtonGroup, Button } from "@material-ui/core";
 
 import authProviders from "../../data/auth-providers";
 
-class AuthProviderList extends Component {
-  render() {
-    // Properties
-    const { gutterBottom, performingAction } = this.props;
-
-    // Events
-    const { onAuthProviderClick } = this.props;
-
-    return (
-      <Box mb={gutterBottom ? 3 : 0}>
-        <ButtonGroup
-          disabled={performingAction}
-          fullWidth
-          orientation="vertical"
-          variant="outlined"
-        >
-          {authProviders.map((authProvider) => {
-            const AuthProviderButton = withStyles({
-              root: {
-                color: authProvider.color,
-              },
-            })(Button);
-
-            return (
-              <AuthProviderButton
-                key={authProvider.id}
-                startIcon={authProvider.icon}
-                onClick={() => onAuthProviderClick(authProvider)}
-              >
-                {authProvider.name}
-              </AuthProviderButton>
-            );
-          })}
-        </ButtonGroup>
-      </Box>
-    );
-  }
+function AuthProviderList() {
+  
+  //Properties 
+  const {gutterBottom, performingAction } = this.props; 
+
+  //Events 
+  const { onAuthProviderClick } = this.props; 
+  
+  return (
+    <Box mb={gutterBottom ? 3 : 0}>
+      <ButtonGroup
+        disabled={performingAction}
+        fullWidth
+        orientation="vertical"
+        variant="outlined"
+      >
+        {authProviders.map((authProvider) => {
+        const AuthProviderButton = withStyles({
+          root: {
+            color: authProvider.color,
+          },
+        })(Button);
+
+        return (
+          <AuthProviderButton
+            key={authProvider.id}
+            startIcon={authProvider.icon}
+            onClick={() => onAuthProviderClick(authProvider)}
+          >
+            {authProvider.name}
+          </AuthProviderButton>
+          );
+        })}
+      </ButtonGroup>
+    </Box>
+  )
 }
 
 AuthProviderList.defaultProps = {
@@ -61,4 +60,4 @@ AuthProviderList.propTypes = {
   onAuthProviderClick: PropTypes.func.isRequired,
 };
 
-export default AuthProviderList;
+export default AuthProviderList; 
diff --git a/template/src/components/ConfirmationDialog/ConfirmationDialog.js b/template/src/components/ConfirmationDialog/ConfirmationDialog.js
index 31e215b3..4e52db51 100644
--- a/template/src/components/ConfirmationDialog/ConfirmationDialog.js
+++ b/template/src/components/ConfirmationDialog/ConfirmationDialog.js
@@ -1,36 +1,34 @@
-import React, { Component } from "react";
+import React from "react";
 
 import PropTypes from "prop-types";
 
 import { Dialog, DialogTitle, DialogActions } from "@material-ui/core";
 
-class ConfirmationDialog extends Component {
-  render() {
-    // Dialog Properties
-    const { dialogProps } = this.props;
+function ConfirmationDialog() {
 
-    // Custom Properties
-    const { title, content, dismissiveAction, confirmingAction } = this.props;
+  //Dialog Properties 
+  const { dialogProps } = this.props; 
 
-    if (!dismissiveAction || !confirmingAction) {
-      console.error("Provide confirmation and dismissive buttons.");
+  //Custom Properties 
+  const { title, content, dismissiveAction, confirmingAction } = this.props; 
 
-      return null;
-    }
+  if (!dismissiveAction || !confirmingAction) {
+    console.error("Provide confirmation and dismissive buttons.");
+    return null;
+  }
 
-    return (
-      <Dialog {...dialogProps}>
-        {title && <DialogTitle>{title}</DialogTitle>}
+  return (
+    <Dialog {...dialogProps}>
+      {title && <DialogTitle>{title}</DialogTitle>}
 
-        {content}
+      {content} 
 
-        <DialogActions>
-          {dismissiveAction}
-          {confirmingAction}
-        </DialogActions>
-      </Dialog>
-    );
-  }
+      <DialogActions>
+        {dismissiveAction}
+        {confirmingAction}
+      </DialogActions>
+    </Dialog>
+  )
 }
 
 ConfirmationDialog.propTypes = {
diff --git a/template/src/components/DeleteAccountDialog/DeleteAccountDialog.js b/template/src/components/DeleteAccountDialog/DeleteAccountDialog.js
index 1b8cb07a..2a2339d3 100644
--- a/template/src/components/DeleteAccountDialog/DeleteAccountDialog.js
+++ b/template/src/components/DeleteAccountDialog/DeleteAccountDialog.js
@@ -1,84 +1,75 @@
-import React, { Component } from "react";
-
-import PropTypes from "prop-types";
-
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-  Hidden,
-  Box,
-  TextField,
-  Button,
-} from "@material-ui/core";
+import React, { useState } from "react"; 
+
+import { 
+  Dialog, 
+  DialogTitle, 
+  DialogContent, 
+  DialogContentText, 
+  DialogActions, 
+  Hidden, 
+  Box, 
+  TextField, 
+  Button, 
+} from "@material-ui/core"; 
 
 const initialState = {
-  username: "",
-};
+  username: "", 
+} 
 
-class DeleteAccountDialog extends Component {
-  constructor(props) {
-    super(props);
+function DeleteAccountDialog() {
 
-    this.state = initialState;
-  }
+  const [initialState, setInitialState] = useState(""); 
 
-  handleKeyPress = (event) => {
-    const { userData } = this.props;
+  const handleKeyPress = event => {
+    const { userData } = this.props; 
 
     if (userData && userData.username) {
-      const { username } = this.state;
+      const { username } = this.state; 
 
       if (!username) {
-        return;
+        return; 
       }
 
       if (username !== userData.username) {
-        return;
+        return; 
       }
     }
 
-    const key = event.key;
+    const key = event.key; 
 
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-      return;
-    }
+      return; 
+    } 
 
     if (key === "Enter") {
-      this.props.deleteAccount();
+      this.props.deleteAccount(); 
     }
-  };
+  }
 
-  handleExited = () => {
-    this.setState(initialState);
-  };
+  const handleExited = () => {
+    setInitialState(initialState); 
+  }
 
-  handleUsernameChange = (event) => {
-    const username = event.target.value;
+  const handleUsernameChange = event => {
+    const username = event.target.value; 
 
     this.setState({
-      username: username,
-    });
-  };
+      username: username, 
+    })
+  }
 
-  render() {
-    // Dialog Properties
-    const { dialogProps } = this.props;
+  const { dialogProps } = this.props; 
 
-    // Custom Properties
-    const { performingAction, userData } = this.props;
+  const { performingAction, userData } = this.props; 
 
-    // Custom Functions
-    const { deleteAccount } = this.props;
+  const { deleteAccount } = this.props; 
 
-    const { username } = this.state;
+  const { username } = this.state; 
 
-    const hasUsername = userData && userData.username;
+  const hasUsername = userData && userData.username; 
 
-    return (
-      <Dialog
+  return (
+    <Dialog
         {...dialogProps}
         onKeyPress={this.handleKeyPress}
         onExited={this.handleExited}
@@ -140,20 +131,7 @@ class DeleteAccountDialog extends Component {
           </Button>
         </DialogActions>
       </Dialog>
-    );
-  }
+  )
 }
 
-DeleteAccountDialog.propTypes = {
-  // Dialog Properties
-  dialogProps: PropTypes.object.isRequired,
-
-  // Custom Properties
-  performingAction: PropTypes.bool.isRequired,
-  userData: PropTypes.object,
-
-  // Custom Functions
-  deleteAccount: PropTypes.func.isRequired,
-};
-
-export default DeleteAccountDialog;
+export default DeleteAccountDialog; 
diff --git a/template/src/components/DialogHost/DialogHost.js b/template/src/components/DialogHost/DialogHost.js
index 69d5ccc6..b74e4ffc 100644
--- a/template/src/components/DialogHost/DialogHost.js
+++ b/template/src/components/DialogHost/DialogHost.js
@@ -1,34 +1,30 @@
-import React, { Component } from "react";
+import React from "react"; 
+import PropTypes from "prop-types"; 
+import { Hidden } from "@material-ui/core"; 
+import AboutDialog from "../AboutDialog"; 
 
-import PropTypes from "prop-types";
+import SignUpDialog from "../SignUpDialog"; 
+import SignInDialog from "../SignInDialog"; 
+import SettingsDialog from "../SettingsDialog"; 
+import DeleteAccountDialog from "../DeleteAccountDialog"; 
+import AlertDialog from "../AlertDialog"; 
 
-import { Hidden } from "@material-ui/core";
+function DialogHost() {
+  //Properties 
+  const { performingAction, theme, user, userData, dialogs } = this.props;
 
-import AboutDialog from "../AboutDialog";
-
-import SignUpDialog from "../SignUpDialog";
-import SignInDialog from "../SignInDialog";
-import SettingsDialog from "../SettingsDialog";
-import DeleteAccountDialog from "../DeleteAccountDialog";
-import AlertDialog from "../AlertDialog";
-
-class DialogHost extends Component {
-  render() {
-    // Properties
-    const { performingAction, theme, user, userData, dialogs } = this.props;
-
-    // Functions
-    const { openSnackbar } = this.props;
+  // Functions
+  const { openSnackbar } = this.props;
 
-    const aboutDialog = dialogs.aboutDialog;
-    const signUpDialog = dialogs.signUpDialog;
-    const signInDialog = dialogs.signInDialog;
-    const settingsDialog = dialogs.settingsDialog;
-    const deleteAccountDialog = dialogs.deleteAccountDialog;
-    const signOutDialog = dialogs.signOutDialog;
+  const aboutDialog = dialogs.aboutDialog;
+  const signUpDialog = dialogs.signUpDialog;
+  const signInDialog = dialogs.signInDialog;
+  const settingsDialog = dialogs.settingsDialog;
+  const deleteAccountDialog = dialogs.deleteAccountDialog;
+  const signOutDialog = dialogs.signOutDialog;
 
-    return (
-      <>
+  return (
+    <>
         <AboutDialog
           dialogProps={aboutDialog.dialogProps}
           performingAction={performingAction}
@@ -181,8 +177,7 @@ class DialogHost extends Component {
           )}
         </Hidden>
       </>
-    );
-  }
+  ); 
 }
 
 DialogHost.propTypes = {
@@ -195,6 +190,6 @@ DialogHost.propTypes = {
 
   // Functions
   openSnackbar: PropTypes.func.isRequired,
-};
+}; 
 
-export default DialogHost;
+export default DialogHost; 
diff --git a/template/src/components/ErrorBoundary/ErrorBoundary.js b/template/src/components/ErrorBoundary/ErrorBoundary.js
index 730abfd6..7c2569e4 100644
--- a/template/src/components/ErrorBoundary/ErrorBoundary.js
+++ b/template/src/components/ErrorBoundary/ErrorBoundary.js
@@ -1,62 +1,44 @@
-import React, { Component } from "react";
+import React, { useState, useEffect } from "react"; 
+import PropTypes from "prop-types"; 
+import * as Sentry from "@sentry/browser"; 
+import EmptyState from "../EmptyState"; 
+import { ReactComponent as ErrorIllustration } from "../../illustrations/error.svg"; 
 
-import PropTypes from "prop-types";
+function ErrorBoundary() {
 
-import * as Sentry from "@sentry/browser";
+  //useState 
+  const [hasError, setHasError] = useState(false); 
+  const [eventId, setEventId] = useState(null); 
 
-import EmptyState from "../EmptyState";
-
-import { ReactComponent as ErrorIllustration } from "../../illustrations/error.svg";
-
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hasError: false,
-      eventId: null,
-    };
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error, errorInfo) {
+  useEffect((error, errorInfo) => {
     Sentry.withScope((scope) => {
-      scope.setExtras(errorInfo);
-
-      const eventId = Sentry.captureException(error);
+      scope.setExtras(errorInfo); 
 
-      this.setState({
-        eventId: eventId,
-      });
-    });
-  }
+      const eventId = Sentry.captureException(error); 
 
-  render() {
-    // Properties
-    const { children } = this.props;
+      setEventId(eventId); 
+    })
+  }) 
 
-    const { hasError } = this.state;
+  //Properties 
+  const { children } = this.props; 
 
-    if (hasError) {
-      return (
-        <EmptyState
-          image={<ErrorIllustration />}
-          title="Something went wrong"
-          description="The app failed to load"
-        />
-      );
-    }
-
-    return children;
+  if (hasError) {
+    return (
+      <EmptyState
+        images={<ErrorIllustration />}
+        title="Something went wrong" 
+        description="The app failed to load"
+      /> 
+    ); 
   }
+
+  return children; 
 }
 
 ErrorBoundary.propTypes = {
-  // Properties
-  children: PropTypes.array.isRequired,
-};
+  //Properties 
+  children: PropTypes.array.isRequired, 
+}; 
 
-export default ErrorBoundary;
+export default ErrorBoundary; 
diff --git a/template/src/components/HomePage/HomePage.js b/template/src/components/HomePage/HomePage.js
index e21664e9..98605fae 100644
--- a/template/src/components/HomePage/HomePage.js
+++ b/template/src/components/HomePage/HomePage.js
@@ -1,103 +1,93 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react"; 
+import { PropTypes } from "prop-types"; 
+import { withRouter } from "react-router-dom"; 
+import { auth } from "../../firebase"; 
+import authentication from "../../services/authentication"; 
+import EmptyState from "../EmptyState"; 
 
-import PropTypes from "prop-types";
+import { ReactComponent as CabinIllustration } from "../../illustrations/cabin.svg"; 
+import { ReactComponent as InsertBlackIllustration } from "../../illustrations/insert-black.svg"; 
 
-import { withRouter } from "react-router-dom";
+function HomePage() {
+  
+  useEffect(() => {
+    signInWithEmailLink(); 
+  }, []); 
 
-import { auth } from "../../firebase";
-
-import authentication from "../../services/authentication";
-
-import EmptyState from "../EmptyState";
-
-import { ReactComponent as CabinIllustration } from "../../illustrations/cabin.svg";
-import { ReactComponent as InsertBlockIllustration } from "../../illustrations/insert-block.svg";
-
-class HomePage extends Component {
-  signInWithEmailLink = () => {
-    const { user } = this.props;
+  const signInWithEmailLink = () => {
+    const { user } = this.props; 
 
     if (user) {
-      return;
+      return; 
     }
 
-    const emailLink = window.location.href;
+    const emaillink = window.location.href; 
 
-    if (!emailLink) {
-      return;
+    if (!emaillink) {
+      return; 
     }
 
-    if (auth.isSignInWithEmailLink(emailLink)) {
-      let emailAddress = localStorage.getItem("emailAddress");
+    if (auth.isSignInWithEmailLink(emaillink)) {
+      let emailAddress = localStorage.getItem("emailAddress"); 
 
       if (!emailAddress) {
-        this.props.history.push("/");
+        this.props.history.push("/"); 
 
-        return;
+        return; 
       }
 
       authentication
-        .signInWithEmailLink(emailAddress, emailLink)
+        .signInWithEmailLink(emailAddress, emaillink)
         .then((value) => {
-          const user = value.user;
-          const displayName = user.displayName;
-          const emailAddress = user.email;
+          const user = value.user; 
+          const displayName = user.displayName; 
+          const emailAddress = user.email; 
 
           this.props.openSnackbar(
             `Signed in as ${displayName || emailAddress}`
-          );
+          ); 
         })
         .catch((reason) => {
-          const code = reason.code;
-          const message = reason.message;
-
-          switch (code) {
-            case "auth/expired-action-code":
-            case "auth/invalid-email":
-            case "auth/user-disabled":
-              this.props.openSnackbar(message);
-              break;
-
-            default:
-              this.props.openSnackbar(message);
-              return;
+          const code = reason.code; 
+          const message = reason.message; 
+
+          switch(code) {
+            case "auth/expired-action-code": 
+            case "auth/invalid-email": 
+            case "auth/user-disabled": 
+              this.props.openSnackbar(message); 
+              break; 
+
+            default: 
+              this.props.openSnackbar(message); 
+              return; 
           }
         })
         .finally(() => {
-          this.props.history.push("/");
-        });
+          this.props.history.push("/"); 
+        }); 
     }
-  };
+  }; 
 
-  render() {
-    const { user } = this.props;
-
-    if (user) {
-      return (
-        <EmptyState
-          image={<CabinIllustration />}
-          title="Home"
-          description="This is the home page. You can edit it from HomePage.js."
-        />
-      );
-    }
+  const { user } = this.props; 
 
+  if (user) {
     return (
       <EmptyState
-        image={<InsertBlockIllustration />}
-        title="RMUIF"
-        description="Supercharged version of Create React App with all the bells and whistles."
-      />
-    );
+        image={<CabinIllustration />}
+        title="Home"
+        description="This is the home page. You can edit it from HomePage.js."
+    /> 
+    ); 
   }
 
-  componentDidMount() {
-    this.signInWithEmailLink();
-  }
+  return (
+    <EmptyState
+      image={<InsertBlackIllustration />}
+      title="RMUIF"
+      description="Supercharged version of Create React App with all the bells and whistles."
+  /> 
+  ); 
 }
 
-HomePage.propTypes = {
-  user: PropTypes.object,
-};
-
-export default withRouter(HomePage);
+export default withRouter(HomePage); 
diff --git a/template/src/components/LaunchScreen/LaunchScreen.js b/template/src/components/LaunchScreen/LaunchScreen.js
index c1ef8610..e8f9297f 100644
--- a/template/src/components/LaunchScreen/LaunchScreen.js
+++ b/template/src/components/LaunchScreen/LaunchScreen.js
@@ -1,37 +1,33 @@
-import React, { Component } from "react";
+import React from "react"; 
+import PropTypes from "prop-types"; 
+import { withStyles } from "@material-ui/core/styles"; 
+import { CircularProgress } from "@material-ui/core"; 
 
-import PropTypes from "prop-types";
-
-import { withStyles } from "@material-ui/core/styles";
-
-import { CircularProgress } from "@material-ui/core";
-
-const styles = (theme) => ({
+const styles = theme => ({
   center: {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    textAlign: "center",
-  },
-});
-
-class LaunchScreen extends Component {
-  render() {
-    // Styling
-    const { classes } = this.props;
-
-    return (
-      <div className={classes.center}>
-        <CircularProgress />
-      </div>
-    );
-  }
+    position: "absolute", 
+    top: "50%", 
+    left: "50%", 
+    transform: "translate(-50%, -50%)", 
+    textAlign: "center", 
+  }, 
+}); 
+
+function LaunchScreen() {
+  
+  //Styling 
+  const { classes } = this.props; 
+
+  return (
+    <div className={classes.center}>
+      <CircularProgress /> 
+    </div>
+  )
 }
 
 LaunchScreen.propTypes = {
-  // Styling
-  classes: PropTypes.object.isRequired,
-};
+  //Styling 
+  classes: PropTypes.object.isRequired, 
+}; 
 
-export default withStyles(styles)(LaunchScreen);
+export default withStyles(styles)(LaunchScreen); 
diff --git a/template/src/components/LinksTab/LinksTab.js b/template/src/components/LinksTab/LinksTab.js
index f3da89f1..22c873ea 100644
--- a/template/src/components/LinksTab/LinksTab.js
+++ b/template/src/components/LinksTab/LinksTab.js
@@ -1,7 +1,5 @@
-import React, { Component } from "react";
-
-import PropTypes from "prop-types";
-
+import React, { useState } from "react"; 
+import PropTypes from "prop-types"; 
 import {
   DialogContent,
   List,
@@ -13,166 +11,139 @@ import {
   Tooltip,
   IconButton,
 } from "@material-ui/core";
-
 import { Link as LinkIcon, LinkOff as LinkOffIcon } from "@material-ui/icons";
-
 import authProviders from "../../data/auth-providers";
-
 import authentication from "../../services/authentication";
 
-class LinksTab extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      performingAction: false,
-    };
+function LinksTab() {
+
+  const [performingAction, setPerformingAction] = useState(false); 
+
+  const linkAuthProvider = authProvider => {
+    setPerformingAction(true); 
+
+    authentication
+      .linkAuthProvider(authProvider)
+      .then((value) => {
+        this.props.openSnackbar(`${authProvider.name} linked`, 5);
+      })
+      .catch((reason) => {
+        const code = reason.code;
+        const message = reason.message;
+
+        switch (code) {
+          default:
+            this.props.openSnackbar(message);
+            return;
+        }
+      })
+      .finally(() => {
+        setPerformingAction(false); 
+    });
   }
 
-  linkAuthProvider = (authProvider) => {
-    this.setState(
-      {
-        performingAction: true,
-      },
-      () => {
-        authentication
-          .linkAuthProvider(authProvider)
-          .then((value) => {
-            this.props.openSnackbar(`${authProvider.name} linked`, 5);
-          })
-          .catch((reason) => {
-            const code = reason.code;
-            const message = reason.message;
-
-            switch (code) {
-              default:
-                this.props.openSnackbar(message);
-                return;
-            }
-          })
-          .finally(() => {
-            this.setState({
-              performingAction: false,
-            });
-          });
-      }
-    );
-  };
-
-  unlinkAuthProvider = (authProvider) => {
-    this.setState(
-      {
-        performingAction: true,
-      },
-      () => {
-        authentication
-          .unlinkAuthProvider(authProvider.id)
-          .then((value) => {
-            this.props.openSnackbar(`${authProvider.name} unlinked`, 4);
-          })
-          .catch((reason) => {
-            const code = reason.code;
-            const message = reason.message;
-
-            switch (code) {
-              default:
-                this.props.openSnackbar(message);
-                return;
-            }
-          })
-          .finally(() => {
-            this.setState({
-              performingAction: false,
-            });
-          });
-      }
-    );
-  };
-
-  render() {
-    // Properties
-    const { theme } = this.props;
-
-    const { performingAction } = this.state;
-
-    return (
-      <DialogContent>
-        <List disablePadding>
-          {authProviders.map((authProvider) => {
-            const authProviderData = authentication.authProviderData(
-              authProvider.id
-            );
-            let identifier = null;
-
-            if (authProviderData) {
-              const displayName = authProviderData.displayName;
-              const emailAddress = authProviderData.email;
-              const phoneNumber = authProviderData.phoneNumber;
-
-              identifier = displayName || emailAddress || phoneNumber;
-            }
-
-            return (
-              <ListItem key={authProvider.id}>
-                <ListItemIcon>
-                  <Box color={theme.dark ? null : authProvider.color}>
-                    {authProvider.icon}
-                  </Box>
-                </ListItemIcon>
+  const unlinkAuthProvider = authProvider => {
+    setPerformingAction(true); 
+
+    authentication
+      .unlinkAuthProvider(authProvider.id)
+      .then((value) => {
+        this.props.openSnackbar(`${authProvider.name} unlinked`, 4);
+      })
+      .catch((reason) => {
+        const code = reason.code;
+        const message = reason.message;
+
+        switch (code) {
+          default:
+            this.props.openSnackbar(message);
+            return;
+        }
+      })
+      .finally(() => {
+        setPerformingAction(false); 
+      });
+  }
 
+  const { theme } = this.props; 
+
+  return (
+    <DialogContent>
+      <List disablePadding>
+        {authProviders.map((authProvider) => {
+          const authProviderData = authentication.authProviderData(
+            authProvider.id
+          );
+          let identifier = null;
+
+          if (authProviderData) {
+            const displayName = authProviderData.displayName;
+            const emailAddress = authProviderData.email;
+            const phoneNumber = authProviderData.phoneNumber;
+
+            identifier = displayName || emailAddress || phoneNumber;
+          }
+
+          return (
+            <ListItem key={authProvider.id}>
+              <ListItemIcon>
+                <Box color={theme.dark ? null : authProvider.color}>
+                  {authProvider.icon}
+                </Box>
+              </ListItemIcon>
+
+              {authProviderData && (
+                <ListItemText
+                  primary={authProvider.name}
+                  secondary={identifier}
+                />
+              )}
+
+              {!authProviderData && (
+                <ListItemText primary={authProvider.name} />
+              )}
+
+              <ListItemSecondaryAction>
                 {authProviderData && (
-                  <ListItemText
-                    primary={authProvider.name}
-                    secondary={identifier}
-                  />
+                  <Tooltip title="Unlink">
+                    <div>
+                      <IconButton
+                        disabled={performingAction}
+                        onClick={() => this.unlinkAuthProvider(authProvider)}
+                      >
+                        <LinkOffIcon />
+                      </IconButton>
+                    </div>
+                  </Tooltip>
                 )}
 
                 {!authProviderData && (
-                  <ListItemText primary={authProvider.name} />
+                  <Tooltip title="Link">
+                    <div>
+                      <IconButton
+                        disabled={performingAction}
+                        onClick={() => this.linkAuthProvider(authProvider)}
+                      >
+                        <LinkIcon />
+                      </IconButton>
+                    </div>
+                  </Tooltip>
                 )}
-
-                <ListItemSecondaryAction>
-                  {authProviderData && (
-                    <Tooltip title="Unlink">
-                      <div>
-                        <IconButton
-                          disabled={performingAction}
-                          onClick={() => this.unlinkAuthProvider(authProvider)}
-                        >
-                          <LinkOffIcon />
-                        </IconButton>
-                      </div>
-                    </Tooltip>
-                  )}
-
-                  {!authProviderData && (
-                    <Tooltip title="Link">
-                      <div>
-                        <IconButton
-                          disabled={performingAction}
-                          onClick={() => this.linkAuthProvider(authProvider)}
-                        >
-                          <LinkIcon />
-                        </IconButton>
-                      </div>
-                    </Tooltip>
-                  )}
-                </ListItemSecondaryAction>
-              </ListItem>
-            );
-          })}
-        </List>
-      </DialogContent>
-    );
-  }
+              </ListItemSecondaryAction>
+            </ListItem>
+          );
+        })}
+      </List>
+    </DialogContent>
+  )
 }
 
 LinksTab.propTypes = {
-  // Properties
-  theme: PropTypes.object.isRequired,
+  //Properties 
+  theme: PropTypes.object.isRequired, 
 
-  // Functions
-  openSnackbar: PropTypes.func.isRequired,
-};
+  //Functions 
+  openSnackbar: PropTypes.func.isRequired, 
+}; 
 
-export default LinksTab;
+export default LinksTab; 
diff --git a/template/src/components/NotFoundPage/NotFoundPage.js b/template/src/components/NotFoundPage/NotFoundPage.js
index 2ae41801..c4ee683c 100644
--- a/template/src/components/NotFoundPage/NotFoundPage.js
+++ b/template/src/components/NotFoundPage/NotFoundPage.js
@@ -1,33 +1,26 @@
-import React, { Component } from "react";
-
+import React from "react";
 import { Link } from "react-router-dom";
-
 import { Fab, Box } from "@material-ui/core";
-
 import { Home as HomeIcon } from "@material-ui/icons";
-
 import EmptyState from "../EmptyState";
-
 import { ReactComponent as NotFoundIllustration } from "../../illustrations/not-found.svg";
 
-class NotFoundPage extends Component {
-  render() {
-    return (
-      <EmptyState
-        image={<NotFoundIllustration />}
-        title="Page doesn’t exist."
-        description="The page you’re trying to access doesn’t exist."
-        button={
-          <Fab variant="extended" color="primary" component={Link} to="/">
-            <Box clone mr={1}>
-              <HomeIcon />
-            </Box>
-            Home
-          </Fab>
-        }
+function NotFoundPage() {
+  return (
+    <EmptyState
+      image={<NotFoundIllustration />}
+      title="Page doesn't exist."
+      description="The page you're trying to access doesn't exist."
+      button={
+        <Fab variant="extended" color="primary" component={Link} to="/">
+          <Box clone mr={1}>
+            <HomeIcon /> 
+          </Box>
+          Home
+        </Fab> 
+      }
       />
-    );
-  }
+  )
 }
 
-export default NotFoundPage;
+export default NotFoundPage;