diff --git a/client/src/app/components/labels-from-items/labels-from-items.tsx b/client/src/app/components/labels-from-items/labels-from-items.tsx
deleted file mode 100644
index 2c65c59fcc..0000000000
--- a/client/src/app/components/labels-from-items/labels-from-items.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-import { LabelGroup, LabelProps } from "@patternfly/react-core";
-import { LabelCustomColor } from "../LabelCustomColor";
-import { useTranslation } from "react-i18next";
-
-interface RandomColorLabelProps extends LabelProps {}
-
-export const RandomColorLabel: React.FC<RandomColorLabelProps> = ({
-  ...props
-}) => {
-  const getRandomColor = (() => {
-    "use strict";
-
-    const randomInt = (min: number, max: number) => {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
-    };
-
-    return () => {
-      const h = randomInt(0, 360);
-      const s = randomInt(42, 98);
-      const l = randomInt(40, 90);
-      return `hsl(${h},${s}%,${l}%)`;
-    };
-  })();
-
-  const randomColor = getRandomColor();
-
-  return <LabelCustomColor color={randomColor} {...props} />;
-};
-
-export function LabelsFromItems<T extends { name: string }>({
-  items,
-  noneMessage,
-}: {
-  items?: T[];
-  noneMessage?: string;
-}): JSX.Element {
-  const { t } = useTranslation();
-
-  if (items && items.length > 0) {
-    return (
-      <LabelGroup>
-        {items.map((item, index) => (
-          <RandomColorLabel key={index}>{item.name}</RandomColorLabel>
-        ))}
-      </LabelGroup>
-    );
-  }
-  return <div>{noneMessage || t("terms.none")}</div>;
-}
diff --git a/client/src/app/pages/applications/components/application-tags/application-tag-label.tsx b/client/src/app/components/labels/item-tag-label/item-tag-label.tsx
similarity index 86%
rename from client/src/app/pages/applications/components/application-tags/application-tag-label.tsx
rename to client/src/app/components/labels/item-tag-label/item-tag-label.tsx
index ea514d3587..ef6ad228a4 100644
--- a/client/src/app/pages/applications/components/application-tags/application-tag-label.tsx
+++ b/client/src/app/components/labels/item-tag-label/item-tag-label.tsx
@@ -9,13 +9,13 @@ export const getTagCategoryFallbackColor = (category?: TagCategory) => {
   return colorValues[category?.id % colorValues.length];
 };
 
