diff --git a/components/Labal.tsx b/components/Labal.tsx
deleted file mode 100644
index b424e01..0000000
--- a/components/Labal.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Link from 'next/link'
-
-const Label = ({ href, text }:LabelProps):JSX.Element => {
-	return href ? <Link href={href}>
-		<a className='text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 px-2 py-1 rounded mr-1 mb-1 hover:bg-little-white-hover dark:hover:bg-discord-dark-hover'>{text}</a>
-	</Link> : <a className='text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 px-2 py-1 rounded mr-1 mb-1'>{text}</a>
-}
-
-interface LabelProps {
-  href?: string
-  text: string
-  icon?: string
-}
-
-export default Label
\ No newline at end of file
diff --git a/components/Tag.tsx b/components/Tag.tsx
new file mode 100644
index 0000000..0a74e85
--- /dev/null
+++ b/components/Tag.tsx
@@ -0,0 +1,18 @@
+import Link from 'next/link'
+
+const Tag = ({ href, text, circular=false, dark=false, marginBottom=2 }:LabelProps):JSX.Element => {
+	return href ? <Link href={href}>
+		<a className={`text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 ${circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'} mr-1 mb-${marginBottom} hover:bg-little-white-hover dark:hover:bg-discord-dark-hover`}>{text}</a>
+	</Link> : <a className={`text-base ${dark ? 'bg-little-white-hover dark:bg-very-black' : 'bg-little-white dark:bg-discord-black'} text-black dark:text-gray-400 ${circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'} mr-1 mb-${marginBottom}`}>{text}</a>
+}
+
+interface LabelProps {
+  href?: string
+  text: string | JSX.Element | JSX.Element[]
+  icon?: string
+  circular?: boolean
+  dark?: boolean
+  marginBottom?: number
+}
+
+export default Tag
\ No newline at end of file