diff --git a/daily-thought-frontend/src/components/profile/Avatar.tsx b/daily-thought-frontend/src/components/profile/Avatar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a085e1e8f2a40d739a3f4a51dc0c29b82c39570f
--- /dev/null
+++ b/daily-thought-frontend/src/components/profile/Avatar.tsx
@@ -0,0 +1,30 @@
+import { User } from '@/types/user';
+import { FC, PropsWithChildren } from 'react';
+import styles from '../../styles/Avatar.module.css'
+import { generateRandomLinearGradient } from '../post/Utils';
+
+type AvatarProps ={
+  User: User
+}
+
+const Avatar:FC<PropsWithChildren<AvatarProps>> = ({
+  User
+}) => {
+
+  return (
+    <div className={styles.avatar} style={{backgroundImage: generateRandomLinearGradient(User.Colors, true)}}>
+      {User.Avatar && 
+        <div>
+
+        </div>
+      }
+      {!User.Avatar && 
+        <div>
+          <p>{User.Username[0]}</p>
+        </div>
+      }
+    </div>
+  )
+}
+
+export default Avatar;
\ No newline at end of file