diff --git a/src/packages/Badge/__snapshots__/test.tsx.snap b/src/packages/Badge/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..fcfbb9b
--- /dev/null
+++ b/src/packages/Badge/__snapshots__/test.tsx.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Badge /> should render Badge with custom size, shape, and color 1`] = `
+.c0 {
+  display: inline-block;
+  border-radius: 50%;
+  font-size: 1.8rem;
+  padding: 0.8rem 1.6rem;
+  background-color: red;
+  color: #F8F7FB;
+}
+
+<div>
+  <div
+    class="c0"
+    color="red"
+    shape="circle"
+  >
+    New
+  </div>
+</div>
+`;
+
+exports[`<Badge /> should render Badge with default props 1`] = `
+.c0 {
+  display: inline-block;
+  border-radius: 0;
+  font-size: 1.6rem;
+  padding: 0.8rem 1.6rem;
+  background-color: #022B54;
+  color: #F8F7FB;
+}
+
+<div>
+  <div
+    class="c0"
+    shape="square"
+  >
+    5
+  </div>
+</div>
+`;
diff --git a/src/packages/Badge/test.tsx b/src/packages/Badge/test.tsx
new file mode 100644
index 0000000..5e6db05
--- /dev/null
+++ b/src/packages/Badge/test.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { render } from '../../utils/testUtils'
+
+import Badge from '.'
+
+describe('<Badge />', () => {
+  it('should render Badge with default props', () => {
+    const { container } = render(<Badge content="5" />)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should render Badge with custom size, shape, and color', () => {
+    const { container } = render(
+      <Badge content="New" size="large" shape="circle" color="red" />
+    )
+    expect(container).toMatchSnapshot()
+  })
+  it('should render Badge by handling custom props correctly', () => {
+    const { getByTestId } = render(
+      <Badge data-testid="custom-badge" title="Custom Title" content="Custom" />
+    )
+    const badge = getByTestId('custom-badge')
+    expect(badge).toHaveAttribute('title', 'Custom Title')
+  })
+})