diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
index 2c6b5b9a3..674d82a26 100644
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -42,6 +42,10 @@ type Props = {
    * The source of the avatar image
    */
   src?: string;
+  /**
+   * The custom CSS class name to apply to the component
+   */
+  className?: string;
 };
 
 /**
@@ -94,7 +98,7 @@ export const getBorderRadius = (shape: "circle" | "square") => {
     case "circle":
       return "rounded-full";
     case "square":
-      return "rounded-md";
+      return "rounded";
     default:
       return "rounded-full";
   }
@@ -119,6 +123,7 @@ export const Avatar: React.FC<Props> = (props) => {
     size = "md",
     shape = "circle",
     src,
+    className = ""
   } = props;
 
   // get size details based on the size prop
@@ -145,14 +150,14 @@ export const Avatar: React.FC<Props> = (props) => {
         {src ? (
           <img
             src={src}
-            className={`h-full w-full ${getBorderRadius(shape)}`}
+            className={`h-full w-full ${getBorderRadius(shape)} ${className}`}
             alt={name}
           />
         ) : (
           <div
             className={`${
               sizeInfo.fontSize
-            } grid place-items-center h-full w-full ${getBorderRadius(shape)}`}
+            } grid place-items-center h-full w-full ${getBorderRadius(shape)} ${className}`}
             style={{
               backgroundColor:
                 fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 75a57143b..1d5d8842e 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -90,8 +90,8 @@ export const WorkspaceSidebarDropdown = observer(() => {
 
   return (
     <div className="flex items-center gap-2 px-4 pt-4">
-      <Menu as="div" className="relative col-span-4 text-left flex-grow truncate">
-        <Menu.Button className="text-custom-sidebar-text-200 rounded-sm text-sm font-medium focus:outline-none w-full truncate">
+      <Menu as="div" className="relative col-span-4 text-left flex-grow h-full truncate">
+        <Menu.Button className="text-custom-sidebar-text-200 rounded-sm text-sm font-medium focus:outline-none w-full h-full truncate">
           <div
             className={`flex items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 truncate ${
               themeStore.sidebarCollapsed ? "justify-center" : ""
@@ -227,7 +227,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
       {!themeStore.sidebarCollapsed && (
         <Menu as="div" className="relative flex-shrink-0">
           <Menu.Button className="grid place-items-center outline-none">
-            <Avatar name={user?.display_name} src={user?.avatar} size={32} shape="square" />
+            <Avatar name={user?.display_name} src={user?.avatar} size={30} shape="square" className="!text-base" />
           </Menu.Button>
 
           <Transition