diff --git a/src/app/(app)/posts/page.tsx b/src/app/(app)/posts/page.tsx
index f7da9b4..056129d 100644
--- a/src/app/(app)/posts/page.tsx
+++ b/src/app/(app)/posts/page.tsx
@@ -2,33 +2,45 @@
 
 import { useDevice } from "@/lib/context/DeviceContext";
 import React, { useEffect, useState } from "react";
+import Post from "../../../lib/components/Post";
 
 export default function PostsPage() {
-    const [postText, setPostText] = useState("");
     const [posts, setPosts] = useState<any[]>([]);
     const [userReactions, setUserReactions] = useState<{
         [index: number]: { liked: boolean; warned: boolean };
     }>({});
     const [imageFile, setImageFile] = useState<File | null>(null);
+    const [alertMessage, setAlertMessage] = useState<string | null>(null); // State for alert message
     const { isAuthenticated, session } = useDevice();
 
+    // Fetch posts on component mount
     useEffect(() => {
-        if (isAuthenticated && session?.username) {
-            fetch(`/api/user/${session.username}`).then((res) => res.json());
+        if (isAuthenticated && session?.id) {
+            fetch(`/api/post`)
+                .then((res) => res.json())
+                .then((data) => {
+                    if (data.posts) {
+                        setPosts(data.posts);
+                    } else {
+                        console.error("Failed to fetch posts:", data.message);
+                    }
+                })
+                .catch((err) => {
+                    console.error("Error fetching posts:", err);
+                });
         }
-    }, [isAuthenticated, session?.username]);
+    }, [isAuthenticated, session?.id]);
 
     const handlePostSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
 
         if (!imageFile) {
-            alert("Please select an image to upload.");
+            setAlertMessage("Please select an image to upload.");
             return;
         }
 
         const formData = new FormData();
         formData.append("image", imageFile);
