diff --git a/frontend/src/components/badge.njk b/frontend/src/components/badge.njk
new file mode 100644
index 0000000..6cb0f47
--- /dev/null
+++ b/frontend/src/components/badge.njk
@@ -0,0 +1,35 @@
+<template id="tesoft-badge-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        :host > div {
+            background-color: var(--gold);
+            border-radius: 0.4rem;
+            color: var(--gray);
+            font-weight: 600;
+            padding: 0.2rem 0.5rem;
+        }
+
+        slot {
+            align-items: center;
+            display: grid;
+            gap: 0.5rem;
+            grid-auto-flow: column;
+            justify-content: start;
+        }
+
+        ::slotted(svg) {
+            fill: var(--gray);
+        }
+    </style>
+
+    <div>
+        <slot></slot>
+    </div>
+</template>
+
+<script src="/src/components/badge.ts" type="module"></script>
diff --git a/frontend/src/components/badge.ts b/frontend/src/components/badge.ts
new file mode 100644
index 0000000..0cf7f16
--- /dev/null
+++ b/frontend/src/components/badge.ts
@@ -0,0 +1,15 @@
+import {TesoftComponent} from "../scripts/main.ts";
+
+export class TesoftBadge extends TesoftComponent {
+    constructor() {
+        super();
+
+        const template = document.getElementById("tesoft-badge-template") as HTMLTemplateElement;
+        const templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.appendChild(templateContent.cloneNode(true));
+    }
+}
+
+customElements.define("tesoft-badge", TesoftBadge);