diff --git a/app/src/View/AppView.php b/app/src/View/AppView.php
index 1daf083e1..12eea33e9 100644
--- a/app/src/View/AppView.php
+++ b/app/src/View/AppView.php
@@ -41,5 +41,7 @@ class AppView extends View {
   public function initialize(): void {
     parent::initialize();
     $this->loadHelper('Field');
+    $this->loadHelper('Menu');
+    $this->loadHelper('Badge');
   }
 }
diff --git a/app/src/View/Helper/BadgeHelper.php b/app/src/View/Helper/BadgeHelper.php
new file mode 100644
index 000000000..1b1550d9f
--- /dev/null
+++ b/app/src/View/Helper/BadgeHelper.php
@@ -0,0 +1,140 @@
+<?php
+/**
+ * COmanage Match Badge Helper
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @link          http://www.internet2.edu/comanage COmanage Project
+ * @package       match
+ * @since         COmanage Match v1.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+declare(strict_types = 1);
+
+namespace App\View\Helper;
+use \Cake\View\Helper;
+
+class BadgeHelper extends Helper {
+
+  public $helpers = ['Html'];
+
+  /**
+   * Helper which will produce Bootstrap based Badge
+   * Bootstrap v5 uses different notation, e.g. bg-success instead of badge success. So, keep everything in one place
+   * to facilitate an upgrade process
+   *
+   * @param string $title          The title of the badge
+   * @param string $type           Define the type of Badge. The value should be one of
+   *                                  [primary,secondary,success,danger,warning,info,light,dark]
+   *                                  Defaults to light
+   * @param boolean $badge_pill    Is this a badge-pill. Defaults to false
+   * @param boolean $badge_outline Is this an outlined badge. Defaults to false
+   * @param array $class_list      List of extra classes
+   * @param string|null $fa_class  Fonts Awesome Icon we will prepend to the badge text
+   * @return mixed
+   * @since  COmanage Match v1.0.0
+   */
+  public function badgeIt(
+    string $title,
+    string $type = 'secondary',
+    bool $badge_pill = false,
+    bool $badge_outline = false,
+    array $class_list = [],
+    string $fa_class = null
+  ) {
+
+    $badge_classes = [];
+
+    if($badge_pill) {
+      $badge_classes[] = "badge-pill";
+    }
+    if($badge_outline) {
+      $badge_classes[] = "badge-outline-" . $type;
+    } else {
+      $badge_classes[] = "badge-" . $type;
+    }
+
+    if(!empty($class_list)) {
+      $badge_classes[] = implode(' ', $class_list);
+    }
+
+    if(!empty($fa_class)) {
+      $fa_element = '<i class="mr-1 fa ' . $fa_class .'"></i>';
+    }
+
+    return $this->Html->tag(
+      'span',
+      $fa_element . $title,
+      [
+        'class' => 'mr-1 badge ' . implode(' ', $badge_classes),
+        'escape' => false,
+      ]
+    );
+  }
+
+  /**
+   * Get the Badge type ordering
+   *
+   * @param string $type
+   * @return int|null
+   *
+   * @since  COmanage Match v1.0.0
+   */
+  public function getBadgeOrder(string $type): ?int
+  {
+    if(empty($type)) {
+      return null;
+    }
+
+    $order = [
+      'Status'      => 1,
+      'Other'       => 3
+    ];
+
+    return $order[$type];
+  }
+
+  /**
+   * Get the Badge Color
+   *
+   * @param string $color
+   * @return string|null
+   *
+   * @since  COmanage Match v1.0.0
+   */
+  public function getBadgeColor(string $color): ?string {
+    if(empty($color)) {
+      return null;
+    }
+
+    $color_map = [
+      'Success'   => 'success',
+      'Danger'    => 'danger',
+      'Warning'   => 'warning',
+      'Primary'   => 'primary',
+      'Secondary' => 'secondary',
+      'Light'     => 'light',
+      'Info'      => 'info',
+      'Dark'      => 'dark',
+    ];
+
+    return $color_map[$color];
+  }
+
+}
\ No newline at end of file
diff --git a/app/templates/element/badgeList.php b/app/templates/element/badgeList.php
new file mode 100644
index 000000000..b250943f4
--- /dev/null
+++ b/app/templates/element/badgeList.php
@@ -0,0 +1,74 @@
+<?php
+/*
+ * COmanage Match Badge List
+ *
+ * Portions licensed to the University Corporation for Advanced Internet
+ * Development, Inc. ("UCAID") under one or more contributor license agreements.
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * UCAID licenses this file to you under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with the
+ * License. You may obtain a copy of the License at:
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * List of Badge configuration
+ * $vv_badge_list = array(
+ *   array(
+ *    'order' => BadgeOrderEnum::Status,
+ *    'text' => "mytext",
+ *    'color' => BadgeColorModeEnum::Blue,
+ *    'outline' => false,
+ *    'pill' => true,
+ *    'fa_class' => 'fa-key',
+ *   ),
+ * );
+ *
+ *
+ * @link          http://www.internet2.edu/comanage COmanage Project
+ * @package       match
+ * @since         COmanage Match v1.0.0
+ * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+?>
+
+<?php
+// Sort the Badges
+usort($vv_badge_list, function ($item1, $item2) {
+  if ($item1['order'] == $item2['order']) return 0;
+  return $item1['order'] < $item2['order'] ? -1 : 1;
+});
+
+foreach($vv_badge_list as $badge) {
+  $badge_classes = [];
+  $fa_element = "";
+
+  if(isset($badge['pill']) && $badge['pill']) {
+    $badge_classes[] = "badge-pill";
+  }
+  if(!empty($badge['fa_class'])) {
+    $fa_element = '<i class="mr-1 fa ' . $badge["fa_class"] .'"></i>';
+  }
+  if(isset($badge['outline']) && $badge['outline']) {
+    $badge_classes[] = "badge-outline-" . $badge['color'];
+  } else {
+    $badge_classes[] = "badge-" . $badge['color'];
+  }
+
+  // Print the Badge
+  print $this->Html->tag(
+    'span',
+    $fa_element . $badge['text'],
+    [
+      'class' => 'mr-1 badge ' . implode(' ', $badge_classes),
+      'escape' => false,
+    ]
+  );
+}
\ No newline at end of file
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
index 6d2798c49..ec747fcc2 100644
--- a/app/webroot/css/co-base.css
+++ b/app/webroot/css/co-base.css
@@ -1311,6 +1311,62 @@ td.indented {
   vertical-align: text-bottom;
   margin-right: 0.25em;
 }
+/*Bootstrap badge*/
+.badge {
+  font-size: 0.95em;
+  font-weight: normal;
+  height: min-content;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.badge-secondary,
+.badge-success,
+.badge-danger,
+.badge-warning,
+.badge-info,
+.badge-light,
+.badge-dark,
+.badge-primary {
+  border: 1px solid transparent;
+}
+.badge-warning {
+  background-color: var(--cmg-color-yellow-002);
+}
+.badge-primary {
+  background-color: var(--cmg-color-blue-003);
+}
+.badge-secondary {
+  background-color: var(--cmg-color-gray-002);
+}
+/* Bootstrap badge-outline */
+.badge-outline-primary {
+  color: var(--cmg-color-blue-003);
+  border: 1px solid var(--cmg-color-blue-003);
+}
+.badge-outline-info {
+  color: var(--cmg-color-blue-006);
+  border: 1px solid var(--cmg-color-blue-006);
+}
+.badge-outline-danger {
+  color: var(--cmg-color-red-005);;
+  border: 1px solid var(--cmg-color-red-005);;
+}
+.badge-outline-success {
+  color: var(--cmg-color-green-007);
+  border: 1px solid var(--cmg-color-green-007);
+}
+.badge-outline-warning {
+  color: var(--cmg-color-yellow-002);
+  border: 1px solid var(--cmg-color-yellow-002);
+}
+.badge-outline-light {
+  color: var(--cmg-color-gray-004);
+  border: 1px solid var(--cmg-color-gray-004);
+}
+.badge-outline-secondary {
+  color: var(--cmg-color-gray-002);
+  border: 1px solid var(--cmg-color-gray-002);
+}
 /* FOOTER */
 footer {
   text-align: center;
diff --git a/app/webroot/css/co-color.css b/app/webroot/css/co-color.css
index 9dc47cf1c..b5243f0a6 100644
--- a/app/webroot/css/co-color.css
+++ b/app/webroot/css/co-color.css
@@ -35,10 +35,12 @@
   --cmg-color-blue-003: #0c75c0;     /* submit buttons, .btn-primary */
   --cmg-color-blue-004: #9fc6e2;     /* spinner  */
   --cmg-color-blue-005: #53B1F4;     /* link focus borders for keyboard nav */
-  
+  --cmg-color-blue-006: #17a2b8;     /* info bagde */
+
   --cmg-color-gray-001: #222;        /* body text */
   --cmg-color-gray-002: #555;        /* headings text */
   --cmg-color-gray-003: #666;        /* disabled text or form fields */
+  --cmg-color-gray-004: #212529;     /* badge light */
 
   --cmg-color-lightgray-001: #fafafa; /* background color, drawer */
   --cmg-color-lightgray-002: #f8f8f8; /* background color */
@@ -57,7 +59,8 @@
   --cmg-color-green-004: #282;       /* pagination */
   --cmg-color-green-005: #030;       /* pagination border color */
   --cmg-color-green-006: #040;       /* pagination button color */
-  
+  --cmg-color-green-007: #28a745;    /* success badge */
+
   --cmg-color-yellow-001: #f5f5bb;    /* yellow warning */
   --cmg-color-yellow-002: #fbec88;    /* infobox informational area */
   --cmg-color-yellow-003: #ffd;       /* forms: focused input */
@@ -66,6 +69,7 @@
   --cmg-color-red-002: #c00;          /* forms: error icons */
   --cmg-color-red-003: #e33;          /* title for deleted/archived */
   --cmg-color-red-004: #c33;          /* button */
+  --cmg-color-red-005: #dc3545;       /* danger badge */
 
   --cmg-color-white: #fff;            /* white */
   --cmg-color-black: #000;            /* black */