diff --git a/src/renderer/src/components/index.ts b/src/renderer/src/components/index.ts
index 70777fea..a5ad3a0f 100644
--- a/src/renderer/src/components/index.ts
+++ b/src/renderer/src/components/index.ts
@@ -8,3 +8,4 @@ export * from "./sidebar/sidebar";
 export * from "./text-field/text-field";
 export * from "./checkbox-field/checkbox-field";
 export * from "./link/link";
+export * from "./tag/tag";
diff --git a/src/renderer/src/components/tag/tag.css.ts b/src/renderer/src/components/tag/tag.css.ts
index 58d8028c..6d1076ba 100644
--- a/src/renderer/src/components/tag/tag.css.ts
+++ b/src/renderer/src/components/tag/tag.css.ts
@@ -1,9 +1,10 @@
+import { SPACING_UNIT, vars } from "../../theme.css";
 import { style } from "@vanilla-extract/css";
 
 export const tagStyle = style({
   borderRadius: '3px',
-  border: '1px solid #FFFFFF33',
-  padding: '2px 5px',
+  border: `1px solid ${vars.color.border}`,
+  padding: `${SPACING_UNIT / 4}px ${SPACING_UNIT}px`,
 });
 
 export const tagText = style({