diff --git a/examples/next/src/components/AvatarDemo.tsx b/examples/next/src/components/AvatarDemo.tsx
index 9a1fea68..3fac750c 100644
--- a/examples/next/src/components/AvatarDemo.tsx
+++ b/examples/next/src/components/AvatarDemo.tsx
@@ -12,11 +12,10 @@ const AvatarToggleDemo = () => {
   return (
     <Wrapper title="Avatar">
       <Flex direction="column" gap={2}>
-        {isLoaded ? (
-          <Avatar src="/img/logo.png" alt="avatar" />
-        ) : (
-          <Avatar src="" alt="" />
-        )}
+        <Avatar
+          src={isLoaded ? "/img/logo.png" : ""}
+          alt={isLoaded ? "avatar" : ""}
+        />
         <Button
           data-testid="toggle"
           variant="ghost"
diff --git a/examples/vite-react/src/components/AvatarDemo.tsx b/examples/vite-react/src/components/AvatarDemo.tsx
index 6f6fb0dc..637f098a 100644
--- a/examples/vite-react/src/components/AvatarDemo.tsx
+++ b/examples/vite-react/src/components/AvatarDemo.tsx
@@ -10,11 +10,10 @@ const AvatarToggleDemo = () => {
   return (
     <Wrapper title="Avatar">
       <Flex direction="column" gap={2}>
-        {isLoaded ? (
-          <Avatar src="/img/logo.png" alt="avatar" />
-        ) : (
-          <Avatar src="" alt="" />
-        )}
+        <Avatar
+          src={isLoaded ? "/img/logo.png" : ""}
+          alt={isLoaded ? "avatar" : ""}
+        />
         <Button
           data-testid="toggle"
           variant="ghost"
diff --git a/src/components/core/Avatar/Avatar.recipe.ts b/src/components/core/Avatar/Avatar.recipe.ts
index 4e74cc4d..6338dd11 100644
--- a/src/components/core/Avatar/Avatar.recipe.ts
+++ b/src/components/core/Avatar/Avatar.recipe.ts
@@ -9,15 +9,20 @@ export const avatarRecipe = defineSlotRecipe({
     root: {
       height: 10,
       width: 10,
+      m: "-1px",
+      borderColor: "border.default",
       borderRadius: "full",
       borderWidth: "1px",
-      alignItems: "center",
       flexShrink: 0,
-      justifyContent: "center",
     },
     fallback: {
+      alignItems: "center",
+      background: "bg.subtle",
+      display: "flex",
+      fontWeight: "semibold",
+      color: "fg.default",
       height: "inherit",
-      textStyle: "md",
+      justifyContent: "center",
     },
     image: {
       objectFit: "cover",
diff --git a/src/components/core/Avatar/Avatar.stories.tsx b/src/components/core/Avatar/Avatar.stories.tsx
index d17f943f..87520be8 100644
--- a/src/components/core/Avatar/Avatar.stories.tsx
+++ b/src/components/core/Avatar/Avatar.stories.tsx
@@ -13,11 +13,11 @@ const AvatarToggle = () => {
 
   return (
     <Flex direction="column" gap={2}>
-      {isLoaded ? (
-        <Avatar src="/img/logo.png" alt="avatar" />
-      ) : (
-        <Avatar src="" />
-      )}
+      <Avatar
+        src={isLoaded ? "/img/logo.png" : ""}
+        alt={isLoaded ? "avatar" : ""}
+      />
+
       <Button
         data-testid="toggle"
         variant="ghost"
diff --git a/src/components/core/Avatar/Avatar.tsx b/src/components/core/Avatar/Avatar.tsx
index 020a1170..a784436d 100644
--- a/src/components/core/Avatar/Avatar.tsx
+++ b/src/components/core/Avatar/Avatar.tsx
@@ -3,7 +3,6 @@ import {
   PrimitiveAvatarFallback,
   PrimitiveAvatarImage,
 } from "components/primitives";
-import { panda } from "generated/panda/jsx";
 import { avatar } from "generated/panda/recipes";
 import { useIsMounted } from "lib/hooks";
 
@@ -39,16 +38,14 @@ const Avatar = ({
   return (
     <PrimitiveAvatar className={classNames.root} {...rest}>
       <PrimitiveAvatarFallback className={classNames.fallback}>
-        <panda.div
-          height="inherit"
-          justifyContent="center"
-          alignItems="center"
-          display="flex"
-        >
-          {fallback}
-        </panda.div>
+        {fallback}
       </PrimitiveAvatarFallback>
-      <PrimitiveAvatarImage className={classNames.image} src={src} alt={alt} />
+      <PrimitiveAvatarImage
+        objectFit="contain"
+        className={classNames.image}
+        src={src}
+        alt={alt}
+      />
     </PrimitiveAvatar>
   );
 };