-        formData.append("text", postText);
 
         try {
             const response = await fetch("/api/post", {
@@ -38,51 +50,109 @@ export default function PostsPage() {
 
             const data = await response.json();
             if (response.ok) {
-                alert("Post uploaded successfully!");
-                setPosts([data.postData, ...posts]);
-                setPostText("");
-                setImageFile(null);
+                setAlertMessage(`Post uploaded successfully! You earned ${data.points} points!`);
+                setPosts([data.postData, ...posts]); // Add the new post to the list
+                setImageFile(null); // Clear the file input
             } else {
-                alert(data.message || "Failed to upload post.");
+                setAlertMessage(data.message || "Failed to upload post.");
             }
         } catch (error) {
             console.error("Error uploading post:", error);
-            alert("An error occurred while uploading the post.");
+            setAlertMessage("An error occurred while uploading the post.");
         }
     };
 
-    const handleLike = (index: number) => {
-        const updatedPosts = [...posts];
+    const handleLike = async (index: number) => {
+        const post = posts[index];
         const reactions = { ...userReactions };
 
-        const alreadyLiked = reactions[index]?.liked;
+        try {
+            const response = await fetch(`/api/post/${post.id}`, {
+                method: "POST",
+                body: new URLSearchParams({ like: "true" }),
+            });
 
-        updatedPosts[index].likes += alreadyLiked ? -1 : 1;
+            if (response.ok) {
+                const updatedPosts = [...posts];
+                const alreadyLiked = reactions[index]?.liked;
 
-        reactions[index] = {
-            ...reactions[index],
-            liked: !alreadyLiked,
-        };
+                // Update reactions in the post
+                updatedPosts[index].reactions.push({ liked: !alreadyLiked, warned: false });
 
-        setPosts(updatedPosts);
-        setUserReactions(reactions);
+                // Update local state
+                reactions[index] = {
+                    ...reactions[index],
+                    liked: !alreadyLiked,
+                };
+
+                setPosts(updatedPosts);
+                setUserReactions(reactions);
+            } else {
+                const data = await response.json();
+                alert(data.message || "Failed to like the post.");
+            }
+        } catch (error) {
+            console.error("Error liking post:", error);
+            alert("An error occurred while liking the post.");
+        }
     };
 
-    const handleWarning = (index: number) => {
-        const updatedPosts = [...posts];
+    const handleWarning = async (index: number) => {
+        const post = posts[index];
         const reactions = { ...userReactions };
 
-        const alreadyWarned = reactions[index]?.warned;
+        try {
+            const response = await fetch(`/api/post/${post.id}`, {
+                method: "POST",
+                body: new URLSearchParams({ warn: "true" }),
+            });
 
-        updatedPosts[index].warnings += alreadyWarned ? -1 : 1;
+            if (response.ok) {
+                const updatedPosts = [...posts];
+                const alreadyWarned = reactions[index]?.warned;
 
-        reactions[index] = {
-            ...reactions[index],
-            warned: !alreadyWarned,
-        };
+                // Update reactions in the post
+                updatedPosts[index].reactions.push({ liked: false, warned: !alreadyWarned });
 
-        setPosts(updatedPosts);
-        setUserReactions(reactions);
+                // Update local state
+                reactions[index] = {
+                    ...reactions[index],
+                    warned: !alreadyWarned,
+                };
+
+                setPosts(updatedPosts);
+                setUserReactions(reactions);
+            } else {
+                const data = await response.json();
+                alert(data.message || "Failed to warn the post.");
+            }
+        } catch (error) {
+            console.error("Error warning post:", error);
+            alert("An error occurred while warning the post.");
+        }
+    };
+
+    const handleDelete = async (index: number) => {
+        const post = posts[index];
+
+        try {
+            const response = await fetch(`/api/post/${post.id}`, {
+                method: "DELETE",
+            });
+
+            if (response.ok) {
+                alert("Post deleted successfully!");
+                const updatedPosts = [...posts];
+                updatedPosts.splice(index, 1); // Remove the deleted post from the list
+                setPosts(updatedPosts);
+            } else {
+                const data = await response.json();
+                alert(data.message || "Failed to delete the post.");
+            }
+        } catch (error) {
+            console.error("Error deleting post:", error);
+            alert("An error occurred while deleting the post.");
+        }
     };
 
     return (
@@ -93,15 +163,15 @@ export default function PostsPage() {
                 </h1>
             </div>
 
+            {/* Alert Message */}
+            {alertMessage && (
+                <div className="bg-success-600 text-white px-4 py-3 rounded mb-6">
+                    {alertMessage}
+                </div>
+            )}
+
             <div className="bg-[color:var(--color-surface-600)]/70 backdrop-blur-md rounded-xl px-6 py-5 mb-8 shadow-sm">
                 <form onSubmit={handlePostSubmit} className="space-y-3">
-                    <textarea
-                        className="w-full p-3 rounded bg-neutral-800 text-white"
-                        placeholder="Share your beverage..."
-                        value={postText}
-                        onChange={(e) => setPostText(e.target.value)}
-                        rows={4}
-                    />
                     <input
                         type="file"
                         accept="image/*"
@@ -117,56 +187,27 @@ export default function PostsPage() {
                 </form>
             </div>
 
-            <div className="space-y-6">
-                {posts.map((post, index) => (
-                    <div
-                        key={index}
-                        className="bg-[color:var(--color-surface-600)]/80 rounded-xl px-6 py-5 shadow-md"
-                    >
-                        <div className="flex items-center gap-4 mb-2">
-                            <div className="w-10 h-10 rounded-full bg-neutral-800 border border-gray-300" />
-                            <div>
-                                <p className="font-semibold text-[color:var(--color-warning-300)]">
-                                    {post.author || "Anonymous"}
-                                </p>
-                                <p className="text-sm text-gray-400">{post.date}</p>
-                            </div>
-                        </div>
-
-                        {post.imageUrl && (
-                            <img
-                                src={post.imageUrl}
-                                alt="Post related"
-                                className="w-full max-h-64 object-cover rounded mb-4"
+            {/* Post List Card */}
+            <div className="bg-[color:var(--color-surface-800)] rounded-xl px-6 py-5 shadow-md">
+                <h2 className="text-2xl font-bold text-[color:var(--color-warning-300)] mb-4">
+                    Post List
+                </h2>
+                <div className="space-y-6">
+                    {posts
+                        .slice() // Create a shallow copy of the posts array
+                        .sort((a, b) => new Date(b.timeStamp).getTime() - new Date(a.timeStamp).getTime()) // Sort by timeStamp in descending order
+                        .map((post, index) => (
+                            <Post
+                                allowReactions={false}
+                                key={index}
+                                post={post}
+                                userReactions={userReactions[index] || { liked: false, warned: false }}
+                                onLike={() => handleLike(index)}
+                                onWarning={() => handleWarning(index)}
+                                onDelete={() => handleDelete(index)} // Pass the delete handler
                             />
-                        )}
-
-                        <p className="text-base text-neutral-100 mb-4">{post.text}</p>
-
-                        <div className="flex gap-4 items-center">
-                            <button
-                                onClick={() => handleLike(index)}
-                                className={`px-3 py-1 rounded text-sm ${
-                                    userReactions[index]?.liked
-                                        ? "bg-success-800"
-                                        : "bg-success-600 hover:bg-primary-600"
-                                } text-white`}
-                            >
-                                👍 Like ({post.likes})
-                            </button>
-                            <button
-                                onClick={() => handleWarning(index)}
-                                className={`px-3 py-1 rounded text-sm ${
-                                    userReactions[index]?.warned
-                                        ? "bg-red-800"
-                                        : "bg-primary-500 hover:bg-red-600"
-                                } text-white`}
-                            >
-                                😭 Stop drinking that ({post.warnings})
-                            </button>
-                        </div>
-                    </div>
-                ))}
+                        ))}
+                </div>
             </div>
 
             <div className="h-10" />
diff --git a/src/app/api/post/[id]/route.ts b/src/app/api/post/[id]/route.ts
index 51d3faf..a0ff11e 100644
--- a/src/app/api/post/[id]/route.ts
+++ b/src/app/api/post/[id]/route.ts
@@ -34,3 +34,66 @@ export async function GET(req: Request, { params }: any) {
         return NextResponse.json({ message: "Internal server error" }, { status: 500 });
     }
 }
+
+
+export async function POST(req: Request, { params }: any) {
+    try {
+        if (!(await authenticateUser())) return;
+
+        const { id } = await params;
+
+        const post = await db.posts.getById(id);
+
+        if (!post) {
+            return NextResponse.json({ message: "Post not found" }, { status: 404 });
+        }
+
+        const formData = await req.formData();
+
+        let like = formData.get("like");
+        if(like) {
+            await db.posts.addReaction(id, {
+                liked: true,
+                warned: false,
+            });
+
+            return NextResponse.json({ message: "Post liked successfully" }, { status: 200 });
+        }
+
+        let warn = formData.get("warn");
+        if(warn) {
+            await db.posts.addReaction(id, {
+                liked: false,
+                warned: true,
+            });
+
+            return NextResponse.json({ message: "Post warned successfully" }, { status: 200 });
+        }
+        return NextResponse.json({ message: "No action taken" }, { status: 400 });
+
+    } catch (error) {
+        console.error("Error finding post by ID:", error);
+        return NextResponse.json({ message: "Internal server error" }, { status: 500 });
+    }
+}
+
+export async function DELETE(req: Request, { params }: any) {
+    try {
+        if (!(await authenticateUser())) return;
+
+        const { id } = await params;
+
+        const post = await db.posts.getById(id);
+
+        if (!post) {
+            return NextResponse.json({ message: "Post not found" }, { status: 404 });
+        }
+
+        await db.posts.delete(id);
+
+        return NextResponse.json({ message: "Post deleted successfully" }, { status: 200 });
+    } catch (error) {
+        console.error("Error deleting post:", error);
+        return NextResponse.json({ message: "Internal server error" }, { status: 500 });
+    }
+}
\ No newline at end of file
diff --git a/src/app/api/post/route.ts b/src/app/api/post/route.ts
index 610fa66..0a0651f 100644
--- a/src/app/api/post/route.ts
+++ b/src/app/api/post/route.ts
@@ -19,46 +19,138 @@ async function authenticateUser() {
 	return userData;
 }
 
-export async function POST(req: Request) {
-	try {
+/*
+Points Guide
+Learn how many points you receive for each drink!
 
+Game Points System:
++150 points for drinking ≥100 oz of water
++100 points for keeping caffeine < 200 mg
++150 points for staying under the sugar cap all day
+Exceeding 400mg caffeine limit or 30.5g sugar limit = 0 pts logged for those drinks
+Beverage Scoring System
+Drink	Volume (oz)	Caffeine (mg)	Sugar (g)	Points Earned	Bonus
+Water	8	n/a	n/a	100	+15 for >=64oz in day
+Coffee	8	95	?	50	0 pts after 400mg caffeine
+Tea	8	55	?	50	0 pts after 400mg caffeine
+Coca-Cola	8	34	39	0	Exceeds sugar
+100% Fruit Juice	8	0	22	50	0 pts after 30.5g sugar
+Dairy Milk (low-fat)	8	0	12	50	+0.5 calcium bonus
+*/ 
+
+function calculatePoints(description: string): number {
+    let points = 0;
+
+    // Normalize the description to lowercase for easier matching
+    const normalizedDescription = description.toLowerCase();
+
+    // Points calculation based on the description
+    if (normalizedDescription.includes("water")) {
+        points += 100; // Base points for water
+        if (normalizedDescription.includes("≥64oz") || normalizedDescription.includes("64oz or more")) {
+            points += 15; // Bonus for drinking ≥64oz of water
+        }
+    } else if (normalizedDescription.includes("coffee")) {
+        points += 50; // Base points for coffee
+        if (normalizedDescription.includes("≥400mg caffeine") || normalizedDescription.includes("exceeds caffeine")) {
+            points = 0; // No points if caffeine exceeds 400mg
+        }
+    } else if (normalizedDescription.includes("tea")) {
+        points += 50; // Base points for tea
+        if (normalizedDescription.includes("≥400mg caffeine") || normalizedDescription.includes("exceeds caffeine")) {
+            points = 0; // No points if caffeine exceeds 400mg
+        }
+    } else if (normalizedDescription.includes("coca-cola")) {
+        points = 0; // No points for Coca-Cola due to sugar
+    } else if (normalizedDescription.includes("fruit juice")) {
+        points += 50; // Base points for fruit juice
+        if (normalizedDescription.includes("≥30.5g sugar") || normalizedDescription.includes("exceeds sugar")) {
+            points = 0; // No points if sugar exceeds 30.5g
+        }
+    } else if (normalizedDescription.includes("milk")) {
+        points += 50; // Base points for milk
+        if (normalizedDescription.includes("low-fat")) {
+            points += 0.5; // Bonus for low-fat milk
+        }
+    }
+
+    return points;
+}
+
+export async function POST(req: Request) {
+    try {
+        let userData = await authenticateUser();
+        if (!userData) return NextResponse.json({ message: "User not found" }, { status: 404 });
+
+        const formData = await req.formData();
+        const file = formData.get("image");
+
+        if (!file || !(file instanceof Blob)) {
+            return NextResponse.json(
+                { message: "No image file provided" },
+                { status: 400 }
+            );
+        }
+
+        const arrayBuffer = await file.arrayBuffer();
+        const buffer = Buffer.from(arrayBuffer);
+
+        const prompt = `Generate a 1-3 sentence description for this image.`;
+
+        const data = await gemini.generateDescription(prompt, buffer);
+        const points = calculatePoints(data?.description || ""); // Calculate points based on the description
+
+        let postData = await db.posts.create(
+            userData.id,
+            data?.description,
+            buffer.toString("base64")
+        );
+
+		await db.users.update(userData.id, { points: userData.points + points });
+
+        if (!postData) {
+            return NextResponse.json(
+                { message: "Failed to create post" },
+                { status: 500 }
+            );
+        }
+
+        return NextResponse.json(
+            { message: "Image uploaded successfully", postData, points },
+            { status: 200 }
+        );
+    } catch (error) {
+        console.error("Error handling image upload:", error);
+        return NextResponse.json(
+            { message: "Internal server error" },
+            { status: 500 }
+        );
+    }
+}
+
+export async function GET(req: Request) {
+	try {
 		let userData = await authenticateUser();
 		if (!userData) return NextResponse.json({ message: "User not found" }, { status: 404 });
 
-		const formData = await req.formData();
-		const file = formData.get("image");
+		const posts = await db.posts.getAllByUserId(userData.id);
 
-		if (!file || !(file instanceof Blob)) {
+		if (!posts) {
 			return NextResponse.json(
-				{ message: "No image file provided" },
-				{ status: 400 }
-			);
-		}
-
-		const arrayBuffer = await file.arrayBuffer();
-		const buffer = Buffer.from(arrayBuffer);
-
-		const prompt = `Generate a 1-3 sentence description for this image.`;
-
-		const data = await gemini.generateDescription(prompt, buffer);
-		let postData = await db.posts.create(userData.id, data?.description, buffer);
-
-		if (!postData) {
-			return NextResponse.json(
-				{ message: "Failed to create post" },
+				{ message: "Failed to fetch posts" },
 				{ status: 500 }
 			);
 		}
 
 		return NextResponse.json(
-			{ message: "Image uploaded successfully", postData },
+			{ message: "Posts fetched successfully", posts },
 			{ status: 200 }
 		);
 	} catch (error) {
-		console.error("Error handling image upload:", error);
+		console.error("Error fetching posts:", error);
 		return NextResponse.json(
 			{ message: "Internal server error" },
 			{ status: 500 }
 		);
 	}
-}
+}
\ No newline at end of file
diff --git a/src/lib/components/Post.tsx b/src/lib/components/Post.tsx
new file mode 100644
index 0000000..313e9f6
--- /dev/null
+++ b/src/lib/components/Post.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface PostProps {
+    post: {
+        id: string;
+        timeStamp: string;
+        reactions: { liked: boolean; warned: boolean }[];
+        userId: string;
+        image: string; // Assuming the image is served as a base64 string or URL
+        imageDes: string; // New field for the post description
+    };
+    onLike: () => void;
+    onWarning: () => void;
+    onDelete: () => void; // Callback for deleting the post
+    userReactions: { liked: boolean; warned: boolean };
+    allowReactions: boolean; // New property to toggle reactions
+}
+
+export default function Post({
+    post,
+    onLike,
+    onWarning,
+    onDelete,
+    userReactions,
+    allowReactions,
+}: PostProps) {
+    const [userData, setUserData] = useState<{ username: string; avatar: number } | null>({username: "Loading...", avatar: 1});
+
+    useEffect(() => {
+        // Fetch the username and avatar based on the userId
+        fetch(`/api/user/${post.userId}`)
+            .then((res) => res.json())
+            .then((data) => {
+                if (data.user) {
+                    setUserData({
+                        username: data.user.username,
+                        avatar: data.user.avatar || "/default-avatar.png", // Fallback to a default avatar
+                    });
+                } else {
+                    setUserData({
+                        username: "Unknown User",
+                        avatar: 1,
+                    });
+                }
+            })
+            .catch((err) => {
+                console.error("Error fetching user data:", err);
+                setUserData({
+                    username: "Unknown User",
+                    avatar: 1,
+                });
+            });
+    }, [post.userId]);
+
+    return (
+        <div className="bg-[color:var(--color-surface-600)]/80 rounded-xl px-6 py-5 shadow-md">
+            <div className="flex items-center gap-4 mb-2">
+                {/* User Avatar */}
+                <img
+                    src={"/avatar/p" + userData?.avatar + ".png"}
+                    alt="User Avatar"
+                    className="w-10 h-10 rounded-full object-cover border border-gray-300"
+                />
+                <div>
+                    {/* Username */}
+                    <p className="font-semibold text-[color:var(--color-warning-300)]">
+                        {userData?.username || "Loading..."}
+                    </p>
+                    {/* Timestamp */}
+                    <p className="text-sm text-gray-400">{new Date(post.timeStamp).toLocaleString()}</p>
+                </div>
+            </div>
+
+            {/* Post Image */}
+            {post.image && (
+                <img
+                    src={"data:image/png;base64," + post.image}
+                    alt="Post related"
+                    className="w-full max-h-64 object-cover rounded mb-4"
+                />
+            )}
+
+            {/* Post Description */}
+            {post.imageDes && (
+                <p className="text-neutral-100 mb-4">{post.imageDes}</p>
+            )}
+
+            {/* Post Actions */}
+            <div className="flex gap-4 items-center">
+                {allowReactions && (
+                    <>
+                        <button
+                            onClick={onLike}
+                            className={`px-3 py-1 rounded text-sm ${
+                                userReactions.liked
+                                    ? "bg-success-800"
+                                    : "bg-success-600 hover:bg-primary-600"
+                            } text-white`}
+                        >
+                            👍 Like ({post.reactions.filter((reaction) => reaction.liked).length})
+                        </button>
+                        <button
+                            onClick={onWarning}
+                            className={`px-3 py-1 rounded text-sm ${
+                                userReactions.warned
+                                    ? "bg-red-800"
+                                    : "bg-primary-500 hover:bg-red-600"
+                            } text-white`}
+                        >
+                            😭 Stop drinking that ({post.reactions.filter((reaction) => reaction.warned).length})
+                        </button>
+                    </>
+                )}
+                <button
+                    onClick={onDelete}
+                    className="px-3 py-1 rounded text-sm bg-red-600 hover:bg-red-700 text-white"
+                >
+                    🗑️ Delete
+                </button>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/lib/scripts/Post.ts b/src/lib/scripts/Post.ts
index 488db06..9bb7ffa 100644
--- a/src/lib/scripts/Post.ts
+++ b/src/lib/scripts/Post.ts
@@ -11,7 +11,7 @@ const postSchema = new mongoose.Schema({
     timeStamp: Date,
     reactions: Array,
     userId: reqString,
-    image: Buffer
+    image: String
 });
 
 export class Post {
@@ -32,7 +32,7 @@ export class Post {
         return result.join('');
     }
 
-    async create(userId:string, imageDes: string, image: Buffer) {
+    async create(userId:string, imageDes: string, image: string) {
         const newEntry = new this.model({
             id: this.makeId(5),
             imageDes: imageDes,
@@ -57,6 +57,13 @@ export class Post {
         return await this.model.find({ userId: userId });
     }
 
+    async addReaction(id: string, reaction: { liked: boolean; warned: boolean }) {
+        return await this.model.updateOne(
+            { id: id },
+            { $push: { reactions: reaction } }
+        );
+    }
+
     async update(id: string, imageDes: string) {
         return await this.model.updateOne({ id: id }, { imageDes: imageDes });
     }