cleaned up IconBadge and added gap prop

src/components/common/IconBadge/IconBadge.tsx

 import { ReactNode } from "react";
-import { Grid, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
+import { Stack } from "@mui/system";
 
 interface IconBadgeProps {
   icon: ReactNode;
   title: string;
   subtitle?: string | ReactNode;
+  gap?: number;
 }
 
-export const IconBadge = ({ icon, title, subtitle }: IconBadgeProps) => (
-  <Grid
-    container
+export const IconBadge = ({
+  icon,
+  title,
+  subtitle,
+  gap = 3
+}: IconBadgeProps) => (
+  <Stack
+    flexDirection="row"
     alignItems="center"
-    direction="row"
+    gap={gap}
   >
-    <Grid
-      item
-      xs={3}
-      sm={2}
-      md={1}
-    >
-      <Grid
-        container
-        justifyContent="center"
-        direction="column"
-        alignItems="center"
+    {icon}
+    <Stack>
+      <Typography
+        variant="subtitle1"
+        component="p"
+        color="textPrimary"
       >
-        {icon}
-      </Grid>
-    </Grid>
-    <Grid
-      item
-      xs={9}
-      sm={10}
-      md={11}
-    >
-      <Grid
-        container
-        justifyContent="flex-start"
-      >
-        <Grid
-          item
-          xs={12}
-          zeroMinWidth
-        >
-          <Typography
-            noWrap
-            variant="subtitle1"
-            component="p"
-            color="textPrimary"
-          >
-            {title}
-          </Typography>
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          zeroMinWidth
+        {title}
+      </Typography>
+      {typeof subtitle === "string" ? (
+        <Typography
+          component="p"
+          variant="subtitle2"
         >
-          <Typography
-            noWrap
-            component="p"
-            variant="subtitle2"
-          >
-            {subtitle}
-          </Typography>
-        </Grid>
-      </Grid>
-    </Grid>
-  </Grid>
+          {subtitle}
+        </Typography>
+      ) : (
+        subtitle
+      )}
+    </Stack>
+  </Stack>
 );