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/routes/api/upload/+server.ts b/src/routes/api/upload/+server.ts
index 4b685a0..873488e 100644
--- a/src/routes/api/upload/+server.ts
+++ b/src/routes/api/upload/+server.ts
@@ -8,7 +8,7 @@ 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(50)}.${fileExtension}`;
+    const fileName = `${generateId(75)}.${fileExtension}`;
     const bucket = event.request.headers.get("bucket") as string;
 
     if (!fileExtension || !fileName) {