diff --git a/Parts/Badge.js b/Parts/Badge.js
deleted file mode 100644
index 385b58c..0000000
--- a/Parts/Badge.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useTranslation } from "react-i18next";
-import tw, { styled } from "twin.macro";
-import "styled-components/macro";
-
-export function Badge({ color, text, ...props }) {
-  const colors = {
-    yellow: tw`bg-yellow-500`,
-    gray: tw`bg-gray-500`,
-    red: tw`bg-red-700`,
-  };
-
-  const realColor = (typeof(color) === "string" && color in colors) ? colors[color] : color;
-
-  return (
-    <p css={[tw`px-2 py-1 inline text-primary text-xs font-semibold uppercase  rounded-full `, realColor]} {...props}>{text}</p>
-  );
-}
diff --git a/Parts/Badge.tsx b/Parts/Badge.tsx
new file mode 100644
index 0000000..7f7df13
--- /dev/null
+++ b/Parts/Badge.tsx
@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18next";
+import tw from "twin.macro";
+import "styled-components/macro";
+import { ComponentProps, forwardRef } from "react";
+
+export const Badge = forwardRef<HTMLParagraphElement, { color: string, text: string | number }>(({ color, text, ...props }, ref) => {
+  const colors = {
+    yellow: tw`bg-yellow-500`,
+    gray: tw`bg-gray-500`,
+    red: tw`bg-red-700`,
+  };
+
+  const realColor = (typeof (color) === "string" && color in colors) ? colors[color] : color;
+
+  return (
+    <p ref={ref} css={[tw`px-2 py-1 inline text-primary text-xs font-semibold uppercase  rounded-full `, realColor]} {...props}>{text}</p>
+  );
+});
\ No newline at end of file