diff --git a/index.html b/index.html
index 9334998..eb5ed36 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,7 @@
     <title>Container React Test</title>
   </head>
   <body>
-    <div id="root" class="container"></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
-    <script type="text/javascript" src="/src/assets/banner.js"></script>
   </body>
 </html>
diff --git a/src/About.jsx b/src/About.jsx
index 227370e..075b0b8 100644
--- a/src/About.jsx
+++ b/src/About.jsx
@@ -2,11 +2,15 @@ function About() {
 
   return (
     <>
-      <div>
-        <h1>About</h1>
-        <div className="card">
-          <div className="card-body">
-            <p>Welcome to the about page...</p>
+      <div className="container">
+        <div className="row">
+          <div className="col-12">
+            <h1>About</h1>
+            <div className="card">
+              <div className="card-body">
+                <p>Welcome to the about page...</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/App.jsx b/src/App.jsx
index 59d80ff..f93999f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import About from './About'
 import Contact from './Contact'
 import Footer from './Footer'
 import UConnHeader from './UConnHeader';
+import UConnFooter from './UConnFooter';
 
 function App() {
 
@@ -19,6 +20,7 @@ function App() {
         <Route path='/contact' element={<Contact/>} />
       </Routes>
        <Footer />
+       <UConnFooter />
     </>
   )
 }
diff --git a/src/Contact.jsx b/src/Contact.jsx
index 5214b0b..b9b0997 100644
--- a/src/Contact.jsx
+++ b/src/Contact.jsx
@@ -2,11 +2,15 @@ function Contact() {
 
   return (
     <>
-      <div>
-        <h1>Contact</h1>
-        <div className="card">
-          <div className="card-body">
-            <p>Contact us...</p>
+      <div className="container">
+        <div className="row">
+          <div className="col-12">
+            <h1>Contact</h1>
+            <div className="card">
+              <div className="card-body">
+                <p>Contact us...</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/Footer.jsx b/src/Footer.jsx
index 3a696d4..d335c67 100644
--- a/src/Footer.jsx
+++ b/src/Footer.jsx
@@ -2,11 +2,17 @@ function Footer() {
 
   return (
     <>
-      <div className="py-5">
-        <p className="text-center w-100 d-block my-4">&copy; 2024 Anyone</p>
-      </div>
+      <footer className="site-footer">
+        <div className="container py-5">
+          <div className="row">
+            <div className="col-12">
+              <h5 className="text-center">Site Footer...</h5>
+            </div>
+          </div>
+        </div>
+      </footer>
     </>
-  )
+  );
 }
 
 export default Footer
diff --git a/src/UConnFooter.jsx b/src/UConnFooter.jsx
new file mode 100644
index 0000000..778a9fd
--- /dev/null
+++ b/src/UConnFooter.jsx
@@ -0,0 +1,30 @@
+import './UConnFooter.scss';
+
+function UConnFooter() {
+
+  return (
+    <>
+      <div id="footers">
+        <footer id="footer" className="site-footer" role="contentinfo">
+          <div className="container">
+            <ul id="uc-footer-links" className="clearfix">
+              <li>
+                <span>&copy;</span> <a href="http://uconn.edu">University of Connecticut</a>
+              </li>
+              <li>
+                <a href="http://uconn.edu/disclaimers-privacy-copyright/">
+                  Disclaimers, Privacy &amp; Copyright
+                </a>
+              </li>
+              <li>
+                <a href="https://accessibility.uconn.edu/">Accessibility</a>
+              </li>
+            </ul>
+          </div>
+        </footer>
+      </div>
+    </>
+  );
+}
+
+export default UConnFooter
diff --git a/src/UConnFooter.scss b/src/UConnFooter.scss
new file mode 100644
index 0000000..8e24d94
--- /dev/null
+++ b/src/UConnFooter.scss
@@ -0,0 +1,37 @@
+#footers {
+    background-color: #010d2f;
+    margin: 0 !important;
+    border-top: none !important;
+    a, p, span {
+        color: #FFF;
+    }
+    border-bottom: 5px solid #053c7f;
+    padding: 60px 0px;
+}
+
+#footers #footer {
+    color: #111;
+    padding: 0px;
+  }
+  #footers #footer ul {
+    text-align: center;
+    margin-bottom: 0px;
+  }
+  #footers #footer ul li {
+    padding-left: 1.5em;
+    display: inline-block;
+    margin-bottom: 0px;
+  }
+  @media (max-width: 780px) {
+    #footers #footer ul li {
+      display: inline-block;
+      margin-bottom: 10px;
+      padding-left: 0px;
+    }
+  }
+  #footers #footer ul li a {
+    padding: 0px;
+  }
+  #footers #footer ul li a:active, #footers #footer ul li a:hover, #footers #footer ul li a:focus {
+    color: #ddd;
+  }
\ No newline at end of file
diff --git a/src/UConnHeader.jsx b/src/UConnHeader.jsx
index f60d5ae..aef5e8f 100644
--- a/src/UConnHeader.jsx
+++ b/src/UConnHeader.jsx
@@ -1,10 +1,133 @@
 import './UConnHeader.scss';
