diff --git a/src/components/molecules/badge/withBadge.tsx b/src/components/molecules/badge/withBadge.tsx
index f2d44c70..2398702e 100644
--- a/src/components/molecules/badge/withBadge.tsx
+++ b/src/components/molecules/badge/withBadge.tsx
@@ -99,22 +99,24 @@ const withBadge =
     // Render the wrapped component with the badge
     return (
       <Box>
-        <WrappedComponent
-          {...(props as P)}
-          onLayout={onBaseComponentLayoutChange}
-        />
+        <Box alignSelf="flex-start">
+          <WrappedComponent
+            {...(props as P)}
+            onLayout={onBaseComponentLayoutChange}
+          />
 
-        {!hidden && (
-          <Badge
-            {...badgeProps}
-            onLayout={onBadgeLayoutChange}
-            position="absolute"
-            zIndex="overlay"
-            style={computedPositionWithWebMarginsForBadge}
-          >
-            {badgeValue}
-          </Badge>
-        )}
+          {!hidden && (
+            <Badge
+              {...badgeProps}
+              onLayout={onBadgeLayoutChange}
+              position="absolute"
+              zIndex="overlay"
+              style={computedPositionWithWebMarginsForBadge}
+            >
+              {badgeValue}
+            </Badge>
+          )}
+        </Box>
       </Box>
     ) as React.ReactElement<P>;
   };