diff --git a/packages/frontend/src/App.css b/packages/frontend/src/App.css
index 73da498..e6204b7 100644
--- a/packages/frontend/src/App.css
+++ b/packages/frontend/src/App.css
@@ -129,6 +129,7 @@
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
+    font-variant-ligatures: none;
 }
 
 .font-300 {
diff --git a/packages/frontend/src/components/avatar.tsx b/packages/frontend/src/components/avatar.tsx
index 2b0fd9d..b06aa23 100644
--- a/packages/frontend/src/components/avatar.tsx
+++ b/packages/frontend/src/components/avatar.tsx
@@ -1,4 +1,5 @@
 import { UserRound } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 const FALLBACK_COLOURS = [
     "bg-red-500",
@@ -58,7 +59,15 @@ export default function Avatar({
 
     return (
         <div
-            className={`flex items-center justify-center rounded-full text-white font-medium select-none ${name && "border"} ${!avatarURL && backgroundClass} w-${size || 6} h-${size || 6}`}
+            className={cn(
+                "flex items-center justify-center rounded-full",
+                "text-white font-medium select-none",
+                name && "border",
+                !avatarURL && backgroundClass,
+                "transition-colors",
+                `w-${size || 6}`,
+                `h-${size || 6}`,
+            )}
         >
             {avatarURL ? (
                 <img
@@ -69,7 +78,7 @@ export default function Avatar({
             ) : name ? (
                 <span className={textClass}>{getInitials(name)}</span>
             ) : (
-                <UserRound size={size ? size * 2 + 2 : 14} />
+                <UserRound className={"size-10"} />
             )}
         </div>
     );