diff --git a/frontend/src/component/common/Badge/Badge.test.tsx b/frontend/src/component/common/Badge/Badge.test.tsx
new file mode 100644
index 0000000000..3616c44d30
--- /dev/null
+++ b/frontend/src/component/common/Badge/Badge.test.tsx
@@ -0,0 +1,17 @@
+import { screen } from '@testing-library/react';
+import { Badge } from './Badge';
+import { render } from '../../../utils/testRenderer';
+
+test('Badge should render text', async () => {
+    render(<Badge color='success'>Predefined</Badge>);
+
+    const result = await screen.findByText('Predefined');
+    expect(result).toBeInTheDocument();
+});
+
+test('Badge should children number 0', async () => {
+    render(<Badge color='success'>{0}</Badge>);
+
+    const result = await screen.findByText('0');
+    expect(result).toBeInTheDocument();
+});
diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx
index 2eb3dc1b19..81652c652c 100644
--- a/frontend/src/component/common/Badge/Badge.tsx
+++ b/frontend/src/component/common/Badge/Badge.tsx
@@ -113,7 +113,11 @@ export const Badge: FC<IBadgeProps> = forwardRef(
                 show={BadgeIcon(color, icon!)}
             />
             <ConditionallyRender
-                condition={Boolean(children)}
+                condition={
+                    children !== null &&
+                    children !== undefined &&
+                    children !== ''
+                }
                 show={<div>{children}</div>}
             />
             <ConditionallyRender