diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 823def224..80ddd0a6c 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,3 +1,9 @@
+## July 31, 2024
+
+- **Feature** New footer (public and admin) [🎟️ DESENG-662](https://citz-gdx.atlassian.net/browse/DESENG-662)
+  - Implemented new footer design for desktop and mobile viewports.
+  - Addressed some issues with z-index between footer and side nav.
+
 ## July 30, 2024
 
 - **Feature** New admin header [🎟️ DESENG-660](https://citz-gdx.atlassian.net/browse/DESENG-660)
diff --git a/met-web/src/assets/images/BritishColumbiaLogoDarkCropped.svg b/met-web/src/assets/images/BritishColumbiaLogoDarkCropped.svg
new file mode 100644
index 000000000..f3b562f5c
--- /dev/null
+++ b/met-web/src/assets/images/BritishColumbiaLogoDarkCropped.svg
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="BC_ID" data-name="BC ID" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 650 175">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #002d72;
+      }
+
+      .cls-3 {
+        fill: #f2a900;
+      }
+
+      .cls-4 {
+        display: none;
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-4" d="M37.4,145.2c40.9,0,97.6,23.1,138.7,23.1s57.9-7.8,74.2-19.4c1.1-6.8,1.7-13.7,1.7-20.8C252,59.3,196.2,3.5,127.4,3.5S2.8,59.3,2.8,128.1s.6,13.9,1.7,20.6c4.5-.8,19.8-3.5,32.9-3.5Z"/>
+  <g>
+    <g>
+      <rect class="cls-3" x="317.4" y="169.6" width="288.2" height="3.5"/>
+      <path class="cls-2" d="M324.8,44.7c0-5.9-.4-7.4-4.4-7.7l-2.7-.2c-.4-.4-.3-1.9,0-2,4.7-.4,10.7-.6,18.9-.6s10.8.4,14.7,2.2c3.8,1.7,6.7,4.8,6.7,9.9s-3.7,8.6-8.9,10.8c0,.8.7,1,1.7,1.2,4.7.8,11.8,4.7,11.8,13.2s-7.5,15.3-23.3,15.3-6.8-.2-10.5-.2-6.8.2-10.1.2c-.5-.2-.7-1.5-.2-2l1.6-.2c4.7-.7,4.8-1.6,4.8-9.9v-30h0ZM332,55.3c0,2.2,0,2.4,4.6,2.2,8.9-.3,13.8-2.7,13.8-10.1s-6.4-10.7-13.1-10.7-3.3.2-4,.5c-.9.2-1.2.6-1.2,2.1v16h0ZM332,73.6c0,2.8.2,6.9,1.8,8.6,1.7,1.8,4.3,2.2,6.9,2.2,7.8,0,13.8-3.2,13.8-11.1s-3.5-13.5-17.5-13.5-5.1.5-5.1,2.1v11.7h0Z"/>
+      <path class="cls-2" d="M423.5,52.5c0-7.2-.1-8.3-4.6-8.6h-1.9c-.4-.4-.3-1.6.1-1.8,3.7.1,6.3.2,9.4.2s5.5,0,9.3-.2c.4.2.6,1.4.1,1.7h-1.9c-4.4.5-4.6,1.6-4.6,8.8v24c0,7.2.1,8.1,4.6,8.6l1.9.2c.4.3.3,1.5-.1,1.7-3.7-.1-6.3-.2-9.3-.2s-5.7,0-9.4.2c-.4-.2-.6-1.3-.1-1.7l1.9-.2c4.4-.5,4.6-1.4,4.6-8.6v-24Z"/>
+      <path class="cls-2" d="M465.1,76.7c0,7.1.1,8.1,4.2,8.4l2.2.2c.4.3.3,1.5-.1,1.7-4-.1-6.4-.2-9.2-.2s-5.3,0-9.8.2c-.4-.2-.6-1.3,0-1.7l2.5-.2c4-.3,4.4-1.4,4.4-8.4v-30.2c0-2.1,0-2.2-2.1-2.2h-3.9c-3,0-6.9.1-8.6,1.7-1.7,1.5-2.4,3-3.2,4.7-.6.4-1.5,0-1.8-.5,1.1-3,2.2-7.4,2.7-10.1.2-.1,1.1-.2,1.3,0,.4,2.2,2.7,2.1,6,2.1h28.4c3.8,0,4.4-.1,5.5-1.9.3-.1,1.1,0,1.3.2-.8,2.8-1.3,8.2-1.1,10.3-.3.5-1.5.5-1.8.1-.2-1.7-.7-4.2-1.8-4.9-1.6-1.1-4.3-1.7-8.1-1.7h-5c-2.1,0-2,0-2,2.3v30h0Z"/>
+      <path class="cls-2" d="M495.2,52.5c0-7.2-.1-8.3-4.6-8.6h-1.9c-.4-.4-.3-1.6.1-1.8,3.7.1,6.3.2,9.4.2s5.5,0,9.3-.2c.4.2.6,1.4.2,1.7h-1.9c-4.4.5-4.6,1.6-4.6,8.8v24c0,7.2.1,8.1,4.6,8.6l1.9.2c.4.3.3,1.5-.2,1.7-3.7-.1-6.3-.2-9.3-.2s-5.7,0-9.4.2c-.4-.2-.6-1.3-.1-1.7l1.9-.2c4.4-.5,4.6-1.4,4.6-8.6v-24Z"/>
+      <path class="cls-2" d="M528.8,87.7c-6.7,0-10.9-1.8-12.4-2.5-1-1.5-2-6.3-2.2-9.5.4-.5,1.6-.6,1.9-.2,1.2,3.4,4.5,10.1,13.7,10.1s10-3.7,10-7.8-.7-6.3-6.5-9.5l-7.6-4.2c-4-2.2-8.6-6.1-8.6-11.6s5.9-11.6,16.3-11.6,5.3.4,7.4.9c1,.3,2.2.4,2.8.4.7,1.6,1.4,5.4,1.4,8.2-.3.4-1.6.6-2,.2-1-3.2-3.2-7.6-10.8-7.6s-9.5,4.4-9.5,7.5,3.8,6.8,6.8,8.3l6.4,3.4c5,2.6,10,6.5,10,13,0,7.4-6.6,12.5-17,12.5Z"/>
+      <path class="cls-2" d="M568.9,65c-3.5,0-3.6.1-3.6,2.2v9.5c0,7.1.4,8,4.4,8.4l2.1.2c.4.3.3,1.5-.1,1.7-3.9-.1-6.4-.2-9.2-.2s-5.6.1-8.4.2c-.4-.2-.6-1.3-.1-1.7l1.2-.2c4.1-.7,4.2-1.4,4.2-8.4v-24.3c0-7.1-.5-8.2-4.3-8.5h-1.9c-.4-.4-.3-1.6.1-1.8,3.6,0,6,.2,9.2.2s5.3,0,8.4-.2c.4.2.6,1.4.1,1.7h-1.4c-4.2.5-4.4,1.6-4.4,8.6v7.8c0,2.1.1,2.2,3.6,2.2h20.8c3.5,0,3.6,0,3.6-2.2v-7.8c0-7.1-.1-8.1-4.4-8.5h-1.4c-.4-.4-.3-1.6.1-1.8,3.3.1,5.8.2,8.8.2s5.3,0,8.6-.2c.4.2.6,1.4.1,1.7h-1.5c-4.2.5-4.4,1.6-4.4,8.6v24.3c0,7.1.1,8,4.4,8.4l1.7.2c.4.3.3,1.5-.1,1.7-3.5-.1-6-.2-8.8-.2s-5.6,0-8.8.2c-.4-.2-.6-1.3-.1-1.7l1.4-.2c4.4-.7,4.4-1.4,4.4-8.4v-9.5c0-2-.1-2.2-3.6-2.2h-20.8Z"/>
+      <path class="cls-2" d="M283.2,101.9c6-4.6,13.6-6.9,22.1-6.9s10.6.9,14.5,2c1,.2,1.6.4,2.3.3,0,1.9.5,7,1.1,12-.4.6-1.6.7-2.2.2-1.2-5.5-4.9-11.9-16.8-11.9s-23.2,7.9-23.2,24.8,10.9,26.6,24.3,26.6,15.2-6.9,17.1-11.7c.6-.4,1.8-.2,2.1.3-.6,4.2-2.7,9.6-3.9,11.2-1,.2-2,.5-2.9.8-1.8.7-7.7,1.9-12.9,1.9s-14.4-1.5-20.4-5.5c-6.5-4.5-11.6-11.9-11.6-22.4,0-9.1,4.1-16.8,10.3-21.6Z"/>
+      <path class="cls-2" d="M328,128.2c0-13.5,10.6-23.8,25.2-23.8s24.6,11.3,24.6,23.2-10.9,23.6-24.6,23.6-25.2-10.7-25.2-22.9ZM370.7,129.6c0-11.1-5.2-23.2-18.7-23.2s-16.9,4.8-16.9,19.6,5.1,23,19.1,23c8.5,0,16.6-6.1,16.6-19.4Z"/>
+      <path class="cls-2" d="M457.8,122.4c0-4.2-.1-12-1.4-14-.5-.8-1.8-1.3-3.6-1.4h-1.8c-.4-.6-.3-1.5.1-1.8,2.7.1,5.4.2,8.2.2s4.9,0,7.5-.2c.6.3.5,1.2.1,1.6h-1.7c-1.8.3-3.2.9-3.6,1.8-1,2.2-1,10-1,13.8v7.6c0,5.9-1,12.1-5,16.1-3.1,3.2-8.4,4.9-13.7,4.9s-9.9-.9-13.4-3.7c-3.8-3-5.6-7.9-5.6-15.9v-15.9c0-7-.1-8.2-4.3-8.5h-1.8c-.4-.4-.3-1.6.1-1.8,3.6.1,6,.2,8.9.2s5.3,0,8.8-.2c.4.2.6,1.3.1,1.6h-1.7c-4.1.5-4.3,1.6-4.3,8.6v14.6c0,10.9,3.6,18,14.5,18s14.3-7.7,14.3-18v-7.8h0Z"/>
+      <path class="cls-2" d="M541,114c0-5-.3-6.3-3.9-6.6l-2.5-.2c-.3-.3-.4-1.6,0-1.7,4.3-.3,9.7-.5,17-.5s9.7.3,13.3,1.9c3.4,1.4,6,4.2,6,8.5s-3.3,7.4-8.1,9.3c0,.7.6.9,1.5,1,4.3.7,10.6,4.1,10.6,11.4s-6.8,13.2-21,13.2-6.2-.2-9.5-.2-6.2.1-9.1.2c-.5-.2-.6-1.3-.2-1.7l1.4-.2c4.2-.6,4.4-1.4,4.4-8.5v-25.9h0ZM547.5,123.1c0,1.9,0,2.1,4.1,1.9,8.1-.3,12.4-2.3,12.4-8.7s-5.8-9.2-11.8-9.2-2.9.1-3.6.4c-.8.2-1.1.5-1.1,1.8v13.8ZM547.5,138.9c0,2.5.2,5.9,1.7,7.4,1.5,1.6,3.9,1.9,6.2,1.9,7,0,12.4-2.7,12.4-9.6s-3.2-11.7-15.7-11.7-4.6.4-4.6,1.8v10.1h0Z"/>
+      <path class="cls-2" d="M412.1,85.3l-1.9-.2c-.4,0-.7,0-1-.1-2.7-.5-3.8-2.9-5.1-5.2l-6.5-11.3c-1.1-1.9-2.3-4.4-4.9-4.8,6.6-.8,12.6-4.6,12.6-11.2s-7.5-11-15.1-11-8.7.1-13.4.1-5.6-.1-8.2-.1-1.4.3-1.4,1.1c0,1.2.5.8,2,.9,5.4.3,5.2,1.3,5.2,5.9v29.6c0,4.2.4,5.5-4.1,5.9,0,0-.7,0-1.1.1l-1.9.2c-.4.4-.3,1.5.1,1.7,1,0,2.8-.1,2.8-.1,2.5,0,4.9-.3,7.4-.3s4.8.2,7.3.3h0c.9,0,1.8,0,2.8,0,.4-.2.6-1.3.1-1.7l-1.9-.2c-.4,0-1.1-.1-1.1-.1-4.5-.3-4.2-1.6-4.2-5.9v-11.1c0-.7,0-2.4.4-2.9.4-.4,1.1-.4,1.8-.4,6.1,0,6,.6,8.9,5.6l7.8,14.1c.6,1.1,1.1,2.5,2.7,2.5h6.8c.9,0,1.8,0,2.8,0,.5-.2.6-1.3.2-1.7ZM384.8,63.1c-1.4,0-4.1.5-4.1-1.3v-12.9c0-5.1.2-5.8,6.2-5.8s11.5,3.6,11.5,10.3-1,5.6-3.7,7.4c-3,2.1-6.3,2.4-10,2.4Z"/>
+      <g>
+        <path class="cls-2" d="M386.2,115.8c0-7.1-.1-8.2-4.8-8.5h-1.9c-.4-.4-.3-1.6.1-1.8,4.2.1,6.7.2,9.7.2s5.4,0,9.1-.2c.4.2.6,1.4.1,1.7h-1.8c-4.4.5-4.5,1.6-4.5,8.6v23.5c0,4.2.2,6,1.6,7.3.8.7,2.2,1.6,8.1,1.6s7.9-.3,9.1-.9c1.5-.8,3.4-3.2,4.9-6.7.4-.3,1.9,0,1.9.4,0,.7-2.1,7.6-3.1,9.5-3.8-.1-10.8-.2-18.5-.2h-6.8c-3.1,0-5.5,0-9.7.2-.4-.2-.6-1.3-.1-1.7l2.2-.2c4.3-.4,4.5-1.4,4.5-8.4v-24.3h0Z"/>
+        <path class="cls-2" d="M585.2,115.9c0-7.2-.1-8.3-4.5-8.6h-1.8c-.4-.4-.3-1.6.1-1.8,3.6.1,6.1.2,9.2.2s5.4,0,9-.2c.4.2.6,1.4.1,1.7h-1.8c-4.3.5-4.5,1.6-4.5,8.8v24c0,7.2.1,8.1,4.5,8.6l1.8.2c.4.3.3,1.5-.1,1.7-3.6-.1-6.1-.2-9-.2s-5.5,0-9.2.2c-.4-.2-.6-1.3-.1-1.7l1.8-.2c4.3-.5,4.5-1.4,4.5-8.6v-24Z"/>
+        <path class="cls-2" d="M526.9,148.5c-.4,0-1.1,0-1.1,0-.8,0-1.5-.2-2-.8-.9-1-.9-3.9-.9-5v-29.6c0-1.3-.3-4.1.6-5.1.5-.5,1.5-.6,2.3-.7h0c.5,0,.5,0,1,0h1.9c.4-.4.3-1.6-.1-1.8-1,0-1.9,0-2.8,0h-8c-.9,0-1.7,0-2.1.9l-16.2,33.8-14.3-32.7c-.5-1.1-.5-2.1-2.1-2.1h-8.3c-.9,0-1.8,0-2.8,0-.4.2-.6,1.4-.1,1.7h1.9c.4.2,1.1.2,1.1.2,3.1.2,3.3.9,3,4.2l-2.4,31.7c-.2,3.2-.4,4.9-3.7,5.2,0,0-.7,0-1.1.1l-1.9.2c-.4.4-.3,1.5.1,1.7,1,0,2.7,0,2.7,0,1.7,0,3.4-.2,5.1-.2s3.7.2,5.6.2h0c.9,0,1.8,0,2.8,0,.4-.2.6-1.3.1-1.7l-1.9-.2c-.5,0-1,0-1,0-4.8-.3-4.7-3.7-4.4-7.9l2.3-29.5h.5l15.5,36.3c.2.5.4,1.4,1.2,1.4s.9-.8,1.2-1.3l17.5-37.3h.5v32.5c0,1.3.2,3.9-1.2,4.9-.7.5-3,.8-3,.8-.3,0-.6,0-1,.1l-1.9.2c-.4.4-.3,1.5.1,1.7,1,0,2.7,0,2.7,0,2.5,0,5.1-.3,7.7-.3s5.5.2,5.5.2c.9,0,1.8.1,2.9.2.4-.2.6-1.3.1-1.7l-1.9-.2Z"/>
+        <path class="cls-2" d="M648.7,148.7l-.3-.2c-.4,0-.7,0-1-.1-2.9-.7-4.1-4.2-5.1-6.7l-15-35.6c-.1-.4-.4-1.3-1-1.3s-1,1-1.3,1.6l-14.4,35.5c-.5,1.3-1.9,4.6-2.8,5.6-.7.8-1.7.9-2.7,1,0,0-.8,0-1.2.1l-1.8.2c-.4.4-.3,1.5.1,1.7,1,0,2.8-.1,2.8-.1,2,0,3.9-.3,5.9-.3s3.3.2,5,.2c0,0,1.8,0,2.8.1.4-.2.6-1.3.1-1.7l-1.9-.2c-.4,0-1-.1-1-.1-1.7-.2-3.9-.5-3.9-2.4s.6-2.8,1-3.9l2.2-5.3c1.1-2.5.7-2.8,3.6-2.8h10.1c3.6,0,3,0,4.6,3.6l2.4,5.4c.4.9,1,2.5,1,3.5,0,1.8-1.9,1.9-3.8,2.1,0,0-.6,0-1.1,0h-1.8c-.4.5-.3,1.6.2,1.8,1,0,2.8-.1,2.8-.1,2.1,0,4.2-.2,6.3-.2s5.2.2,7.8.2h0c.9,0,.1,0,1.1,0,.5-.2.6-1.3.2-1.7ZM629,132h-8.8c-.3,0-2.7.3-2.7-.4s.2-.6.2-.9l5.3-13c.2-.4.7-2.2,1.3-2.2s1.1,1.9,1.2,2.2l5.2,12.2c0,.1.5,1.3.5,1.6,0,.8-1.7.6-2.2.6Z"/>
+      </g>
+      <rect class="cls-1" x="-63" y="-62.1" width="776.3" height="299.5"/>
+    </g>
+    <g>
+      <polygon class="cls-3" points="208 99.3 212.9 101.3 223.8 93.7 208 99.3"/>
+      <path class="cls-3" d="M24.4,90.7l-12.9-4.6.7-1.6,14.6,4.9h0s1.9-1.1,1.9-1.1l.8-.5-15.9-6.8.7-1.7,35.5,14.4,1.2-.5-35.2-17.2.8-1.6,37.3,17.4.5-.3-36.2-20.5.7-1.5,52.2,28.4c.4-.8,1.3-2.2,1.8-3-19.9-18.7-39-32.7-39-32.7,0,0,19.7,13.2,44,25.5.8-1,1.5-1.8,2.3-2.8l-44.6-39.2,1.2-1.2,36,30.7-33.3-33.4,1.2-1.3,37.4,36.1-34.8-38.6,1.3-1.2,32.2,34.5-29.4-37,1.3-1.2,37.6,45.8c1-.8,1.8-1.5,2.8-2.3-11.4-24.6-23.8-44.7-23.8-44.7,0,0,13.2,19.5,31.1,39.9,1.1-.6,2.2-1.2,3.3-1.8h-.2c0-.1-26.4-52.8-26.4-52.8l1.6-.7,21.9,41.9-18.4-43.4,1.6-.7,21.1,47.5-17.8-48.9,1.7-.6,16.9,44-13.4-45.3,1.6-.6,17.6,56.2h0c0,.1,0,.1,0,.1,1.2-.4,2.4-.7,3.6-1.1-1.3-27-5.3-50.1-5.3-50.1,0,0,4.9,22.9,13.8,48.4,1.2-.2,2.5-.3,3.7-.4h0c0,0,.2,0,.2,0h0c0-.1-4.7-58.8-4.7-58.8h1.7c0,0,4.6,47,4.6,47l-.8-47.1h1.8c0,0,1.8,51.9,1.8,51.9l1.8-52h1.8c0,0-.8,47.2-.8,47.2l4.6-47h1.7c0,0-4.7,58.8-4.7,58.8h0c0,.1,0,.1,0,.1h0s0,0,0,0c1.2,0,2.4.2,3.6.3,8.9-25.5,13.8-48.4,13.8-48.4,0,0-4,23-5.3,50,1.2.3,2.4.7,3.6,1.1l17.5-56,1.6.6-13.4,45.3,16.9-44,1.7.6-17.8,48.9,21.1-47.5,1.6.7-18.4,43.4,21.9-41.9,1.6.7-26.3,52.5h0c1.1.5,2.1,1.1,3.2,1.7,17.8-20.3,30.9-39.7,30.9-39.7,0,0-12.4,19.9-23.7,44.4,1,.8,2,1.6,3,2.4l37.2-45.3,1.3,1.2-29.4,37,32.2-34.5,1.3,1.2-34.8,38.6,37.4-36.1,1.2,1.3-33.3,33.4,36-30.7,1.2,1.2-44,38.8h0c.8.9,1.5,1.8,2.2,2.7,24.2-12.2,43.7-25.3,43.7-25.3,0,0-19,13.9-38.7,32.4.5.9,1.4,2.4,1.9,3.4l51.5-28,.7,1.5-41.1,23.3,42.8-19.9.8,1.6-39.8,19.4.8.3,40.5-16.4.7,1.7-37.7,16,.7.3,25.1-8.4,3.8-2.6,1.3,1,8.3-2.8.7,1.6-7.1,2.5,10.3,7.9,3.3,1.8C236.9,43.5,187,2.2,127.5,2.2S16.3,44.9,4.1,101.9c.2,0,.3-.1.5-.2l1.5-.7.9-.4,17.4-9.8Z"/>
+    </g>
+    <path class="cls-2" d="M3.4,151.3s18.6-3.7,34.2-3.7c40.9,0,97.6,23.1,138.7,23.1s59.5-8.3,75.6-20.3c1.3-7.1,1.9-14.5,1.9-22s-1.2-20-3.5-29.5l-17.1-9.6-20.1,14.1-13.5-5.3c-4.6,2.3-32.8,21.2-32.8,21.2l-10.8-7.8-11.6-2.3-15.5-11.3-17.8,12.2s-19.8,11.5-20.5,11.5-23.9-18.4-23.9-18.4l-10.7-11.3c-1.8,1.2-9.1,4.5-9.1,4.5h-.4c0,.1-7.1-2.1-7.1-2.1l-8.6-4.5-26,11.8c-.2,0-.3.1-.5.2-1.8,8.6-2.8,17.4-2.8,26.5,0,7.8.7,15.5,2.1,23Z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/met-web/src/components/feedback/FeedbackModal/index.tsx b/met-web/src/components/feedback/FeedbackModal/index.tsx
index c06d02666..19e497d19 100644
--- a/met-web/src/components/feedback/FeedbackModal/index.tsx
+++ b/met-web/src/components/feedback/FeedbackModal/index.tsx
@@ -15,10 +15,10 @@ import { createFeedback } from 'services/feedbackService';
 import { openNotification } from 'services/notificationService/notificationSlice';
 import { useAppDispatch } from 'hooks';
 import { customRatings, commentTypes } from './constants';
-import { ZIndex } from 'styles/Theme';
 import { useAppTranslation } from 'hooks';
 import { Button, IconButton, CustomTextField } from 'components/common/Input';
 import { useTheme } from '@mui/material/styles';
+import { ZIndex } from 'styles/Theme';
 
 export const FeedbackModal = () => {
     const { t: translate } = useAppTranslation();
@@ -94,8 +94,8 @@ export const FeedbackModal = () => {
                     bottom: bottomSpacing,
                     right: rightSpacing,
                     transform: 'rotate(-90deg)',
-                    zIndex: ZIndex.footer + 1,
                     transformOrigin: 'bottom right',
+                    zIndex: ZIndex.feedback,
                 }}
             >
                 <FontAwesomeIcon
diff --git a/met-web/src/components/layout/Footer/constants.ts b/met-web/src/components/layout/Footer/constants.ts
deleted file mode 100644
index eea33a994..000000000
--- a/met-web/src/components/layout/Footer/constants.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const FOOTER_COLORS = {
-    BACKGROUND: '#252525',
-    BORDER: '#F9B233',
-};
diff --git a/met-web/src/components/layout/Footer/index.tsx b/met-web/src/components/layout/Footer/index.tsx
index 8d7ee237f..9227b46b9 100644
--- a/met-web/src/components/layout/Footer/index.tsx
+++ b/met-web/src/components/layout/Footer/index.tsx
@@ -1,165 +1,231 @@
-import { Box, Divider, Grid, Stack } from '@mui/material';
-import { MetBodyOld, MetLabel } from 'components/common';
+import { Divider, Grid, Stack, useMediaQuery, Theme } from '@mui/material';
+import { MetLabel } from 'components/common';
 import React from 'react';
-import { ReactComponent as BCLogo } from 'assets/images/BritishColumbiaLogoDark.svg';
+import { ReactComponent as BCLogo } from 'assets/images/BritishColumbiaLogoDarkCropped.svg';
 import { Palette } from 'styles/Theme';
-import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
-import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
-import { faXTwitter } from '@fortawesome/free-brands-svg-icons/faXTwitter';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookF, faInstagram, faXTwitter } from '@fortawesome/free-brands-svg-icons';
+import { faUniversalAccess } from '@fortawesome/pro-solid-svg-icons';
 import UserService from 'services/userService';
 import { useAppSelector } from 'hooks';
 import { Unless } from 'react-if';
-import { FOOTER_COLORS } from './constants';
 import { useAppTranslation } from 'hooks';
 import { getBaseUrl } from 'helper';
-import { IconButton } from 'components/common/Input';
 import { Link } from 'components/common/Navigation';
+import { SocialLinkIconProps } from './types';
+
+const LinkArrow = () => {
+    return <span style={{ fontWeight: 'bold', marginLeft: '0.8rem' }}>&gt;</span>;
+};
+
+const SocialLinkIcon = ({ iconLink, fontAwesomeIcon }: SocialLinkIconProps) => {
+    return (
+        <Link
+            href={iconLink}
+            sx={{
+                display: 'flex',
+                alignItems: 'center',
+                height: '2.5rem',
+                width: '2.5rem',
+                borderRadius: '50%',
+                backgroundColor: Palette.text.primary,
+                justifyContent: 'center',
+                color: Palette.text.primary,
+                textDecoration: 'none',
+            }}
+        >
+            <FontAwesomeIcon
+                style={{
+                    fontSize: '1.5rem',
+                    color: 'white',
+                    width: '1.5rem',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+                icon={fontAwesomeIcon}
+            />
+        </Link>
+    );
+};
 
 const Footer = () => {
     const baseURL = getBaseUrl();
     const { t: translate } = useAppTranslation();
     const isLoggedIn = useAppSelector((state) => state.user.authentication.authenticated);
+    const isMediumScreenOrLarger: boolean = useMediaQuery((theme: Theme) => theme.breakpoints.up('md'));
+    const linkStyles = {
+        color: Palette.text.primary,
+        textDecoration: 'none',
+        '&:hover': { color: Palette.primary.light },
+    };
 
     return (
-        <Grid container justifyContent="center" alignItems="center" spacing={0} mt="2em">
+        <Grid container component="footer" spacing={0} mt="2em" aria-label="footer">
+            {/* Footer acknowledgement container */}
             <Grid
                 item
                 xs={12}
                 sx={{
-                    backgroundColor: FOOTER_COLORS.BACKGROUND,
-                    borderTop: `6px solid ${FOOTER_COLORS.BORDER}`,
-                    borderBottom: `6px solid ${FOOTER_COLORS.BORDER}`,
+                    backgroundColor: Palette.acknowledgement.background,
+                    borderTop: `0.375rem solid ${Palette.acknowledgement.border}`,
+                    borderBottom: `0.375rem solid ${Palette.acknowledgement.border}`,
                 }}
-                padding={{ xs: '2em 1em', md: '2em 6em' }}
+                padding={{ xs: '2em 1em', md: '2em 2em', lg: '2em 3em' }}
             >
-                <MetBodyOld color="white">{translate('footer.body')}</MetBodyOld>
+                <p style={{ color: Palette.background.default }}>{translate('footer.body')}</p>
             </Grid>
-            <Grid
-                item
-                xs={12}
-                padding={{ xs: '2em 1em', md: '2em 6em' }}
-                container
-                justifyContent={'flex-start'}
-                alignItems="flex-start"
-                rowSpacing={3}
-            >
+
+            {/* Footer main container */}
+            <Grid item xs={12} padding={{ xs: '2em 1em', md: '2em 2em', lg: '2em 3em' }} container rowSpacing={4}>
                 <Grid
                     item
-                    xs={12}
+                    columns={10}
+                    xs={10}
                     md={6}
                     container
-                    justifyContent={'flex-start'}
-                    alignItems="flex-start"
-                    rowSpacing={3}
+                    sx={{
+                        pr: isMediumScreenOrLarger ? '4rem' : '2rem',
+                        height: isMediumScreenOrLarger ? '15.625rem' : 'auto',
+                    }}
                 >
-                    <Grid item xs={12}>
-                        <Box
-                            component={BCLogo}
-                            sx={{
-                                height: '5em',
-                                width: '15em',
+                    {/* Footer BC Gov Logo */}
+                    <Stack spacing={3} height="100%">
+                        <BCLogo
+                            style={{
+                                alignSelf: 'flex-start',
+                                paddingBottom: '1rem',
+                                maxWidth: isMediumScreenOrLarger ? '25rem' : '9.375rem',
                             }}
                             alt={translate('footer.defaultLogo')}
                         />
-                    </Grid>
-                    <Grid item xs={12}>
-                        <MetBodyOld>{translate('footer.connectWithUs')}</MetBodyOld>
-                    </Grid>
+
+                        {/* Footer accessibility paragraph and link */}
+                        <p style={{ margin: '0' }}>{translate('footer.statement')}</p>
+                        <Stack
+                            direction="row"
+                            alignSelf="flex-end"
+                            style={{ height: isMediumScreenOrLarger ? '100%' : 'auto', width: '100%' }}
+                        >
+                            <Link
+                                href="https://www2.gov.bc.ca/gov/content/home/accessible-government"
+                                sx={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    alignSelf: 'flex-end',
+                                    ...linkStyles,
+                                }}
+                            >
+                                <FontAwesomeIcon
+                                    style={{
+                                        fontSize: '2.5rem',
+                                        color: Palette.text.primary,
+                                        paddingRight: '0.75rem',
+                                        width: '2.5rem',
+                                    }}
+                                    icon={faUniversalAccess}
+                                />
+
+                                {translate('footer.accessibility')}
+                                <LinkArrow />
+                            </Link>
+                        </Stack>
+                    </Stack>
                 </Grid>
+
+                {/* Footer more info */}
                 <Grid
                     item
-                    xs={12}
-                    md={6}
+                    columns={10}
+                    xs={10}
+                    md={2}
                     container
-                    justifyContent={'flex-start'}
-                    alignItems="flex-start"
-                    rowSpacing={3}
+                    sx={{
+                        height: isMediumScreenOrLarger ? '15.625rem' : 'auto',
+                        pr: isMediumScreenOrLarger ? '1rem' : '0',
+                    }}
                 >
-                    <Grid item xs={12}>
+                    <Stack spacing={3}>
                         <MetLabel>{translate('footer.moreInfo')}</MetLabel>
-                    </Grid>
-                    <Grid item xs={6}>
-                        <Link to={isLoggedIn ? `/home` : `/`} color={Palette.text.primary}>
-                            {translate('footer.home')}
+                        <Link href="#" sx={linkStyles}>
+                            {translate('footer.aboutEngageBC')}
+                            <LinkArrow />
                         </Link>
-                    </Grid>
-                    <Grid item xs={6}>
-                        <Link
-                            href="https://www2.gov.bc.ca/gov/content/home/accessible-government"
-                            color={Palette.text.primary}
-                        >
-                            {translate('footer.accessibility')}
-                        </Link>
-                    </Grid>
-                    <Grid item xs={6}>
-                        <Link href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca" color={Palette.text.primary}>
+                        <Link href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca" sx={linkStyles}>
                             {translate('footer.aboutGov')}
+                            <LinkArrow />
                         </Link>
-                    </Grid>
-                    <Grid item xs={6}>
-                        <Link href="https://www2.gov.bc.ca/gov/content/home/copyright" color={Palette.text.primary}>
-                            {translate('footer.copyright')}
+                    </Stack>
+                </Grid>
+
+                {/* Footer connect with us */}
+                <Grid
+                    item
+                    columns={10}
+                    xs={10}
+                    md={2}
+                    container
+                    sx={{ height: isMediumScreenOrLarger ? '15.625rem' : 'auto' }}
+                >
+                    <Stack spacing={3}>
+                        <MetLabel>{translate('footer.connectWithUs')}</MetLabel>
+                        <Link href="#" sx={linkStyles}>
+                            {translate('footer.contactInformation')}
+                            <LinkArrow />
                         </Link>
-                    </Grid>
-                    <Grid item xs={6}>
-                        <Link href="https://www2.gov.bc.ca/gov/content/home/disclaimer" color={Palette.text.primary}>
-                            {translate('footer.disclaimer')}
+                        <Link href="#" sx={linkStyles}>
+                            {translate('footer.serviceCentres')}
+                            <LinkArrow />
                         </Link>
-                    </Grid>
+                        <Grid container xs={12}>
+                            <Stack direction="row" spacing={2} alignSelf={'flex-end'}>
+                                <SocialLinkIcon iconLink="#" fontAwesomeIcon={faXTwitter} />
+                                <SocialLinkIcon iconLink="#" fontAwesomeIcon={faInstagram} />
+                                <SocialLinkIcon iconLink="#" fontAwesomeIcon={faFacebookF} />
+                            </Stack>
+                        </Grid>
+                    </Stack>
+                </Grid>
+
+                {/* Footer divider */}
+                <Grid item xs={12}>
+                    <Divider sx={{ borderColor: Palette.text.primary }} />
+                </Grid>
+
+                {/* Footer copyright date and admin login */}
+                <Grid item xs={12} sm={6} container justifyContent={'flex-start'} alignItems="flex-start">
+                    <p style={{ margin: '0' }}>{translate('footer.copyrightNotice')}</p>
                     <Unless condition={isLoggedIn}>
-                        <Grid item xs={6}>
+                        <Grid item xs={12} sx={{ pt: '1rem' }}>
                             <Link
                                 href="/"
-                                color={Palette.text.primary}
                                 onClick={(event) => {
                                     event.preventDefault();
                                     UserService.doLogin(baseURL);
                                 }}
+                                sx={linkStyles}
                             >
                                 {translate('footer.login')}
+                                <LinkArrow />
                             </Link>
                         </Grid>
                     </Unless>
-                    <Grid item xs={6}>
-                        <Link href="https://www2.gov.bc.ca/gov/content/home/privacy" color={Palette.text.primary}>
+                </Grid>
+
+                {/* Footer copyright, privacy, and disclaimer links */}
+                <Grid item xs={12} sm={6} container justifyContent={{ xs: 'flex-start', sm: 'flex-end' }}>
+                    <Stack direction="row" spacing={4}>
+                        <Link href="https://www2.gov.bc.ca/gov/content/home/copyright" sx={linkStyles}>
+                            {translate('footer.copyright')}
+                        </Link>
+                        <Link href="https://www2.gov.bc.ca/gov/content/home/privacy" sx={linkStyles}>
                             {translate('footer.privacy')}
                         </Link>
-                    </Grid>
-                </Grid>
-                <Grid item xs={12}>
-                    <Divider sx={{ borderColor: Palette.text.primary }} />
-                </Grid>
-                <Grid item xs={12} sm={6}>
-                    <Stack direction="row" spacing={2}>
-                        <IconButton
-                            icon={faFacebookF}
-                            title="Facebook Icon"
-                            sx={{
-                                border: '1px solid #494949',
-                                borderRadius: '50%',
-                            }}
-                        />
-                        <IconButton
-                            icon={faInstagram}
-                            title="Instagram Icon"
-                            sx={{
-                                border: '1px solid #494949',
-                                borderRadius: '50%',
-                            }}
-                        />
-                        <IconButton
-                            icon={faXTwitter}
-                            title="Twitter Icon"
-                            sx={{
-                                border: '1px solid #494949',
-                                borderRadius: '50%',
-                            }}
-                        />
+                        <Link href="https://www2.gov.bc.ca/gov/content/home/disclaimer" sx={linkStyles}>
+                            {translate('footer.disclaimer')}
+                        </Link>
                     </Stack>
                 </Grid>
-                <Grid item xs={12} sm={6} container justifyContent={'flex-end'} alignItems="flex-end">
-                    <MetBodyOld>{translate('footer.copyrightNotice')}</MetBodyOld>
-                </Grid>
             </Grid>
         </Grid>
     );
diff --git a/met-web/src/components/layout/Footer/types.ts b/met-web/src/components/layout/Footer/types.ts
new file mode 100644
index 000000000..3c5d51c3b
--- /dev/null
+++ b/met-web/src/components/layout/Footer/types.ts
@@ -0,0 +1,6 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+export interface SocialLinkIconProps {
+    iconLink: string;
+    fontAwesomeIcon: IconDefinition;
+}
diff --git a/met-web/src/components/layout/SideNav/SideNav.tsx b/met-web/src/components/layout/SideNav/SideNav.tsx
index 5292b002b..5214c09c0 100644
--- a/met-web/src/components/layout/SideNav/SideNav.tsx
+++ b/met-web/src/components/layout/SideNav/SideNav.tsx
@@ -14,7 +14,7 @@ import {
 } from '@mui/material';
 import { useLocation } from 'react-router-dom';
 import { Routes, Route } from './SideNavElements';
-import { DarkTheme, Palette, colors } from '../../../styles/Theme';
+import { DarkTheme, Palette, colors, ZIndex } from '../../../styles/Theme';
 import { SideNavProps, DrawerBoxProps } from './types';
 import { When } from 'react-if';
 import { useAppSelector } from 'hooks';
@@ -135,6 +135,7 @@ const DrawerBox = ({ isMediumScreenOrLarger, setOpen }: DrawerBoxProps) => {
                 borderBottomRightRadius: '16px',
                 boxShadow: '0 5px 10px rgba(0, 0, 0, 0.4)',
                 mt: '5.625rem',
+                zIndex: ZIndex.sideNav,
             }}
         >
             <List sx={{ pt: { xs: 4, md: 0 }, pb: '0' }}>
@@ -159,9 +160,11 @@ const SideNav = ({ open, setOpen, isMediumScreen }: SideNavProps) => {
                         border: 'none',
                         width: '300px',
                         boxSizing: 'border-box',
-                        backgroundColor: Palette.background.default,
+                        background: 'transparent',
+                        height: '43.75rem',
                     },
                 }}
+                hideBackdrop
                 elevation={0}
                 variant="permanent"
                 sx={{
diff --git a/met-web/src/locales/common.json b/met-web/src/locales/common.json
index 1d426e0ef..981f36105 100644
--- a/met-web/src/locales/common.json
+++ b/met-web/src/locales/common.json
@@ -22,14 +22,18 @@
         "connectWithUs": "CONNECT WITH US",
         "moreInfo": "MORE INFO",
         "home": "Home",
-        "accessibility": "Accessibility",
+        "accessibility": "Accessibility & Inclusion",
         "aboutGov": "About gov.bc.ca",
         "copyright": "Copyright",
         "disclaimer": "Disclaimer",
         "login": "Admin Login",
         "privacy": "Privacy",
         "copyrightNotice": "© 2023 Government of British Columbia",
-        "defaultLogo": "British Columbia Logo"
+        "defaultLogo": "British Columbia Logo",
+        "serviceCentres": "Service Centres",
+        "contactInformation": "Contact Information",
+        "aboutEngageBC": "About engageBC",
+        "statement": "We are committed to providing accessible and inclusive digital experiences and help in 120 languages including TDD to British Columbians."
     },
     "feedback": {
         "websiteFeedback": "Website Feedback",
diff --git a/met-web/src/styles/Theme.ts b/met-web/src/styles/Theme.ts
index 8d7c7a044..418b5da0d 100644
--- a/met-web/src/styles/Theme.ts
+++ b/met-web/src/styles/Theme.ts
@@ -116,6 +116,10 @@ export const colors = {
             tint: '#F4E1E2',
         },
     },
+    acknowledgement: {
+        border: '#fcba19',
+        background: '#292929',
+    },
 };
 
 export const Palette = {
@@ -170,6 +174,11 @@ export const Palette = {
     icons: {
         surveyReady: colors.notification.success.shade,
     },
+    acknowledgement: {
+        font: colors.surface.gray[10],
+        background: colors.acknowledgement.background,
+        border: colors.acknowledgement.border,
+    },
 };
 
 export const BaseTheme = createTheme({
@@ -437,5 +446,7 @@ export const DarkTheme = createTheme({
 });
 
 export const ZIndex = {
-    footer: BaseTheme.zIndex.drawer + 1,
+    feedback: '1002',
+    sideNav: '1001',
+    footer: '1000',
 };