diff --git a/src/assets/styles/colours.css b/src/assets/styles/colours.css
index ea82453..7b67195 100644
--- a/src/assets/styles/colours.css
+++ b/src/assets/styles/colours.css
@@ -224,6 +224,19 @@ html {
     --colour-send-primary-accent-2: #1F8DDB;
   }
 
+  /*
+  * Brand Colours
+  * Thunderbird
+  * The fallback if no service is set.
+  */
+  --colour-service-soft: var(--colour-primary-soft);
+  --colour-service-primary: var(--colour-primary-default);
+  --colour-service-primary-hover: var(--colour-primary-hover);
+  --colour-service-primary-pressed: var(--colour-primary-pressed);
+  --colour-service-secondary: var(--colour-secondary-default);
+  --colour-service-accent-1: var(--colour-accent-purple);
+  --colour-service-accent-2: var(--colour-accent-teal);
+
   &[data-tbpro-service='apmt'] {
     --colour-service-soft: var(--colour-apmt-soft);
     --colour-service-primary: var(--colour-apmt-primary);
diff --git a/src/assets/svg/icons/expiry.svg b/src/assets/svg/icons/status-expiry.svg
similarity index 100%
rename from src/assets/svg/icons/expiry.svg
rename to src/assets/svg/icons/status-expiry.svg
diff --git a/src/assets/svg/icons/status-info.svg b/src/assets/svg/icons/status-info.svg
new file mode 100644
index 0000000..64b8e8f
--- /dev/null
+++ b/src/assets/svg/icons/status-info.svg
@@ -0,0 +1,6 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="icon">
+    <path opacity="0.2" d="M10.5 5.5C10.5 6.82608 9.97322 8.09784 9.03553 9.03552C8.09785 9.9732 6.82608 10.5 5.5 10.5C4.17392 10.5 2.90215 9.9732 1.96447 9.03552C1.02678 8.09784 0.5 6.82608 0.5 5.5C0.5 4.17392 1.02678 2.90216 1.96447 1.96448C2.90215 1.0268 4.17392 0.5 5.5 0.5C6.82608 0.5 8.09785 1.0268 9.03553 1.96448C9.97322 2.90216 10.5 4.17392 10.5 5.5Z" fill="currentColor"/>
+    <path d="M5.5 0C2.46837 0 0 2.46836 0 5.5C0 7.29555 0.865252 8.89387 2.20117 9.89844C2.20311 9.90044 2.20506 9.9023 2.20703 9.9043C2.20817 9.90515 2.20979 9.9052 2.21094 9.90625C3.12888 10.5933 4.2684 11 5.5 11C6.7316 11 7.87112 10.5933 8.78906 9.90625C8.7924 9.90425 8.79549 9.90144 8.79883 9.89844C10.1347 8.89387 11 7.29555 11 5.5C11 2.46836 8.53163 0 5.5 0ZM5.5 1C5.5736 1.00015 5.64719 1.00186 5.7207 1.00586C5.72458 1.00604 5.72855 1.00566 5.73242 1.00586C5.80219 1.00986 5.87188 1.01488 5.94141 1.02148C5.94791 1.02211 5.95445 1.0224 5.96094 1.02344C6.10047 1.03754 6.23763 1.05944 6.37305 1.08594H6.37695C6.38737 1.08794 6.39782 1.0898 6.4082 1.0918C6.69047 1.1493 6.96253 1.23432 7.22266 1.3418C8.32443 1.79703 9.20297 2.67556 9.6582 3.77734C9.76568 4.03747 9.85067 4.30953 9.9082 4.5918C9.91019 4.6022 9.91214 4.61265 9.91406 4.62305C9.91431 4.62405 9.91382 4.62595 9.91406 4.62695C9.94055 4.76237 9.96246 4.89953 9.97656 5.03906C9.97723 5.04606 9.97789 5.05209 9.97852 5.05859C9.98523 5.12799 9.9906 5.1973 9.99414 5.26758C9.99809 5.34498 10 5.42249 10 5.5C10 5.71478 9.98395 5.92616 9.95508 6.13281V6.13477V6.13672V6.13867V6.14062C9.95461 6.14363 9.95359 6.14639 9.95312 6.15039C9.92279 6.36147 9.87677 6.56714 9.81836 6.76758C9.64835 7.351 9.36553 7.88534 8.99219 8.34375C8.99163 8.33875 8.99084 8.33333 8.99023 8.32812C8.70745 8.67717 8.37367 8.98486 8 9.23633V9.24414C7.97846 9.25854 7.95539 9.27116 7.93359 9.28516C7.75744 9.39839 7.57283 9.49959 7.38086 9.58789C7.37056 9.59289 7.35995 9.59686 7.34961 9.60156C7.16401 9.68526 6.97347 9.75812 6.77539 9.81641C6.7677 9.81841 6.75966 9.82027 6.75195 9.82227C6.55703 9.87847 6.35728 9.92348 6.15234 9.95312C6.13738 9.95413 6.1224 9.95603 6.10742 9.95703C5.90877 9.98373 5.7061 10 5.5 10C5.2939 10 5.09123 9.98383 4.89258 9.95703C4.8776 9.95603 4.86262 9.95413 4.84766 9.95312C4.64272 9.92344 4.44297 9.87852 4.24805 9.82227C4.24023 9.82027 4.23242 9.81841 4.22461 9.81641C4.02653 9.75811 3.83599 9.68523 3.65039 9.60156C3.63996 9.59656 3.62954 9.59259 3.61914 9.58789C3.42717 9.49959 3.24256 9.39839 3.06641 9.28516C3.04461 9.27116 3.02154 9.25854 3 9.24414V9.23633C2.62633 8.98486 2.29253 8.67871 2.00977 8.32812C2.00916 8.33312 2.00836 8.33855 2.00781 8.34375C1.63447 7.88534 1.35165 7.351 1.18164 6.76758C1.12323 6.56714 1.07721 6.36147 1.04688 6.15039C1.04621 6.14439 1.04556 6.13871 1.04492 6.13281C1.01604 5.92626 1 5.71478 1 5.5C1 5.28389 1.01568 5.07114 1.04492 4.86328V4.85742C1.07531 4.64334 1.12237 4.43557 1.18164 4.23242C1.2421 4.02517 1.31803 3.82443 1.40625 3.63086C1.85492 2.6464 2.6464 1.85492 3.63086 1.40625C3.82443 1.31805 4.02518 1.2421 4.23242 1.18164C4.43557 1.12234 4.64334 1.07532 4.85742 1.04492C4.85933 1.04465 4.86137 1.04519 4.86328 1.04492C5.07114 1.01572 5.28389 1 5.5 1ZM5.5 3C5.43434 3 5.36932 3.01296 5.30866 3.03809C5.248 3.06321 5.19288 3.09999 5.14645 3.14642C5.10002 3.19285 5.06319 3.24799 5.03806 3.30865C5.01293 3.36932 5 3.43434 5 3.5C5 3.56566 5.01293 3.63068 5.03806 3.69135C5.06319 3.75201 5.10002 3.80715 5.14645 3.85358C5.19288 3.90001 5.248 3.93679 5.30866 3.96191C5.36932 3.98704 5.43434 4 5.5 4C5.56566 4 5.63068 3.98704 5.69134 3.96191C5.752 3.93679 5.80712 3.90001 5.85355 3.85358C5.89998 3.80715 5.93681 3.75201 5.96194 3.69135C5.98707 3.63068 6 3.56566 6 3.5C6 3.43434 5.98707 3.36932 5.96194 3.30865C5.93681 3.24799 5.89998 3.19285 5.85355 3.14642C5.80712 3.09999 5.752 3.06321 5.69134 3.03809C5.63068 3.01296 5.56566 3 5.5 3V3ZM5.5 5C5.36739 5 5.24021 5.05266 5.14645 5.14642C5.05268 5.24019 5 5.36739 5 5.5V7.5C5 7.63261 5.05268 7.75981 5.14645 7.85358C5.24021 7.94734 5.36739 8 5.5 8C5.63261 8 5.75979 7.94734 5.85355 7.85358C5.94732 7.75981 6 7.63261 6 7.5V5.5C6 5.36739 5.94732 5.24019 5.85355 5.14642C5.75979 5.05266 5.63261 5 5.5 5Z" fill="currentColor"/>
+  </g>
+</svg>
diff --git a/src/assets/svg/icons/status-warning.svg b/src/assets/svg/icons/status-warning.svg
new file mode 100644
index 0000000..6ea7637
--- /dev/null
+++ b/src/assets/svg/icons/status-warning.svg
@@ -0,0 +1,6 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g id="icon">
+    <path opacity="0.2" d="M5.5 2C5.08018 2.00058 4.71443 2.27884 4.53571 2.61538L1.20829 8.4375C1 8.76923 1.00098 8.83806 1 9.07692C1 9.58673 1.43173 10 1.96429 10H9.03571C9.56827 10 10 9.58673 10 9.07692C9.99997 8.83447 10 8.76923 9.78657 8.42909L6.46429 2.61538C6.283 2.27524 5.92177 2.00003 5.5 2Z" fill="currentColor"/>
+    <path d="M5.49806 1C4.64262 1.00119 3.97797 1.54498 3.66017 2.13086L0.349621 7.92383C0.243976 8.09302 0.131858 8.28815 0.0664176 8.51172C-0.000574954 8.7406 -0.000102092 8.94786 1.13353e-05 9.05078V9.07227V9.07617C1.13353e-05 10.179 0.921618 11 1.96486 11H9.03517C10.0784 11 11 10.179 11 9.07617V9.05469C11.0004 8.94831 11.0019 8.73835 10.9317 8.50391C10.865 8.28093 10.75 8.08488 10.6445 7.91602L7.3379 2.13086C7.01861 1.54344 6.35974 1.00006 5.50001 1H5.49806ZM5.50001 2C5.92178 2.00003 6.28357 2.27508 6.46486 2.61523L9.78712 8.42969C10.0005 8.76977 9.99998 8.83382 10 9.07617C10 9.58597 9.56773 10 9.03517 10H1.96486C1.4323 10 1.00001 9.58598 1.00001 9.07617V9.07227C1.00096 8.83687 1.00197 8.76723 1.209 8.4375L4.53517 2.61523C4.71389 2.27868 5.08019 2.00059 5.50001 2ZM5.50001 4C5.22387 4 5.00001 4.22386 5.00001 4.5V6.5C5.00001 6.77614 5.22387 7 5.50001 7C5.77615 7 6.00001 6.77614 6.00001 6.5V4.5C6.00001 4.22386 5.77615 4 5.50001 4ZM5.47462 8C5.21044 8.01339 5.00001 8.23249 5.00001 8.5C5.00001 8.77614 5.22387 9 5.50001 9C5.77615 9 6.00001 8.77614 6.00001 8.5C6.00001 8.22386 5.77615 8 5.50001 8C5.49138 8 5.48314 7.99957 5.47462 8Z" fill="currentColor"/>
+  </g>
+</svg>
diff --git a/src/elements/BaseBadge.stories.ts b/src/elements/BaseBadge.stories.ts
new file mode 100644
index 0000000..2f00e9c
--- /dev/null
+++ b/src/elements/BaseBadge.stories.ts
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import BaseBadge from "@/elements/BaseBadge.vue";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta: Meta<typeof BaseBadge> = {
+  title: "Elements/Badge",
+  component: BaseBadge,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  argTypes: {
+    type: { control: "select", options: ["primary", "secondary", "warning"] },
+    icon: { control: "boolean" },
+    default: { control: "text" },
+  },
+  args: {
+    default: "Recommended",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    type: "primary",
+    icon: false,
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    type: "secondary",
+    icon: false,
+    default: "Updated",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    type: "warning",
+    icon: false,
+    default: "Experimental"
+  },
+};
+
+export const IconPrimary: Story = {
+  args: {
+    type: "primary",
+    icon: true,
+  },
+};
+
+export const IconSecondary: Story = {
+  args: {
+    type: "secondary",
+    icon: true,
+    default: "Updated",
+  },
+};
+
+export const IconWarning: Story = {
+  args: {
+    type: "warning",
+    icon: true,
+    default: "Experimental",
+  },
+};
diff --git a/src/elements/BaseBadge.vue b/src/elements/BaseBadge.vue
new file mode 100644
index 0000000..6ed8007
--- /dev/null
+++ b/src/elements/BaseBadge.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+
+import StatusInfoIcon from '@/icons/StatusInfoIcon.vue';
+import StatusWarningIcon from '@/icons/StatusWarningIcon.vue';
+
+// component properties
+interface Props {
+  type?: string;
+  icon?: boolean;
+}
+withDefaults(defineProps<Props>(), {
+  type: "primary",
+  icon: false,
+})
+</script>
+
+<template>
+  <div :class="{ [type]: type }" class="badge">
+    <span class="icon" v-if="icon">
+      <slot name="icon">
+        <status-info-icon v-if="type == 'primary' || type == 'secondary'"/>
+        <status-warning-icon v-if="type == 'warning'"/>
+      </slot>
+    </span>
+    <span class="text">
+      <slot/>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+@import '@/assets/styles/custom-media.pcss';
+
+.icon {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.text {
+  margin: auto;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.badge {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.1875rem;
+  gap: 0.3125rem;
+  border: 0.0625rem solid;
+  padding: 0.140625rem 0.28125rem;
+}
+
+.primary {
+  background-color: var(--colour-primary-soft);
+  border-color: var(--colour-service-primary-hover);
+  color: var(--colour-service-primary-hover);
+}
+
+.secondary {
+  background-color: var(--colour-neutral-subtle);
+  border-color: var(--colour-ti-secondary);
+  color: var(--colour-ti-secondary);
+}
+
+.warning {
+  background-color: var(--colour-warning-soft);
+  border-color: var(--colour-ti-warning);
+  color: var(--colour-ti-warning);
+}
+</style>
diff --git a/src/elements/ExpiryIndicator.stories.ts b/src/elements/ExpiryBadge.stories.ts
similarity index 82%
rename from src/elements/ExpiryIndicator.stories.ts
rename to src/elements/ExpiryBadge.stories.ts
index 77f5d5f..b9c9ad3 100644
--- a/src/elements/ExpiryIndicator.stories.ts
+++ b/src/elements/ExpiryBadge.stories.ts
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-import ExpiryIndicator from "@/elements/ExpiryIndicator.vue";
+import ExpiryBadge from "@/elements/ExpiryBadge.vue";
 import { ExpiryUnitTypes } from "@/definitions";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta<typeof ExpiryIndicator> = {
-  title: "Elements/ExpiryIndicator",
-  component: ExpiryIndicator,
+const meta: Meta<typeof ExpiryBadge> = {
+  title: "Elements/ExpiryBadge",
+  component: ExpiryBadge,
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"],
   args: {
@@ -18,7 +18,7 @@ const meta: Meta<typeof ExpiryIndicator> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Info: Story = {
+export const Default: Story = {
   args: {
     timeRemaining: 10,
     timeUnit: ExpiryUnitTypes.Years,
diff --git a/src/elements/ExpiryBadge.vue b/src/elements/ExpiryBadge.vue
new file mode 100644
index 0000000..49ffc33
--- /dev/null
+++ b/src/elements/ExpiryBadge.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import BaseBadge from "./BaseBadge.vue";
+import StatusExpiryIcon from "@/icons/StatusExpiryIcon.vue";
+import { computed, toRef } from "vue";
+import { t } from '@/composable/i18n';
+import { ExpiryUnitTypes } from "@/definitions";
+
+// component properties
+interface Props {
+  timeRemaining?: number;
+  warningThreshold?: number;
+  timeUnit?: ExpiryUnitTypes;
+}
+const props = withDefaults(defineProps<Props>(), {
+  timeRemaining: 10,
+  warningThreshold: 5,
+  timeUnit: ExpiryUnitTypes.Days
+})
+
+const timeRemaining = toRef(() => props.timeRemaining);
+const warningThreshold = toRef(() => props.warningThreshold);
+const timeRemainingLabel = computed(() => timeRemaining.value.toString());
+const status = computed(() => {
+  if (timeRemaining.value <= 0) {
+    return "secondary";
+  } else if (timeRemaining.value < warningThreshold.value) {
+    return "warning";
+  } else {
+    return "primary";
+  }
+});
+
+</script>
+
+<template>
+  <base-badge :class="status" icon>
+    <template #icon>
+      <status-expiry-icon/>
+    </template>
+    {{ t(`expiryIndicator.${timeUnit}`, { 'n': timeRemainingLabel }) }}
+  </base-badge>
+</template>
diff --git a/src/elements/ExpiryIndicator.vue b/src/elements/ExpiryIndicator.vue
deleted file mode 100644
index 16e869c..0000000
--- a/src/elements/ExpiryIndicator.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import ExpiryIcon from '@/icons/ExpiryIcon.vue';
-import { computed, toRef } from "vue";
-import { t } from '@/composable/i18n';
-import { ExpiryUnitTypes } from "@/definitions";
-
-// component properties
-interface Props {
-  timeRemaining?: number;
-  warningThreshold?: number;
-  timeUnit?: ExpiryUnitTypes;
-}
-const props = withDefaults(defineProps<Props>(), {
-  timeRemaining: 10,
-  warningThreshold: 5,
-  timeUnit: ExpiryUnitTypes.Days
-})
-
-const timeRemaining = toRef(() => props.timeRemaining);
-const warningThreshold = toRef(() => props.warningThreshold);
-const timeRemainingLabel = computed(() => timeRemaining.value.toString());
-const status = computed(() => {
-  if (timeRemaining.value <= 0) {
-    return "expired";
-  } else if (timeRemaining.value < warningThreshold.value) {
-    return "warning";
-  } else {
-    return "info";
-  }
-});
-
-</script>
-
-<template>
-  <div :class="status" class="expiry-indicator">
-    <span class="icon">
-      <expiry-icon />
-    </span>
-    <span class="body">
-      {{ t(`expiryIndicator.${timeUnit}`, { 'n': timeRemainingLabel }) }}
-    </span>
-  </div>
-</template>
-
-<style scoped>
-@import '@/assets/styles/custom-media.pcss';
-
-.icon {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.body {
-  margin: auto;
-  font-size: 0.8125rem;
-  font-weight: 700;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.expiry-indicator {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0.1875rem;
-  gap: 0.3125rem;
-  border: 0.0625rem solid;
-  padding: 0.140625rem 0.28125rem;
-}
-
-.info {
-  background-color: var(--colour-primary-soft);
-  border-color: var(--colour-primary-hover);
-  color: var(--colour-primary-hover);
-}
-
-.warning {
-  background-color: var(--colour-warning-soft);
-  border-color: var(--colour-ti-warning);
-  color: var(--colour-ti-warning);
-}
-
-.expired {
-  background-color: var(--colour-neutral-subtle);
-  border-color: var(--colour-ti-secondary);
-  color: var(--colour-ti-secondary);
-}
-</style>
diff --git a/src/elements/PrimaryBadge.vue b/src/elements/PrimaryBadge.vue
new file mode 100644
index 0000000..0c5c81d
--- /dev/null
+++ b/src/elements/PrimaryBadge.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import BaseBadge from '@/elements/BaseBadge.vue';
+</script>
+
+<template>
+  <base-badge type="primary">
+    <slot/>
+  </base-badge>
+</template>
diff --git a/src/elements/SecondaryBadge.vue b/src/elements/SecondaryBadge.vue
new file mode 100644
index 0000000..073ae19
--- /dev/null
+++ b/src/elements/SecondaryBadge.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import BaseBadge from '@/elements/BaseBadge.vue';
+</script>
+
+<template>
+  <base-badge type="secondary">
+    <slot/>
+  </base-badge>
+</template>
diff --git a/src/elements/WarningBadge.vue b/src/elements/WarningBadge.vue
new file mode 100644
index 0000000..2d169ea
--- /dev/null
+++ b/src/elements/WarningBadge.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import BaseBadge from '@/elements/BaseBadge.vue';
+</script>
+
+<template>
+  <base-badge type="warning">
+    <slot/>
+  </base-badge>
+</template>
diff --git a/src/icons/ExpiryIcon.vue b/src/icons/StatusExpiryIcon.vue
similarity index 96%
rename from src/icons/ExpiryIcon.vue
rename to src/icons/StatusExpiryIcon.vue
index f25e420..b4794c7 100644
--- a/src/icons/ExpiryIcon.vue
+++ b/src/icons/StatusExpiryIcon.vue
@@ -3,7 +3,7 @@ import { t } from '@/composable/i18n';
 </script>
 
 <template>
-  <svg :aria-label="t('expiryIcon.fileExpires')" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg :aria-label="t('icons.expires')" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g id="icon">
       <path opacity="0.2" d="M10.5 5.5C10.5 8.26142 8.26142 10.5 5.5 10.5C2.73858 10.5 0.5 8.26142 0.5 5.5C0.5 2.73858 2.73858 0.5 5.5 0.5C8.26142 0.5 10.5 2.73858 10.5 5.5Z" fill="currentColor"/>
       <path d="M5.5 0C2.46839 0 0 2.46836 0 5.5C0 7.29555 0.86526 8.89387 2.20117 9.8984C2.20311 9.9004 2.20506 9.9023 2.20703 9.9043L2.21094 9.9062C3.12888 10.5933 4.26841 11 5.5 11C6.73159 11 7.87112 10.5933 8.78906 9.9062C8.7924 9.9043 8.79549 9.9014 8.79883 9.8984C10.1347 8.89387 11 7.29555 11 5.5C11 2.46836 8.53161 0 5.5 0ZM5.5 1C5.57361 1.00015 5.64719 1.00186 5.7207 1.00586C5.72458 1.00604 5.72855 1.00566 5.73242 1.00586C5.80219 1.00986 5.87188 1.01488 5.94141 1.02148C5.94791 1.02211 5.95445 1.02224 5.96094 1.02344C6.10047 1.03754 6.23764 1.05944 6.37305 1.08594H6.37695C6.38737 1.08794 6.39782 1.0898 6.4082 1.0918C6.69047 1.1493 6.96253 1.23432 7.22266 1.3418C8.32443 1.79703 9.20297 2.67556 9.6582 3.77734C9.7657 4.03747 9.8507 4.30953 9.9082 4.5918C9.9102 4.6022 9.9121 4.61265 9.9141 4.62305V4.62695C9.9405 4.76237 9.9625 4.89953 9.9766 5.03906C9.9772 5.04606 9.9779 5.05209 9.9785 5.05859C9.9852 5.12799 9.9906 5.1973 9.9941 5.26758C9.9981 5.34498 10 5.42249 10 5.5C10 5.71478 9.9839 5.92616 9.9551 6.13281V6.13477V6.13672V6.13867V6.14062C9.9546 6.14362 9.9536 6.14639 9.9531 6.15039C9.9228 6.36147 9.8768 6.56714 9.8184 6.76758C9.6483 7.351 9.36553 7.88534 8.99219 8.34375C8.99163 8.33875 8.99084 8.33333 8.99023 8.32812C8.70742 8.6741 8.37367 8.98486 8 9.23633V9.24414C7.97846 9.25854 7.95539 9.27116 7.93359 9.28516C7.75744 9.39839 7.57283 9.49959 7.38086 9.5879C7.37056 9.5929 7.35995 9.5969 7.34961 9.6016C7.16401 9.6853 6.97347 9.7581 6.77539 9.8164C6.7677 9.8184 6.75966 9.8203 6.75195 9.8223C6.55703 9.8785 6.35728 9.9235 6.15234 9.9531C6.13738 9.9541 6.1224 9.956 6.10742 9.957C5.90877 9.9837 5.7061 10 5.5 10C5.2939 10 5.09123 9.9838 4.89258 9.957C4.8776 9.956 4.86262 9.9541 4.84766 9.9531C4.64272 9.9234 4.44297 9.8785 4.24805 9.8223C4.24023 9.8203 4.23241 9.8184 4.22461 9.8164C4.02653 9.7581 3.83599 9.6852 3.65039 9.6016C3.63996 9.5966 3.62954 9.5926 3.61914 9.5879C3.42717 9.49959 3.24256 9.39839 3.06641 9.28516C3.04461 9.27116 3.02154 9.25854 3 9.24414V9.23633C2.62633 8.98486 2.29253 8.67871 2.00977 8.32812C2.00916 8.33313 2.00836 8.33855 2.00781 8.34375C1.63447 7.88534 1.35165 7.351 1.18164 6.76758C1.12323 6.56714 1.07721 6.36147 1.04688 6.15039C1.04621 6.14439 1.04556 6.13871 1.04492 6.13281C1.01601 5.92646 1 5.71478 1 5.5C1 5.28389 1.01568 5.07114 1.04492 4.86328V4.85742C1.07531 4.64334 1.12237 4.43557 1.18164 4.23242C1.2421 4.02517 1.31803 3.82443 1.40625 3.63086C1.84358 2.67127 2.60666 1.89553 3.55664 1.44141C3.58126 1.42961 3.60599 1.41765 3.63086 1.40625C3.82443 1.31805 4.02518 1.2421 4.23242 1.18164C4.43557 1.12234 4.64334 1.07532 4.85742 1.04492H4.86328C5.07113 1.01572 5.28389 1 5.5 1ZM5.5 2C5.223 2 5 2.223 5 2.5V5.5C5 5.53462 5.00313 5.56896 5.00977 5.60156C5.0164 5.63417 5.02645 5.66538 5.03906 5.69531C5.05168 5.72524 5.068 5.75271 5.08594 5.7793C5.10387 5.80589 5.12389 5.83092 5.14648 5.85352C5.16908 5.87611 5.19411 5.89613 5.2207 5.91406C5.24729 5.932 5.27476 5.94832 5.30469 5.96094C5.33462 5.97355 5.36583 5.9836 5.39844 5.99023C5.43105 5.99687 5.46537 6 5.5 6H8.5C8.77614 6 9 5.77614 9 5.5C9 5.22386 8.77614 5 8.5 5H6V2.5C6 2.223 5.777 2 5.5 2Z" fill="currentColor"/>
diff --git a/src/icons/StatusInfoIcon.vue b/src/icons/StatusInfoIcon.vue
new file mode 100644
index 0000000..75c54a6
--- /dev/null
+++ b/src/icons/StatusInfoIcon.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { t } from '@/composable/i18n';
+</script>
+
+<template>
+  <svg :aria-label="t('icons.info')" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="icon">
+      <path opacity="0.2" d="M10.5 5.5C10.5 6.82608 9.97322 8.09784 9.03553 9.03552C8.09785 9.9732 6.82608 10.5 5.5 10.5C4.17392 10.5 2.90215 9.9732 1.96447 9.03552C1.02678 8.09784 0.5 6.82608 0.5 5.5C0.5 4.17392 1.02678 2.90216 1.96447 1.96448C2.90215 1.0268 4.17392 0.5 5.5 0.5C6.82608 0.5 8.09785 1.0268 9.03553 1.96448C9.97322 2.90216 10.5 4.17392 10.5 5.5Z" fill="currentColor"/>
+      <path d="M5.5 0C2.46837 0 0 2.46836 0 5.5C0 7.29555 0.865252 8.89387 2.20117 9.89844C2.20311 9.90044 2.20506 9.9023 2.20703 9.9043C2.20817 9.90515 2.20979 9.9052 2.21094 9.90625C3.12888 10.5933 4.2684 11 5.5 11C6.7316 11 7.87112 10.5933 8.78906 9.90625C8.7924 9.90425 8.79549 9.90144 8.79883 9.89844C10.1347 8.89387 11 7.29555 11 5.5C11 2.46836 8.53163 0 5.5 0ZM5.5 1C5.5736 1.00015 5.64719 1.00186 5.7207 1.00586C5.72458 1.00604 5.72855 1.00566 5.73242 1.00586C5.80219 1.00986 5.87188 1.01488 5.94141 1.02148C5.94791 1.02211 5.95445 1.0224 5.96094 1.02344C6.10047 1.03754 6.23763 1.05944 6.37305 1.08594H6.37695C6.38737 1.08794 6.39782 1.0898 6.4082 1.0918C6.69047 1.1493 6.96253 1.23432 7.22266 1.3418C8.32443 1.79703 9.20297 2.67556 9.6582 3.77734C9.76568 4.03747 9.85067 4.30953 9.9082 4.5918C9.91019 4.6022 9.91214 4.61265 9.91406 4.62305C9.91431 4.62405 9.91382 4.62595 9.91406 4.62695C9.94055 4.76237 9.96246 4.89953 9.97656 5.03906C9.97723 5.04606 9.97789 5.05209 9.97852 5.05859C9.98523 5.12799 9.9906 5.1973 9.99414 5.26758C9.99809 5.34498 10 5.42249 10 5.5C10 5.71478 9.98395 5.92616 9.95508 6.13281V6.13477V6.13672V6.13867V6.14062C9.95461 6.14363 9.95359 6.14639 9.95312 6.15039C9.92279 6.36147 9.87677 6.56714 9.81836 6.76758C9.64835 7.351 9.36553 7.88534 8.99219 8.34375C8.99163 8.33875 8.99084 8.33333 8.99023 8.32812C8.70745 8.67717 8.37367 8.98486 8 9.23633V9.24414C7.97846 9.25854 7.95539 9.27116 7.93359 9.28516C7.75744 9.39839 7.57283 9.49959 7.38086 9.58789C7.37056 9.59289 7.35995 9.59686 7.34961 9.60156C7.16401 9.68526 6.97347 9.75812 6.77539 9.81641C6.7677 9.81841 6.75966 9.82027 6.75195 9.82227C6.55703 9.87847 6.35728 9.92348 6.15234 9.95312C6.13738 9.95413 6.1224 9.95603 6.10742 9.95703C5.90877 9.98373 5.7061 10 5.5 10C5.2939 10 5.09123 9.98383 4.89258 9.95703C4.8776 9.95603 4.86262 9.95413 4.84766 9.95312C4.64272 9.92344 4.44297 9.87852 4.24805 9.82227C4.24023 9.82027 4.23242 9.81841 4.22461 9.81641C4.02653 9.75811 3.83599 9.68523 3.65039 9.60156C3.63996 9.59656 3.62954 9.59259 3.61914 9.58789C3.42717 9.49959 3.24256 9.39839 3.06641 9.28516C3.04461 9.27116 3.02154 9.25854 3 9.24414V9.23633C2.62633 8.98486 2.29253 8.67871 2.00977 8.32812C2.00916 8.33312 2.00836 8.33855 2.00781 8.34375C1.63447 7.88534 1.35165 7.351 1.18164 6.76758C1.12323 6.56714 1.07721 6.36147 1.04688 6.15039C1.04621 6.14439 1.04556 6.13871 1.04492 6.13281C1.01604 5.92626 1 5.71478 1 5.5C1 5.28389 1.01568 5.07114 1.04492 4.86328V4.85742C1.07531 4.64334 1.12237 4.43557 1.18164 4.23242C1.2421 4.02517 1.31803 3.82443 1.40625 3.63086C1.85492 2.6464 2.6464 1.85492 3.63086 1.40625C3.82443 1.31805 4.02518 1.2421 4.23242 1.18164C4.43557 1.12234 4.64334 1.07532 4.85742 1.04492C4.85933 1.04465 4.86137 1.04519 4.86328 1.04492C5.07114 1.01572 5.28389 1 5.5 1ZM5.5 3C5.43434 3 5.36932 3.01296 5.30866 3.03809C5.248 3.06321 5.19288 3.09999 5.14645 3.14642C5.10002 3.19285 5.06319 3.24799 5.03806 3.30865C5.01293 3.36932 5 3.43434 5 3.5C5 3.56566 5.01293 3.63068 5.03806 3.69135C5.06319 3.75201 5.10002 3.80715 5.14645 3.85358C5.19288 3.90001 5.248 3.93679 5.30866 3.96191C5.36932 3.98704 5.43434 4 5.5 4C5.56566 4 5.63068 3.98704 5.69134 3.96191C5.752 3.93679 5.80712 3.90001 5.85355 3.85358C5.89998 3.80715 5.93681 3.75201 5.96194 3.69135C5.98707 3.63068 6 3.56566 6 3.5C6 3.43434 5.98707 3.36932 5.96194 3.30865C5.93681 3.24799 5.89998 3.19285 5.85355 3.14642C5.80712 3.09999 5.752 3.06321 5.69134 3.03809C5.63068 3.01296 5.56566 3 5.5 3V3ZM5.5 5C5.36739 5 5.24021 5.05266 5.14645 5.14642C5.05268 5.24019 5 5.36739 5 5.5V7.5C5 7.63261 5.05268 7.75981 5.14645 7.85358C5.24021 7.94734 5.36739 8 5.5 8C5.63261 8 5.75979 7.94734 5.85355 7.85358C5.94732 7.75981 6 7.63261 6 7.5V5.5C6 5.36739 5.94732 5.24019 5.85355 5.14642C5.75979 5.05266 5.63261 5 5.5 5Z" fill="currentColor"/>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/icons/StatusWarningIcon.vue b/src/icons/StatusWarningIcon.vue
new file mode 100644
index 0000000..5efd1ee
--- /dev/null
+++ b/src/icons/StatusWarningIcon.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { t } from '@/composable/i18n';
+</script>
+
+<template>
+  <svg :aria-label="t('icons.warning')" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="icon">
+      <path opacity="0.2" d="M5.5 2C5.08018 2.00058 4.71443 2.27884 4.53571 2.61538L1.20829 8.4375C1 8.76923 1.00098 8.83806 1 9.07692C1 9.58673 1.43173 10 1.96429 10H9.03571C9.56827 10 10 9.58673 10 9.07692C9.99997 8.83447 10 8.76923 9.78657 8.42909L6.46429 2.61538C6.283 2.27524 5.92177 2.00003 5.5 2Z" fill="currentColor"/>
+      <path d="M5.49806 1C4.64262 1.00119 3.97797 1.54498 3.66017 2.13086L0.349621 7.92383C0.243976 8.09302 0.131858 8.28815 0.0664176 8.51172C-0.000574954 8.7406 -0.000102092 8.94786 1.13353e-05 9.05078V9.07227V9.07617C1.13353e-05 10.179 0.921618 11 1.96486 11H9.03517C10.0784 11 11 10.179 11 9.07617V9.05469C11.0004 8.94831 11.0019 8.73835 10.9317 8.50391C10.865 8.28093 10.75 8.08488 10.6445 7.91602L7.3379 2.13086C7.01861 1.54344 6.35974 1.00006 5.50001 1H5.49806ZM5.50001 2C5.92178 2.00003 6.28357 2.27508 6.46486 2.61523L9.78712 8.42969C10.0005 8.76977 9.99998 8.83382 10 9.07617C10 9.58597 9.56773 10 9.03517 10H1.96486C1.4323 10 1.00001 9.58598 1.00001 9.07617V9.07227C1.00096 8.83687 1.00197 8.76723 1.209 8.4375L4.53517 2.61523C4.71389 2.27868 5.08019 2.00059 5.50001 2ZM5.50001 4C5.22387 4 5.00001 4.22386 5.00001 4.5V6.5C5.00001 6.77614 5.22387 7 5.50001 7C5.77615 7 6.00001 6.77614 6.00001 6.5V4.5C6.00001 4.22386 5.77615 4 5.50001 4ZM5.47462 8C5.21044 8.01339 5.00001 8.23249 5.00001 8.5C5.00001 8.77614 5.22387 9 5.50001 9C5.77615 9 6.00001 8.77614 6.00001 8.5C6.00001 8.22386 5.77615 8 5.50001 8C5.49138 8 5.48314 7.99957 5.47462 8Z" fill="currentColor"/>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/locales/de.json b/src/locales/de.json
index cd26b2d..b3c7dc0 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -2,9 +2,6 @@
   "copyIcon": {
     "copyLink": "Link kopieren"
   },
-  "expiryIcon": {
-    "fileExpires": "Die Gültigkeit dieser Datei läuft ab"
-  },
   "expiryIndicator": {
     "second": "Abgelaufen | Läuft in {n} Sekunde ab | Läuft in {n} Sekunden ab",
     "minute": "Abgelaufen | Läuft in {n} Minute ab | Läuft in {n} Minuten ab",
@@ -19,7 +16,8 @@
     "critical": "Kritisch",
     "info": "Information",
     "success": "Erfolg",
-    "warning": "Warnung"
+    "warning": "Warnung",
+    "expires": "Die Gültigkeit dieser Datei läuft ab"
   },
   "syncCard": {
     "itemsSelected": "{count} ausgewählt",
diff --git a/src/locales/en.json b/src/locales/en.json
index 36a5c26..89f23f5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,9 +2,6 @@
   "copyIcon": {
     "copyLink": "Copy link"
   },
-  "expiryIcon": {
-    "fileExpires": "This File Expires"
-  },
   "expiryIndicator": {
     "second": "Expired | Expires in {n} second | Expires in {n} seconds",
     "minute": "Expired | Expires in {n} minute | Expires in {n} minutes",
@@ -19,7 +16,8 @@
     "critical": "Critical",
     "info": "Information",
     "success": "Success",
-    "warning": "Warning"
+    "warning": "Warning",
+    "expires": "This File Expires"
   },
   "syncCard": {
     "itemsSelected": "{count} Selected",
diff --git a/src/main.ts b/src/main.ts
index e038f58..797de17 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,12 @@
 import '@/assets/styles/main.css';
 
+// Badges
+import BaseBadge from "@/elements/BaseBadge.vue";
+import PrimaryBadge from "@/elements/PrimaryBadge.vue";
+import SecondaryBadge from "@/elements/SecondaryBadge.vue";
+import WarningBadge from "@/elements/WarningBadge.vue";
+import ExpiryBadge from "@/elements/ExpiryBadge.vue";
+
 // Buttons
 import BaseButton from "@/elements/BaseButton.vue";
 import PrimaryButton from "@/elements/PrimaryButton.vue";
@@ -14,19 +21,25 @@ import SyncCard from "@/elements/SyncCard.vue";
 import SwitchToggle from "@/elements/SwitchToggle.vue";
 
 // Misc
-import ExpiryIndicator from "@/elements/ExpiryIndicator.vue";
 import NoticeBar from "@/elements/NoticeBar.vue";
 import ToolTip from "@/elements/ToolTip.vue";
 
 // Icons
 import CopyIcon from "@/icons/CopyIcon.vue";
-import ExpiryIcon from "@/icons/ExpiryIcon.vue";
 import NoticeInfoIcon from "@/icons/NoticeInfoIcon.vue";
 import NoticeSuccessIcon from "@/icons/NoticeSuccessIcon.vue";
 import NoticeWarningIcon from "@/icons/NoticeWarningIcon.vue";
 import NoticeCriticalIcon from "@/icons/NoticeCriticalIcon.vue";
+import StatusInfoIcon from './icons/StatusInfoIcon.vue';
+import StatusWarningIcon from './icons/StatusWarningIcon.vue';
+import StatusExpiryIcon from './icons/StatusExpiryIcon.vue';
 
 export {
+  BaseBadge,
+  PrimaryBadge,
+  SecondaryBadge,
+  WarningBadge,
+  ExpiryBadge,
   BaseButton,
   PrimaryButton,
   SecondaryButton,
@@ -38,12 +51,13 @@ export {
   SwitchToggle,
   NoticeBar,
   ToolTip,
-  ExpiryIndicator,
   // Icons
   CopyIcon,
-  ExpiryIcon,
   NoticeInfoIcon,
   NoticeSuccessIcon,
   NoticeWarningIcon,
   NoticeCriticalIcon,
+  StatusInfoIcon,
+  StatusWarningIcon,
+  StatusExpiryIcon,
 };