diff --git a/src/stable/components/GovBanner/GovBanner.css b/src/stable/components/GovBanner/GovBanner.css
index ab128c7d..1a78f4c0 100644
--- a/src/stable/components/GovBanner/GovBanner.css
+++ b/src/stable/components/GovBanner/GovBanner.css
@@ -26,16 +26,16 @@
   flex-direction: column;
   align-items: center;
 }
-.city-name > span {
+.city-name span {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
 }
-.city-name > span:first-child {
+.city-name span:first-child {
   font-size: 0.75em;
   line-height: 1;
 }
-.city-name > span:last-child {
+.city-name span:last-child {
   font-size: 1em;
 }
 
@@ -70,12 +70,13 @@
   align-items: center;
   margin-left: 0.25em;
 }
-.official-text .know-text .chevron-container svg {
-  transition: transform 0.2s ease;
+
+.chevron-container svg {
+  transition: transform 0.3s ease-in-out;
   width: 12px;
   height: 12px;
 }
-.official-text .know-text .chevron-container svg[aria-expanded='true'] {
+.chevron-container svg.rotated {
   transform: rotate(180deg);
 }
 
@@ -83,6 +84,9 @@
   background-color: #f8f9fa;
   width: 100%;
   border-top: 1px solid #dee2e6;
+  overflow: hidden;
+  transition: height 0.3s ease-out;
+  height: 0;
 }
 
 .info-section {
diff --git a/src/stable/components/GovBanner/GovBanner.css.map b/src/stable/components/GovBanner/GovBanner.css.map
index 581d4705..f02f1c99 100644
--- a/src/stable/components/GovBanner/GovBanner.css.map
+++ b/src/stable/components/GovBanner/GovBanner.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["GovBanner.scss","../../../../node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAIA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;;AAOV;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;ACrEE;ED0EF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;;;AC1FA;EDgGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE","file":"GovBanner.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["GovBanner.scss","../../../../node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AA6LA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;ACjQE;EDsQF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;;;ACtRA;ED4RF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE","file":"GovBanner.css"}
\ No newline at end of file
diff --git a/src/stable/components/GovBanner/GovBanner.js b/src/stable/components/GovBanner/GovBanner.js
index c117e2ed..80c28707 100644
--- a/src/stable/components/GovBanner/GovBanner.js
+++ b/src/stable/components/GovBanner/GovBanner.js
@@ -1,3 +1,141 @@
+// import styles from '!!raw-loader!./GovBanner.css';
+
+// const template = document.createElement('template');
+// template.innerHTML = `
+//   <style>
+//     ${styles}
+//   </style>
+// <div class="banner-container">
+//   <header class="banner-header">
+//     <div class="title-section">
+//       <span class="city-name">
+//         <span>City of</span>
+//         <span>Detroit</span>
+//       </span>
+//       <div class="official-text">
+//         An official website of the City of Detroit.
+//         <button class="know-text" aria-expanded="false" aria-controls="content">
+//         Here's how you know
+//         <span class="chevron-container">
+//             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+//               <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
+//             </svg>
+//             </span>
+//           </button>
+//       </div>
+//     </div>
+//   </header>
+//   <div id="content" class="content-container" hidden>
+//     <div class="info-section" part="info-section">
+//       <div class="info-item">
+//         <div class="icon-circle">
+//           <span class="gov-icon">🏛️</span>
+//         </div>
+//         <div>
+//           <span class="info-title">Official websites use .gov</span>
+//           <p>A <b>.gov</b> website belongs to an official government organization in the United States.</p>
+//         </div>
+//       </div>
+//       <div class="info-item">
+//         <div class="icon-circle">
+//           <span class="lock-icon">🔒</span>
+//         </div>
+//         <div>
+//           <span class="info-title">Secure .gov websites use HTTPS</span>
+//           <p>A <b>lock</b> (🔒) or <b>https://</b> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
+//         </div>
+//       </div>
+//     </div>
+//   </div>
+// </div>
+// `;
+
+// class GovBanner extends HTMLElement {
+//   static get observedAttributes() {
+//     return ['expanded'];
+//   }
+
+//   constructor() {
+//     super();
+//     const shadow = this.attachShadow({ mode: 'open' });
+//     shadow.appendChild(template.content.cloneNode(true));
+//     this.expanded = false;
+//   }
+
+//   get expanded() {
+//     return this.hasAttribute('expanded');
+//   }
+
+//   set expanded(value) {
+//     const isExpanded = Boolean(value);
+//     if (isExpanded === this.expanded) {
+//       return;
+//     }
+
+//     if (isExpanded) {
+//       this.setAttribute('expanded', '');
+//     } else {
+//       this.removeAttribute('expanded');
+//     }
+
+//     this.dispatchEvent(
+//       new CustomEvent('expandedchange', {
+//         detail: { expanded: isExpanded },
+//         bubbles: true,
+//       }),
+//     );
+//   }
+
+//   connectedCallback() {
+//     this._setupListeners();
+//     this._updateExpandedState(this.expanded);
+//   }
+
+//   disconnectedCallback() {
+//     const toggleButton = this.shadowRoot.querySelector('.know-text');
+//     if (toggleButton) {
+//       toggleButton.removeEventListener('click', this._handleToggle.bind(this));
+//     }
+//   }
+
+//   attributeChangedCallback(name) {
+//     if (name === 'expanded') {
+//       this._updateExpandedState(this.hasAttribute('expanded'));
+//     }
+//   }
+
+//   _setupListeners() {
+//     const toggleButton = this.shadowRoot.querySelector('.know-text');
+//     if (toggleButton) {
+//       toggleButton.addEventListener('click', this._handleToggle.bind(this));
+//     }
+//   }
+
+//   _handleToggle() {
+//     this.expanded = !this.expanded;
+//   }
+
+//   _updateExpandedState(isExpanded) {
+//     const content = this.shadowRoot.querySelector('#content');
+//     const button = this.shadowRoot.querySelector('.know-text');
+//     const chevron = this.shadowRoot.querySelector('.chevron-container svg');
+
+//     if (content && button && chevron) {
+//       button.setAttribute('aria-expanded', isExpanded);
+//       content.hidden = !isExpanded;
+
+//       // Rotate the chevron when expanded
+//       if (isExpanded) {
+//         chevron.classList.add('rotated');
+//       } else {
+//         chevron.classList.remove('rotated');
+//       }
+//     }
+//   }
+// }
+
+// export { GovBanner as default };
+
 import styles from '!!raw-loader!./GovBanner.css';
 
 const template = document.createElement('template');
@@ -5,50 +143,50 @@ template.innerHTML = `
   <style>
     ${styles}
   </style>
-<div class="banner-container">
-  <header class="banner-header">
-    <div class="title-section">
-      <span class="city-name">
-        <span>City of</span>
-        <span>Detroit</span>
-      </span>
-      <div class="official-text">
-        An official website of the City of Detroit.
-        <button class="know-text" aria-expanded="false" aria-controls="content">
-        Here's how you know  
-        <span class="chevron-container">                
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
-              <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
-            </svg>
+
+  <div class="banner-container">
+    <header class="banner-header">
+      <div class="title-section">
+        <span class="city-name">
+          <span>City of</span>
+          <span>Detroit</span>
+        </span>
+        <div class="official-text">
+          An official website of the City of Detroit.
+          <button class="know-text" aria-expanded="false" aria-controls="content">
+            Here's how you know
+            <span class="chevron-container">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
+              </svg>
             </span>
-          </button>     
-      </div>
-    </div>
-  </header>
-  <div id="content" class="content-container" hidden>
-    <div class="info-section">
-      <div class="info-item">
-        <div class="icon-circle">
-          <span class="gov-icon">🏛️</span>
-        </div>
-        <div>
-          <span class="info-title">Official websites use .gov</span>
-          <p>A <b>.gov</b> website belongs to an official government organization in the United States.</p>
+          </button>
         </div>
       </div>
-      <div class="info-item">
-        <div class="icon-circle">
-          <span class="lock-icon">🔒</span>
+    </header>
+    <div id="content" class="content-container">
+      <div class="info-section" part="info-section">
+        <div class="info-item">
+          <div class="icon-circle">
+            <span class="gov-icon">🏛️</span>
+          </div>
+          <div>
+            <span class="info-title">Official websites use .gov</span>
+            <p>A <b>.gov</b> website belongs to an official government organization in the United States.</p>
+          </div>
         </div>
-        <div>
-          <span class="info-title">Secure .gov websites use HTTPS</span>
-          <p>A <b>lock</b> (🔒) or <b>https://</b> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
+        <div class="info-item">
+          <div class="icon-circle">
+            <span class="lock-icon">🔒</span>
+          </div>
+          <div>
+            <span class="info-title">Secure .gov websites use HTTPS</span>
+            <p>A <b>lock</b> (🔒) or <b>https://</b> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</div> 
-`;
+  </div>`;
 
 class GovBanner extends HTMLElement {
   static get observedAttributes() {
@@ -68,17 +206,14 @@ class GovBanner extends HTMLElement {
 
   set expanded(value) {
     const isExpanded = Boolean(value);
-
     if (isExpanded === this.expanded) {
       return;
     }
-
     if (isExpanded) {
       this.setAttribute('expanded', '');
     } else {
       this.removeAttribute('expanded');
     }
-
     this.dispatchEvent(
       new CustomEvent('expandedchange', {
         detail: { expanded: isExpanded },
@@ -93,8 +228,10 @@ class GovBanner extends HTMLElement {
   }
 
   disconnectedCallback() {
-    const toggle = this.shadowRoot.querySelector('.chevron-container');
-    toggle.removeEventListener('click', this._handleToggle);
+    const toggleButton = this.shadowRoot.querySelector('.know-text');
+    if (toggleButton) {
+      toggleButton.removeEventListener('click', this._handleToggle.bind(this));
+    }
   }
 
   attributeChangedCallback(name) {
@@ -109,6 +246,7 @@ class GovBanner extends HTMLElement {
       toggleButton.addEventListener('click', this._handleToggle.bind(this));
     }
   }
+
   _handleToggle() {
     this.expanded = !this.expanded;
   }
@@ -116,10 +254,26 @@ class GovBanner extends HTMLElement {
   _updateExpandedState(isExpanded) {
     const content = this.shadowRoot.querySelector('#content');
     const button = this.shadowRoot.querySelector('.know-text');
+    const chevron = this.shadowRoot.querySelector('.chevron-container svg');
+
+    if (!content || !button || !chevron) return;
+
+    button.setAttribute('aria-expanded', isExpanded);
+
+    if (isExpanded) {
+      // Get the actual height of the content
+      const contentHeight = content.scrollHeight;
+
+      // Set the height to that exact value for smooth animation
+      content.style.height = contentHeight + 'px';
+      chevron.classList.add('rotated');
+    } else {
+      // Force a repaint to ensure the animation works
+      content.offsetHeight;
 
-    if (content && button) {
-      button.setAttribute('aria-expanded', isExpanded);
-      content.hidden = !isExpanded;
+      // Set height to 0 to animate the closing
+      content.style.height = '0';
+      chevron.classList.remove('rotated');
     }
   }
 }
diff --git a/src/stable/components/GovBanner/GovBanner.scss b/src/stable/components/GovBanner/GovBanner.scss
index 77bf97fb..b65f3667 100644
--- a/src/stable/components/GovBanner/GovBanner.scss
+++ b/src/stable/components/GovBanner/GovBanner.scss
@@ -1,3 +1,188 @@
+// @import 'bootstrap/scss/functions';
+// @import 'bootstrap/scss/variables';
+// @import 'bootstrap/scss/mixins';
+
+// .banner-container {
+//   width: 100%;
+//   background-color: #004445;
+//   color: white;
+// }
+
+// .banner-header {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   padding: 0.5rem 1rem;
+//   max-width: 1200px;
+//   margin: 0 auto;
+// }
+
+// .title-section {
+//   display: flex;
+//   align-items: center;
+//   gap: 1rem;
+// }
+
+// .city-name {
+//   font-weight: bold;
+//   text-transform: uppercase;
+//   display: inline-flex;
+//   flex-direction: column;
+//   align-items: center;
+//   > span {
+//     display: inline-flex;
+//     flex-direction: column;
+//     align-items: center;
+//     &:first-child {
+//       font-size: 0.75rem;
+//       line-height: 1;
+//     }
+//     &:last-child {
+//       font-size: 1rem;
+//     }
+//   }
+// }
+
+// .official-text {
+//   display: flex;
+//   align-items: center;
+//   gap: 0.25rem;
+//   font-size: 0.875rem;
+//   .know-text {
+//     display: inline-flex;
+//     align-items: center;
+//     text-decoration: underline;
+//     cursor: pointer;
+//     margin-left: 0.25rem;
+//     background-color: transparent;
+//     border: none;
+//     color: inherit;
+//     padding: 0;
+//     font-size: inherit;
+//     &:focus {
+//       outline: none;
+//       text-decoration-thickness: from-font;
+//       text-decoration-color: #f8d568;
+//     }
+//     &:hover {
+//       text-decoration-color: #f8d568;
+//     }
+//     .chevron-container {
+//       display: inline-flex;
+//       align-items: center;
+//       margin-left: 0.25rem;
+//       svg {
+//         transition: transform 0.3s ease-in-out;
+//         width: 12px;
+//         height: 12px;
+//         &.rotated {
+//           transform: rotate(180deg);
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .content-container {
+//   background-color: #f8f9fa;
+//   width: 100%;
+//   border-top: 1px solid #dee2e6;
+//   max-height: 0;
+//   overflow: hidden;
+//   transition: max-height 0.3s ease-in-out;
+
+//   &:not([hidden]) {
+//     max-height: 500px; /* Adjust as needed based on content height */
+//   }
+// }
+
+// .info-section {
+//   display: flex;
+//   justify-content: space-between;
+//   max-width: 1200px;
+//   margin: 0 auto;
+//   padding: 1.5rem 1rem;
+//   gap: 2rem;
+// }
+
+// .info-item {
+//   display: flex;
+//   gap: 1rem;
+//   align-items: flex-start;
+//   flex: 1;
+//   .info-title {
+//     margin: 0 0 0.5rem 0;
+//     font-size: 1rem;
+//     font-weight: 600;
+//     color: #212529;
+//   }
+//   p {
+//     margin: 0;
+//     line-height: 1.5;
+//     color: #495057;
+//     font-size: 0.875rem;
+//   }
+// }
+
+// .icon-circle {
+//   width: 48px;
+//   height: 48px;
+//   border-radius: 50%;
+//   border: 2px solid #dee2e6;
+//   background-color: white;
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   flex-shrink: 0;
+// }
+
+// .gov-icon,
+// .lock-icon {
+//   font-size: 1.5rem;
+//   color: #004445;
+// }
+
+// // Tablet and Mobile shared styles
+// @include media-breakpoint-down(lg) {
+//   .official-text {
+//     display: flex;
+//     flex-direction: column;
+//     min-width: 0;
+//     gap: 0.0625rem;
+//   }
+//   .know-text {
+//     display: flex;
+//     justify-content: center;
+//     margin-top: 0.0625rem;
+//     width: 100%;
+//   }
+//   .city-name {
+//     margin-top: 0.25rem;
+//     flex-shrink: 0;
+//   }
+// }
+
+// // Mobile-specific overrides
+// @include media-breakpoint-down(sm) {
+//   .banner-header {
+//     justify-content: flex-start;
+//     padding-top: 0.75rem;
+//     padding-bottom: 0.75rem;
+//   }
+//   .official-text {
+//     align-items: flex-start;
+//     text-align: center;
+//     word-wrap: break-word;
+//   }
+//   .info-section {
+//     flex-direction: column;
+//     padding: 1rem;
+//     gap: 1.5rem;
+//   }
+//   .info-item {
+//     width: 100%;
+//   }
+// }
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
@@ -30,7 +215,7 @@
   flex-direction: column;
   align-items: center;
 
-  > span {
+  span {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
@@ -78,17 +263,17 @@
       display: inline-flex;
       align-items: center;
       margin-left: 0.25rem;
+    }
+  }
+}
 
-      svg {
-        transition: transform 0.2s ease;
-        width: 12px;
-        height: 12px;
+.chevron-container svg {
+  transition: transform 0.3s ease-in-out;
+  width: 12px;
+  height: 12px;
 
-        &[aria-expanded='true'] {
-          transform: rotate(180deg);
-        }
-      }
-    }
+  &.rotated {
+    transform: rotate(180deg);
   }
 }
 
@@ -96,6 +281,9 @@
   background-color: #f8f9fa;
   width: 100%;
   border-top: 1px solid #dee2e6;
+  overflow: hidden;
+  transition: height 0.3s ease-out;
+  height: 0;
 }
 
 .info-section {
diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js
index 984309ab..410c688c 100644
--- a/src/stable/stories/govbanner.stories.js
+++ b/src/stable/stories/govbanner.stories.js
@@ -24,8 +24,21 @@ export const Test = {
     const checkExpandedState = (isExpanded) => {
       const content = shadow.querySelector('#content');
       const button = shadow.querySelector('.know-text');
-      expect(content.hidden).toBe(!isExpanded);
+      const chevron = shadow.querySelector('.chevron-container svg');
+
+      // Check if inline style.height is set correctly
+      const contentHeight = parseFloat(content.style.height);
+      if (isExpanded) {
+        expect(parseInt(contentHeight)).toBeGreaterThan(0);
+      } else {
+        expect(contentHeight).toBe(0);
+      }
+
+      // aria-expanded should be on the button only
       expect(button.getAttribute('aria-expanded')).toBe(isExpanded.toString());
+
+      // Check if chevron has the 'rotated' class
+      expect(chevron.classList.contains('rotated')).toBe(isExpanded);
     };
 
     // Test initial state