diff --git a/website/docs/docs/introduction.md b/website/docs/docs/introduction.md
index 08564aeb2f0..f4fb6e64d53 100644
--- a/website/docs/docs/introduction.md
+++ b/website/docs/docs/introduction.md
@@ -5,7 +5,6 @@ pagination_next: null
 pagination_prev: null
 ---
 
-
 <Snippet path="what-is-dbt-intro" />
 
 dbt compiles and runs your analytics code against your data platform, enabling you and your team to collaborate on a single source of truth for metrics, insights, and business definitions. This single source of truth, combined with the ability to define tests for your data, reduces errors when logic changes, and alerts you when issues arise.
diff --git a/website/docs/docs/use-dbt-semantic-layer/dbt-sl.md b/website/docs/docs/use-dbt-semantic-layer/dbt-sl.md
index 116de767328..8ea9d51005c 100644
--- a/website/docs/docs/use-dbt-semantic-layer/dbt-sl.md
+++ b/website/docs/docs/use-dbt-semantic-layer/dbt-sl.md
@@ -15,7 +15,7 @@ import DeprecationNotice from '/snippets/_sl-deprecation-notice.md';
 
 <DeprecationNotice />
  
- </VersionBlock>
+</VersionBlock>
 
 The dbt Semantic Layer, powered by [MetricFlow](/docs/build/about-metricflow), simplifies the process of defining and using critical business metrics, like `revenue` in the modeling layer (your dbt project). By centralizing metric definitions, data teams can ensure consistent self-service access to these metrics in downstream data tools and applications. The dbt Semantic Layer eliminates duplicate coding by allowing data teams to define metrics on top of existing models and automatically handles data joins. 
 
diff --git a/website/src/components/lifeCycle/index.js b/website/src/components/lifeCycle/index.js
index ca08783a017..d4e4eab88d8 100644
--- a/website/src/components/lifeCycle/index.js
+++ b/website/src/components/lifeCycle/index.js
@@ -1,11 +1,44 @@
 import React from 'react'
 import styles from './styles.module.css';
 
+const statusColors = {
+  enterprise: '#EBEDF0',
+  team: '#EBEDF0',
+  developer: '#EBEDF0',
+  new: '#047377',
+  beta: '#047377',
+  ga: '#047377',
+  'public preview': '#047377',
+};
+
+const fontColors = {
+    enterprise: '#262A38',
+    team: '#262A38', 
+    developer: '#262A38', 
+    // lifecycle statuses use the css determined font color (white)
+  };
+
 export default function Lifecycle(props) {
-    if (!props.status) {
-        return null;
-    }
-    return (
-        <span className={styles.lifecycle}>{props.status}</span>
-    );
+  if (!props.status || (Array.isArray(props.status) && props.status.length === 0)) {
+    return null;
+  }
+  // Check if props.status is an array or a single value
+  const statuses = Array.isArray(props.status) ? props.status : [props.status];
+
+  return (
+    <>
+      {statuses.map((status, index) => {
+        const style = {
+          backgroundColor: props.backgroundColor || statusColors[status] || '#047377', // default to teal if no match
+          color: fontColors[status] || '#fff' // default font color if no matc
+        };
+
+        return (
+          <span key={index} className={`${styles.lifecycle} lifecycle-badge`} style={style}>
+            {status}
+          </span>
+        );
+      })}
+    </>
+  );
 }
diff --git a/website/src/components/lifeCycle/styles.module.css b/website/src/components/lifeCycle/styles.module.css
index ca145294127..d7c0661d932 100644
--- a/website/src/components/lifeCycle/styles.module.css
+++ b/website/src/components/lifeCycle/styles.module.css
@@ -1,13 +1,15 @@
 .lifecycle {
-    background-color: #047377; /* Teal background to align with dbt Labs' color */
-    color: #fff; /* Light text color for contrast */
-    font-size: 0.78rem; /* Using rem so font size is relative to root */
+    background-color: #047377; /* Default teal background */
+    color: #262A38; /* Light text color for contrast */
+    font-size: 0.8rem; /* Using rem so font size is relative to root */
+    font-weight: 600;  /* Normal font weight */
     padding: 1px 8px; /* Adjust padding for a more pill-like shape */
     border-radius: 16px; /* Larger border-radius for rounded edges */
     margin-left: 8px; /* Margin to separate from the header text */
     vertical-align: middle; /* Align with the title */
     display: inline-block; /* Use inline-block for better control */
-    font-weight: bold; /* Bold text */
     text-transform: capitalize; /* Uppercase text */
     line-height: 1.6; /* Adjust line height for vertical alignment */
 }
+
+
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 094c3501e06..2f938605c51 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -2086,6 +2086,10 @@ h2.anchor.clicked a.hash-link:before {
   color: #fff; /* Change color on hover if desired */
 }
 
+.table-of-contents .lifecycle-badge {
+  display: none;
+}
+
 @media (max-width: 996px) {
   .quickstart-container {
     flex-direction: column;
diff --git a/website/src/theme/DocItem/Layout/index.js b/website/src/theme/DocItem/Layout/index.js
index 8cc89af027b..b8318019378 100644
--- a/website/src/theme/DocItem/Layout/index.js
+++ b/website/src/theme/DocItem/Layout/index.js
@@ -46,6 +46,7 @@ function useDocTOC() {
   async function fetchElements() {
     // get html elements
     const headings = await getElements(".markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6")
+
     
     // if headings exist on page
     // compare against toc