diff --git a/Clients/src/presentation/components/Avatar/VWAvatar/index.tsx b/Clients/src/presentation/components/Avatar/VWAvatar/index.tsx
new file mode 100644
index 00000000..b71bd68b
--- /dev/null
+++ b/Clients/src/presentation/components/Avatar/VWAvatar/index.tsx
@@ -0,0 +1,60 @@
+import { Avatar as VWAvatar } from "@mui/material";
+
+interface User {
+  firstname: string;
+  lastname: string;
+  pathToImage: string;
+}
+
+/**
+ * Avatar component that displays a user's avatar with customizable size and styles.
+ *
+ * @param {Object} props - The properties object.
+ * @param {User} [props.user] - The user object containing firstname, lastname, and pathToImage.
+ * @param {"small" | "medium" | "large"} [props.size="small"] - The size of the avatar.
+ * @param {object} [props.sx] - Additional styles to apply to the avatar.
+ *
+ * @returns {JSX.Element} The rendered Avatar component.
+ */
+const Avatar = ({
+  user = {
+    firstname: "F",
+    lastname: "L",
+    pathToImage: "",
+  },
+  size = "small",
+  sx,
+}: {
+  user?: User;
+  size?: "small" | "medium" | "large";
+  sx?: object;
+}): JSX.Element => {
+  let dimensions = {};
+  if (size === "small") {
+    dimensions = { width: 32, height: 32, fontSize: 13 };
+  } else if (size === "medium") {
+    dimensions = { width: 64, height: 64, fontSize: 22 };
+  } else if (size === "large") {
+    dimensions = { width: 128, height: 128, fontSize: 44 };
+  }
+
+  return (
+    <VWAvatar
+      src={user!.pathToImage}
+      alt={`${user!.firstname} ${user!.lastname}`}
+      component={"div"}
+      variant="circular" // or variant="rounded" or variant="square"
+      sx={{
+        backgroundColor: `#12715B`,
+        ...dimensions,
+        border: user!.pathToImage ? `1px solid #12715B` : "none",
+        ...sx,
+      }}
+    >
+      {user!.firstname.charAt(0)}
+      {user!.lastname.charAt(0)}
+    </VWAvatar>
+  );
+};
+
+export default Avatar;
diff --git a/Clients/src/presentation/components/Sidebar/index.tsx b/Clients/src/presentation/components/Sidebar/index.tsx
index 984c7a01..17a01d8c 100644
--- a/Clients/src/presentation/components/Sidebar/index.tsx
+++ b/Clients/src/presentation/components/Sidebar/index.tsx
@@ -34,8 +34,8 @@ import { ReactComponent as Team } from "../../assets/icons/team.svg";
 
 import Logo from "../../assets/imgs/logo.png";
 
-import Avatar from "../Avatar";
 import Select from "../Inputs/Select";
+import Avatar from "../Avatar/VWAvatar";
 
 const menu = [
   {
@@ -466,7 +466,7 @@ const Sidebar = () => {
                   marginLeft: theme.spacing(3),
                 }}
               >
-                <Avatar small={true} sx={{ margin: "auto" }} />
+                <Avatar size="small" sx={{ margin: "auto" }} />
               </IconButton>
             </Tooltip>
           </>
diff --git a/Clients/src/presentation/pages/index.tsx b/Clients/src/presentation/pages/index.tsx
index 8b88b2e1..d1092e3f 100644
--- a/Clients/src/presentation/pages/index.tsx
+++ b/Clients/src/presentation/pages/index.tsx
@@ -1,41 +1,48 @@
 import { Stack } from "@mui/material";
-import Alert from "../components/Alert";
+import Avatar from "../components/Avatar/VWAvatar";
 
 const Playground = () => {
+  const user = {
+    firstname: "Mohammad",
+    lastname: "Khalilzadeh",
+    pathToImage: "https://avatars.githubusercontent.com/u/140876993?v=4",
+  };
+
   return (
     <Stack
       sx={{
         display: "flex",
+        flexDirection: "row",
         justifyContent: "center",
         alignItems: "center",
         minHeight: "100vh",
         gap: 4,
       }}
     >
-      <Alert
-        body="Here is a gentle confirmation that your action was successful."
-        variant="success"
-        onClick={() => console.log("Alert clicked!")}
-        isToast={true}
-      />
-      <Alert
-        body="Here is a gentle confirmation that your action was successful."
-        variant="warning"
-        onClick={() => console.log("Alert clicked!")}
-        isToast={true}
-      />
-      <Alert
-        body="Here is a gentle confirmation that your action was successful."
-        variant="error"
-        onClick={() => console.log("Alert clicked!")}
-        isToast={true}
-      />
-      <Alert
-        body="Here is a gentle confirmation that your action was successful."
-        variant="info"
-        onClick={() => console.log("Alert clicked!")}
-        isToast={true}
-      />
+      <Stack
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 4,
+        }}
+      >
+        <Avatar size="small" />
+        <Avatar size="medium" />
+        <Avatar size="large" />
+      </Stack>
+      <Stack
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 4,
+        }}
+      >
+        <Avatar size="small" user={user} />
+        <Avatar size="medium" user={user} />
+        <Avatar size="large" user={user} />
+      </Stack>
     </Stack>
   );
 };
diff --git a/Clients/src/presentation/tools/stringToColor.ts b/Clients/src/presentation/tools/stringToColor.ts
new file mode 100644
index 00000000..531ba938
--- /dev/null
+++ b/Clients/src/presentation/tools/stringToColor.ts
@@ -0,0 +1,50 @@
+export function stringToColor(firstName: string, lastName: string) {
+  // hex numbers are 0 1 2 3 4 5 6 7 8 9 A B C D E F
+  const lenghtOfFirstName = firstName.length;
+  const lenghtOfLastName = lastName.length;
+
+  let firstThreeDigits = "";
+
+  const firstThreeDigitsCounter = lenghtOfFirstName % 10;
+  for (
+    let index = firstThreeDigitsCounter;
+    index < 10 && firstThreeDigits.length < 3;
+    index++
+  ) {
+    firstThreeDigits = firstThreeDigits.concat(index.toString());
+  }
+
+  let secondThreeDigits = "";
+
+  const secondThreeDigitsCounter = lenghtOfLastName % 6;
+  for (let index = secondThreeDigitsCounter; index < 6; index++) {
+    if (index === 6) {
+      secondThreeDigits = secondThreeDigits.concat("ABC");
+    } else {
+      switch (index) {
+        case 0:
+          secondThreeDigits = secondThreeDigits.concat("A");
+          break;
+        case 1:
+          secondThreeDigits = secondThreeDigits.concat("B");
+          break;
+        case 2:
+          secondThreeDigits = secondThreeDigits.concat("C");
+          break;
+        case 3:
+          secondThreeDigits = secondThreeDigits.concat("D");
+          break;
+        case 4:
+          secondThreeDigits = secondThreeDigits.concat("E");
+          break;
+        case 5:
+          secondThreeDigits = secondThreeDigits.concat("F");
+          break;
+        default:
+          secondThreeDigits = secondThreeDigits.concat(index.toString());
+          break;
+      }
+    }
+  }
+  return "#" + firstThreeDigits + secondThreeDigits;
+}