diff --git a/daily-thought-frontend/src/components/post/Post.tsx b/daily-thought-frontend/src/components/post/Post.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d501b3bb0564622f7181cee8aa06eccca7c90a14
--- /dev/null
+++ b/daily-thought-frontend/src/components/post/Post.tsx
@@ -0,0 +1,60 @@
+import { User } from "@/types/user";
+import { FC, PropsWithChildren } from "react";
+import styles from '../../styles/Post.module.css'
+import PostAction from "./PostAction";
+import { generateRandomLinearGradient } from "./Utils";
+
+type PostProps = {
+  User: User,
+  Post: string,
+  TimeStamp?: string,
+  Likes: User[],
+}
+
+
+const Post: FC<PropsWithChildren<PostProps>> = ({
+  User,
+  Post,
+  TimeStamp,
+  Likes
+}) => {
+
+  return (
+    <div className={styles.post}>
+      <div className={styles.header}>
+        <div className={styles.avatar} style={{backgroundImage: generateRandomLinearGradient(User.Colors, true)}}>
+          {User.Avatar && 
+            <div>
+
+            </div>
+          }
+          {!User.Avatar && 
+            <div>
+              <p>{User.Username[0]}</p>
+            </div>
+          }
+        </div>
+        <div className={styles.headerInfo}>
+          <div className={styles.headerUserInfo}>
+            <p className={styles.name} >{User.FirstName} {User.LastName}</p>
+            <p className={styles.username}>@{User.Username}</p>
+          </div>
+          <div className={styles.timestamp}>
+            {TimeStamp}
+          </div>
+        </div>
+      </div>
+      <div className={styles.postContentContainer}>
+        <p className={styles.postContent}>{Post}</p>
+
+        <div className={styles.postActions}>
+          <PostAction />
+          <PostAction />
+          <PostAction />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Post;
\ No newline at end of file