diff --git a/src/lib/components/UserAvatar.svelte b/src/lib/components/UserAvatar.svelte
index 6601652..e1d4756 100644
--- a/src/lib/components/UserAvatar.svelte
+++ b/src/lib/components/UserAvatar.svelte
@@ -3,14 +3,6 @@
   import { goto } from "$app/navigation";
   export let user: any;
 
-  let icon: string = "";
-
-  if (user.icon != null && user.icon != "") {
-    icon = user.icon;
-  } else {
-    icon = user.username.charAt(0);
-  }
-
   async function navToSettings() {
     goto("/settings");
   }
@@ -22,7 +14,11 @@
 <div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
   <div class="avatar placeholder">
     <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
-      <img src={user.icon} alt="" />
+      {#if user.icon}
+        <img src={user.icon} alt="" />
+      {:else}
+        <span class="text-2xl -mt-1">{user.first_name[0]}</span>
+      {/if}
     </div>
   </div>
   <!-- svelte-ignore a11y-missing-attribute -->
diff --git a/src/lib/server/s3.ts b/src/lib/server/s3.ts
index b9ca7b3..5f50a7c 100644
--- a/src/lib/server/s3.ts
+++ b/src/lib/server/s3.ts
@@ -1,5 +1,6 @@
 import {
   CreateBucketCommand,
+  DeleteObjectCommand,
   HeadBucketCommand,
   PutBucketPolicyCommand,
   PutObjectCommand,
@@ -119,3 +120,20 @@ export const uploadObject = async (
     throw error;
   }
 };
+
+export const deleteObject = async (bucketName: string, fileName: string) => {
+  const deleteObjectCommand = new DeleteObjectCommand({
+    Bucket: bucketName,
+    Key: fileName,
+  });
+
+  try {
+    await s3Client.send(deleteObjectCommand);
+  } catch (error) {
+    console.error(
+      `Error uploading file ${fileName} to bucket ${bucketName}:`,
+      error
+    );
+    throw error;
+  }
+};
diff --git a/src/routes/api/upload/+server.ts b/src/routes/api/upload/+server.ts
index 1e582c8..873488e 100644
--- a/src/routes/api/upload/+server.ts
+++ b/src/routes/api/upload/+server.ts
@@ -1,7 +1,6 @@
 // src/routes/api/upload.js
 
-import { ensureBucketExists, s3Client, uploadObject } from "$lib/server/s3";
-import { HeadBucketCommand } from "@aws-sdk/client-s3";
+import { deleteObject, ensureBucketExists, uploadObject } from "$lib/server/s3";
 import type { RequestEvent } from "@sveltejs/kit";
 import { generateId } from "lucia";
 
@@ -9,7 +8,8 @@ export async function POST(event: RequestEvent): Promise<Response> {
   try {
     const contentType = event.request.headers.get("content-type") ?? "";
     const fileExtension = contentType.split("/").pop();
-    const fileName = `${generateId(25)}.${fileExtension}`;
+    const fileName = `${generateId(75)}.${fileExtension}`;
+    const bucket = event.request.headers.get("bucket") as string;
 
     if (!fileExtension || !fileName) {
       return new Response(JSON.stringify({ error: "Invalid file type" }), {
@@ -20,6 +20,18 @@ export async function POST(event: RequestEvent): Promise<Response> {
       });
     }
 
+    if (!bucket) {
+      return new Response(
+        JSON.stringify({ error: "Bucket name is required" }),
+        {
+          status: 400,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+    }
+
     // check if the file is an image
     if (!contentType.startsWith("image")) {
       return new Response(JSON.stringify({ error: "Invalid file type" }), {
@@ -35,10 +47,15 @@ export async function POST(event: RequestEvent): Promise<Response> {
       "Content-Type": contentType,
     };
 
-    await ensureBucketExists("profile-pics");
+    await ensureBucketExists(bucket);
+
+    if (event.locals.user?.icon) {
+      const key: string = event.locals.user.icon.split("/").pop() as string;
+      await deleteObject(bucket, key);
+    }
 
     const objectUrl = await uploadObject(
-      "profile-pics",
+      bucket,
       fileName,
       Buffer.from(fileBuffer)
     );
diff --git a/src/routes/settings/+page.server.ts b/src/routes/settings/+page.server.ts
index edd5857..03d8680 100644
--- a/src/routes/settings/+page.server.ts
+++ b/src/routes/settings/+page.server.ts
@@ -81,6 +81,9 @@ export const actions: Actions = {
       const response = await event.fetch("/api/upload", {
         method: "POST",
         body: profilePicture,
+        headers: {
+          bucket: "profile-pics",
+        },
       });
 
       const data = await response.json();