diff --git a/generator/templates/ApiTemplate.ts b/generator/templates/ApiTemplate.ts
index e35a7c81..a1405108 100644
--- a/generator/templates/ApiTemplate.ts
+++ b/generator/templates/ApiTemplate.ts
@@ -4,7 +4,7 @@ export const title = '<%- tag %>'
 
 <% operations.forEach(function(operation){ %>
 
-## <%- operation.summary %> {{ tag: '<%- operation.operation.toUpperCase() %>' , label: '<%- operation.path %>' }}
+## <%- operation.summary %> {{ tag: '<%- operation.operation.toUpperCase() %>' , label: '<%- operation.path %>' }} <% if(operation.deprecated) { %><Badge status="warning" text="Deprecated" /><% } %>
 
 <Row>
   <Col>
diff --git a/src/components/Badge.jsx b/src/components/Badge.jsx
new file mode 100644
index 00000000..71e6c3cb
--- /dev/null
+++ b/src/components/Badge.jsx
@@ -0,0 +1,22 @@
+export function Badge({ status, text }) {
+    const getStatusStyles = (status) => {
+        switch (status) {
+            case 'info':
+                // Never tested colors
+                return 'bg-blue-300/30 text-blue-400 dark:bg-blue-400/10 dark:text-blue-400';
+            case 'warning':
+                return 'bg-orange-300/30 text-orange-400 dark:bg-yellow-600/10 dark:text-yellow-600';
+            case 'error':
+                // Never tested colors
+                return 'bg-red-300/30 text-red-400 dark:bg-red-400/10 dark:text-red-400';
+            default:
+                return 'bg-gray-500/30 text-gray-600 dark:bg-gray-400/10 dark:text-gray-400';
+        }
+    };
+
+    const baseStyle = 'rounded-md py-0.5 px-2 text-sm';
+
+    const statusStyle = getStatusStyles(status);
+
+    return <span className={`${baseStyle} ${statusStyle}`}>{text}</span>;
+}
diff --git a/src/components/mdx.jsx b/src/components/mdx.jsx
index 3d81159f..4397f0d4 100644
--- a/src/components/mdx.jsx
+++ b/src/components/mdx.jsx
@@ -6,6 +6,7 @@ import { Heading } from '@/components/Heading'
 export const a = Link
 export { Button } from '@/components/Button'
 export { CodeGroup, Code as code, Pre as pre } from '@/components/Code'
+export { Badge } from '@/components/Badge'
 
 export const h2 = function H2(props) {
   return <Heading level={2} {...props} />