diff --git a/Client/src/Components/Avatar/Avatar.jsx b/Client/src/Components/Avatar/Avatar.jsx
new file mode 100644
index 000000000..d881de7bb
--- /dev/null
+++ b/Client/src/Components/Avatar/Avatar.jsx
@@ -0,0 +1,42 @@
+import { Avatar as MuiAvatar } from "@mui/material";
+import PropTypes from "prop-types";
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.src - Path to image for avatar
+ * @param {string} props.firstName - The users first name
+ * @param {string} props.lastName - The users last name
+ * @param {boolean} props.small - Specifies if avatar should be large
+ * @returns {JSX.Element}
+ * @example
+ * // Render a red label
+ * <Avatar src="assets/img" first="Alex" last="Holliday" small />
+ */
+
+const Avatar = ({ src, firstName, lastName, small }) => {
+  const borderColor = "#F0F2F4";
+  const smallStyle = small ? { width: 32, height: 32 } : {};
+  return (
+    <MuiAvatar
+      alt={`${firstName} ${lastName}`}
+      src={src}
+      sx={{
+        display: "inline-flex",
+        border: `0.2rem solid ${borderColor}`,
+        ...smallStyle,
+      }}
+    >
+      {src === undefined ? `${firstName[0]}${lastName[0]}` : null}
+    </MuiAvatar>
+  );
+};
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  firstName: PropTypes.string.isRequired,
+  lastName: PropTypes.string.isRequired,
+  small: PropTypes.bool,
+};
+
+export default Avatar;
diff --git a/Client/src/Components/Avatar/avatar.css b/Client/src/Components/Avatar/avatar.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index f9a7cf14d..58c90ee8e 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -3,6 +3,8 @@ import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
 import Link from "../../Components/Link";
+import Avatar from "../../Components/Avatar/Avatar";
+import avatarImage from "../../assets/Images/avatar_placeholder.png";
 
 const Home = () => {
   return (
@@ -33,6 +35,18 @@ const Home = () => {
             url={"https://www.google.com"}
           />
         </div>
+        <h4>Avatar</h4>
+        <div style={{ display: "flex" }}>
+          <Avatar src={avatarImage} firstName="Alex" lastName="Holliday" />
+          <Avatar firstName="Alex" lastName="Holliday" />
+          <Avatar
+            src={avatarImage}
+            firstName="Alex"
+            lastName="Holliday"
+            small
+          />
+          <Avatar firstName="Alex" lastName="Holliday" small />
+        </div>
       </div>
     </>
   );
diff --git a/Client/src/assets/Images/avatar_placeholder.png b/Client/src/assets/Images/avatar_placeholder.png
new file mode 100644
index 000000000..38e896811
Binary files /dev/null and b/Client/src/assets/Images/avatar_placeholder.png differ