+import React, { useState, useEffect } from 'react';
+
+const UConnBanner = () => {
+  const [isBannerOpen, setIsBannerOpen] = useState(false);
+  const [buttons, setButtons] = useState([]);
+  const mobileMenuId = document.getElementById('banner-mobile-button')?.getAttribute('aria-controls');
+  const mobileMenu = mobileMenuId ? document.getElementById(mobileMenuId) : null;
+
+  useEffect(() => {
+    const banner = document.querySelector('#uconn-banner');
+    const buttonContainer = document.querySelector('#button-container');
+    const bannerButtons = document.querySelectorAll('#button-container button[aria-controls]');
+    const buttonsArray = Array.prototype.slice.call(bannerButtons, 0);
+    setButtons(buttonsArray);
+
+    banner.classList.remove('no-js');
+
+    const clickHandler = (evt) => {
+      if (evt.target.localName !== 'button') return;
+      toggleButtons(evt, buttonsArray);
+      document.addEventListener('click', closeHandler);
+      document.addEventListener('keydown', closeHandler);
+    };
+
+    const closeHandler = (evt) => {
+      const buttonContainerEvent = buttonContainer.contains(evt.target);
+      const mobileMenuEvent = mobileMenu && mobileMenu.contains(evt.target);
+      const isIgnorableEvent = evt.type === 'click' || evt.type === 'keydown';
+
+      if (evt.which === 27) {
+        escapeKeyPressedToClose(evt, buttonsArray);
+      }
+
+      if (!isIgnorableEvent || (!buttonContainerEvent && !mobileMenuEvent)) {
+        clickToClose(buttonsArray);
+      }
+
+      document.removeEventListener('click', closeHandler);
+      document.removeEventListener('keydown', closeHandler);
+    };
+
+    const toggleButtons = (evt, buttons) => {
+      buttons.forEach((button) => {
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+        if (button === evt.target && !button.nextElementSibling) {
+          toggleMenu(button);
+        } else if (button !== evt.target && !button.nextElementSibling) {
+          closeMenu(button);
+        } else if (button === evt.target && button.nextElementSibling && isExpanded) {
+          collapse(button);
+          removeClass(button.nextElementSibling);
+        } else if (button === evt.target && button.nextElementSibling) {
+          expand(button);
+          addClass(button.nextElementSibling);
+        } else if (button !== evt.target && button.nextElementSibling) {
+          collapse(button);
+          removeClass(button.nextElementSibling);
+        }
+      });
+    };
+
+    const escapeKeyPressedToClose = (evt, buttons) => {
+      buttons.forEach((button) => {
+        if (evt.target === document.querySelector('body') && !button.nextElementSibling) {
+          closeMenu(button);
+        } else if (evt.target === document.querySelector('body') && button.nextElementSibling) {
+          collapse(button);
+          removeClass(button.nextElementSibling);
+        }
+      });
+    };
+
+    const clickToClose = (buttons) => {
+      buttons.forEach((button) => {
+        if (!button.nextElementSibling) {
+          closeMenu(button);
+        } else {
+          collapse(button);
+          removeClass(button.nextElementSibling);
+        }
+      });
+    };
+
+    const toggleMenu = (button) => {
+      const toggleText = document.querySelector('#menu-toggle-text');
+      const isExpanded = button.getAttribute('aria-expanded') === 'true';
+      setIsBannerOpen(!isExpanded);
+
+      if (!isExpanded) {
+        expand(button);
+        toggleText.textContent = 'close';
+      } else {
+        collapse(button);
+        toggleText.textContent = 'open';
+      }
+    };
+
+    const closeMenu = (button) => {
+      collapse(button);
+      setIsBannerOpen(false);
+    };
+
+    const addClass = (el) => {
+      el.classList.add('banner-popup-active');
+    };
+
+    const removeClass = (el) => {
+      el.classList.remove('banner-popup-active');
+    };
+
+    const expand = (el) => {
+      el.setAttribute('aria-expanded', 'true');
+    };
+
+    const collapse = (el) => {
+      el.setAttribute('aria-expanded', 'false');
+    };
+
+    buttonContainer.addEventListener('click', clickHandler);
+
+    return () => {
+      buttonContainer.removeEventListener('click', clickHandler);
+    };
+  }, []);
 
-function UConnHeader(){
-  
   return (
     <div id="uc-header">
-      <div id="uconn-banner" className="alternative">
+      <div id="uconn-banner" className={isBannerOpen ? 'alternative' : 'alternative no-js'}>
         <div id="uconn-header-container" className="blue">
           <div className="row-container">
             <div className="row-fluid">
@@ -31,7 +154,7 @@ function UConnHeader(){
                   </a>
                   <div id="uconn-search-tooltip" style={{ zIndex: '99999 !important' }}></div>
                 </div>
-                <div className="icon-container" id="icon-container-az">
+                <div className="icon-container" id="icon-container-az" style={{ zIndex: '99999 !important' }}>
                   <button className="btn btn-popup-control" id="uconn-az" href="https://uconn.edu/az" aria-haspopup="true" aria-controls="a-z-popup" aria-expanded="false">
                     <span className="no-css">A to Z Index</span>
                     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 32 32" aria-hidden="true" className="banner-icon">
@@ -58,8 +181,8 @@ function UConnHeader(){
         </div>
       </div>
     </div>
-    
   );
-}
+};
+
+export default UConnBanner;
 
-export default UConnHeader
diff --git a/src/UConnHeader.scss b/src/UConnHeader.scss
index d641f48..c476ba5 100644
--- a/src/UConnHeader.scss
+++ b/src/UConnHeader.scss
@@ -1,3 +1,8 @@
+#uc-header {
+    position: relative;
+    z-index: 99999 !important;
+}
+
 #wordmark,
 #university-of-connecticut,
 #super-title {
diff --git a/src/assets/banner.js b/src/assets/banner.js
deleted file mode 100644
index 102e768..0000000
--- a/src/assets/banner.js
+++ /dev/null
@@ -1,134 +0,0 @@
-(function() {
-    
-    var banner = document.querySelector('#uconn-banner')
-    var buttonContainer = document.querySelector('#button-container')
-    var bannerButtons = document.querySelectorAll('#button-container button[aria-controls]')
-    var buttons = Array.prototype.slice.call(bannerButtons, 0)
-    var mobileToggle = document.getElementById('banner-mobile-button')
-    
-    if(mobileToggle != null){
-      var mobileMenuId = mobileToggle.getAttribute('aria-controls')
-    }
-    if(mobileMenuId != null){
-        var mobileMenu = document.getElementById(mobileMenuId)
-    }
-  
-    var ucBannerMenuStateEvent = new CustomEvent('ucBannerMenuState', {
-      detail: { isOpen: false },
-      bubbles: true
-    })
-  
-    banner.classList.remove('no-js')
-  
-    buttonContainer.addEventListener('click', clickHandler)
-    
-    function clickHandler(evt) {
-      if (evt.target.localName !== 'button') return
-  
-      toggleButtons(evt, buttons)
-  
-      document.addEventListener('click', closeHandler)
-      document.addEventListener('keydown', closeHandler)
-    }
-  
-    function closeHandler(evt) {
-      var buttonContainerEvent = buttonContainer.contains(evt.target)
-      var mobileMenuEvent =  mobileMenu != null && mobileMenu.contains(evt.target)
-      var isIgnorableEvent = evt.type === 'click' || evt.type === 'keydown' ? true : false
-  
-      if (evt.which === 27) {
-        escapeKeyPressedToClose(evt, buttons)
-      }
-  
-      if (isIgnorableEvent && (buttonContainerEvent || mobileMenuEvent)) {
-        return
-      } else {
-        clickToClose(buttons)
-      }
-  
-      document.removeEventListener('click', closeHandler)
-      document.removeEventListener('keydown', closeHandler)
-    }
-  
-    function toggleButtons(evt, buttons) {
-      buttons.forEach(function (button) {
-  
-        var isExpanded = button.getAttribute('aria-expanded') === 'true' ? true : false
-  
-        if (button === evt.target && button.nextElementSibling === null) {
-          toggleMenu(button)
-        } else if (button !== evt.target && button.nextElementSibling === null) {
-          closeMenu(button)
-        } else if (button === evt.target && button.nextElementSibling && isExpanded) {
-          collapse(button)
-          removeClass(button.nextElementSibling)
-        } else if (button === evt.target && button.nextElementSibling) {
-          expand(button)
-          addClass(button.nextElementSibling)
-        } else if (button !== evt.target && button.nextElementSibling) {
-          collapse(button)
-          removeClass(button.nextElementSibling)
-        }
-      })
-    }
-  
-    function escapeKeyPressedToClose(evt, buttons) {
-      buttons.forEach(function(button) {
-        if (evt.target === document.querySelector('body') && button.nextElementSibling === null) {
-          closeMenu(button)
-        } else if (evt.target === document.querySelector('body') && button.nextElementSibling) {
-          collapse(button)
-          removeClass(button.nextElementSibling)
-        }
-      })
-    }
-  
-    function clickToClose(buttons) {
-      buttons.forEach(function (button) {
-        if (button.nextElementSibling === null) {
-          closeMenu(button)
-        } else {
-          collapse(button)
-          removeClass(button.nextElementSibling)
-        }
-      })
-    }
-  
-    function toggleMenu(button) {
-      var toggleText = document.querySelector('#menu-toggle-text')
-      var isExpanded = button.getAttribute('aria-expanded') === 'true' ? true : false
-      ucBannerMenuStateEvent.detail.isOpen = !isExpanded
-      button.dispatchEvent(ucBannerMenuStateEvent)
-      if (!isExpanded) {
-        expand(button)
-        toggleText.textContent = 'close'
-      } else {
-        collapse(button)
-        toggleText.textContent = 'open'
-      }
-      return true
-    }
-  
-    function closeMenu(button) {
-      collapse(button)
-      ucBannerMenuStateEvent.detail.isOpen = false
-      button.dispatchEvent(ucBannerMenuStateEvent)
-      return true
-    }
-  
-    function addClass(el) {
-      el.classList.add('banner-popup-active')
-    }
-  
-    function removeClass(el) {
-      el.classList.remove('banner-popup-active')
-    }
-  
-    function expand(el) {
-      el.setAttribute('aria-expanded', 'true')
-    }
-  
-    function collapse(el) {
-      el.setAttribute('aria-expanded', 'false')
-    }
-  })()
\ No newline at end of file
diff --git a/src/assets/fonts/proximanova-bold-webfont.woff.1 b/src/assets/fonts/proximanova-bold-webfont.woff.1
deleted file mode 100644
index b412f9c..0000000
Binary files a/src/assets/fonts/proximanova-bold-webfont.woff.1 and /dev/null differ