-export interface ApplicationTagLabelProps {
+export interface ItemTagLabelProps {
   tag: Tag;
   category?: TagCategory;
   className?: string;
 }
 
-export const ApplicationTagLabel: React.FC<ApplicationTagLabelProps> = ({
+export const ItemTagLabel: React.FC<ItemTagLabelProps> = ({
   tag,
   category,
   className,
diff --git a/client/src/app/components/labels/labels-from-items/labels-from-items.tsx b/client/src/app/components/labels/labels-from-items/labels-from-items.tsx
new file mode 100644
index 0000000000..aef881fcd9
--- /dev/null
+++ b/client/src/app/components/labels/labels-from-items/labels-from-items.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Label, LabelGroup } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+
+export function LabelsFromItems<T extends { name: string }>({
+  items,
+  noneMessage,
+}: {
+  items?: T[];
+  noneMessage?: string;
+}): JSX.Element {
+  const { t } = useTranslation();
+
+  if (items && items.length > 0) {
+    return (
+      <LabelGroup>
+        {items.map((item, index) => (
+          <Label key={index}>{item.name}</Label>
+        ))}
+      </LabelGroup>
+    );
+  }
+  return <div>{noneMessage || t("terms.none")}</div>;
+}
diff --git a/client/src/app/components/labels/labels-from-tags/labels-from-tags.tsx b/client/src/app/components/labels/labels-from-tags/labels-from-tags.tsx
new file mode 100644
index 0000000000..6ec103c42b
--- /dev/null
+++ b/client/src/app/components/labels/labels-from-tags/labels-from-tags.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { LabelGroup } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
+import { ItemTagLabel } from "../item-tag-label/item-tag-label";
+import { Tag } from "@app/api/models";
+import { useFetchTagCategories } from "@app/queries/tags";
+
+export function LabelsFromTags({
+  tags,
+  noneMessage,
+}: {
+  tags?: Tag[];
+  noneMessage?: string;
+}): JSX.Element {
+  const { t } = useTranslation();
+  const { tagCategories } = useFetchTagCategories();
+
+  const findCategoryForTag = (tagId: number) => {
+    return tagCategories.find(
+      (category) =>
+        category.tags?.some((categoryTag) => categoryTag.id === tagId)
+    );
+  };
+
+  if (tags && tags.length > 0) {
+    return (
+      <LabelGroup>
+        {tags.map((tag) => {
+          const tagCategory = findCategoryForTag(tag.id);
+
+          if (!tagCategory) return null;
+
+          return <ItemTagLabel key={tag.id} tag={tag} category={tagCategory} />;
+        })}
+      </LabelGroup>
+    );
+  }
+
+  return <div>{noneMessage || t("terms.none")}</div>;
+}
diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx
index 9ae1466bf1..050925b54f 100644
--- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx
+++ b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx
@@ -45,7 +45,7 @@ import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle
 import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
 import { ApplicationFacts } from "./application-facts";
 import { ReviewFields } from "./review-fields";
-import { LabelsFromItems } from "@app/components/labels-from-items/labels-from-items";
+import { LabelsFromItems } from "@app/components/labels/labels-from-items/labels-from-items";
 import { ReviewedArchetypeItem } from "./reviewed-archetype-item";
 import { RiskLabel } from "@app/components/RiskLabel";
 import { ApplicationDetailFields } from "./application-detail-fields";
diff --git a/client/src/app/pages/applications/components/application-tags/application-tags.tsx b/client/src/app/pages/applications/components/application-tags/application-tags.tsx
index 1cf37bcac6..ae7595e2f2 100644
--- a/client/src/app/pages/applications/components/application-tags/application-tags.tsx
+++ b/client/src/app/pages/applications/components/application-tags/application-tags.tsx
@@ -28,7 +28,7 @@ import {
 } from "@app/components/FilterToolbar";
 import { useLegacyFilterState } from "@app/hooks/useLegacyFilterState";
 import { useHistory } from "react-router-dom";
-import { ApplicationTagLabel } from "./application-tag-label";
+import { ItemTagLabel } from "../../../../components/labels/item-tag-label/item-tag-label";
 
 interface TagWithSource extends Tag {
   source?: string;
@@ -237,7 +237,7 @@ export const ApplicationTags: React.FC<ApplicationTagsProps> = ({
                     </TextContent>
                     <Flex>
                       {tagsInThisCategoryInThisSource.map((tag) => (
-                        <ApplicationTagLabel
+                        <ItemTagLabel
                           key={tag.id}
                           tag={tag}
                           category={tagCategoriesById.get(
diff --git a/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
index b8bde1f2a5..648fdd01f3 100644
--- a/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
+++ b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
@@ -23,9 +23,10 @@ import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
 import { PageDrawerContent } from "@app/components/PageDrawerContext";
 
 import { dedupeArrayOfObjects } from "@app/utils/utils";
-import { LabelsFromItems } from "@app/components/labels-from-items/labels-from-items";
+import { LabelsFromItems } from "@app/components/labels/labels-from-items/labels-from-items";
 import { ReviewFields } from "@app/pages/applications/components/application-detail-drawer/review-fields";
 import { RiskLabel } from "@app/components/RiskLabel";
+import { LabelsFromTags } from "@app/components/labels/labels-from-tags/labels-from-tags";
 
 export interface IArchetypeDetailDrawerProps {
   onCloseClick: () => void;
@@ -227,7 +228,7 @@ const ApplicationLabels: React.FC<{ applicationRefs?: Ref[] }> = ({
 }) => <LabelsFromItems items={applicationRefs as Ref[]} />;
 
 const TagLabels: React.FC<{ tags?: Tag[] }> = ({ tags }) => (
-  <LabelsFromItems items={tags} />
+  <LabelsFromTags tags={tags} />
 );
 
 const StakeholderLabels: React.FC<{ archetype: Archetype }> = ({
diff --git a/client/src/app/pages/controls/tags/components/tag-category-form.tsx b/client/src/app/pages/controls/tags/components/tag-category-form.tsx
index f2289edfc6..69091fdcc5 100644
--- a/client/src/app/pages/controls/tags/components/tag-category-form.tsx
+++ b/client/src/app/pages/controls/tags/components/tag-category-form.tsx
@@ -32,7 +32,7 @@ import {
 import { Color } from "@app/components/Color";
 import { OptionWithValue, SimpleSelect } from "@app/components/SimpleSelect";
 import { NotificationsContext } from "@app/components/NotificationsContext";
-import { getTagCategoryFallbackColor } from "@app/pages/applications/components/application-tags/application-tag-label";
+import { getTagCategoryFallbackColor } from "@app/components/labels/item-tag-label/item-tag-label";
 export interface FormValues {
   name: string;
   rank?: number;
diff --git a/client/src/app/pages/controls/tags/tags.tsx b/client/src/app/pages/controls/tags/tags.tsx
index 212fe27b7e..578fec58b2 100644
--- a/client/src/app/pages/controls/tags/tags.tsx
+++ b/client/src/app/pages/controls/tags/tags.tsx
@@ -40,7 +40,7 @@ import { NotificationsContext } from "@app/components/NotificationsContext";
 import { COLOR_NAMES_BY_HEX_VALUE } from "@app/Constants";
 import { TagForm } from "./components/tag-form";
 import { TagCategoryForm } from "./components/tag-category-form";
-import { getTagCategoryFallbackColor } from "@app/pages/applications/components/application-tags/application-tag-label";
+import { getTagCategoryFallbackColor } from "@app/components/labels/item-tag-label/item-tag-label";
 import { AppTableActionButtons } from "@app/components/AppTableActionButtons";
 import { Color } from "@app/components/Color";
 import { ConditionalRender } from "@app/components/ConditionalRender";