diff --git a/footer.php b/footer.php
index 939b66e..6424405 100644
--- a/footer.php
+++ b/footer.php
@@ -23,87 +23,75 @@ $footerNav = ! empty( $locations['footer_navigation'] )
 
 	</main>
 
-	<footer role="contentinfo" class="site-footer bg-gray-800 text-white text-base">
-		<div class="pt-16 pb-12 text-base">
-			<div class="container mx-auto">
-				<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
-					<div class="col-span-4 md:col-span-8 lg:col-span-4 max-w-[40ch] prose-p:text-14px prose-p:mb-4 text-balance" aria-labelledby="footer-header">
-						<h2 id="footer-header" class="max-w-64 h-auto">
-							<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-footer__logo-link h-full w-full">
-								<?php if ( $footerLogo ) { ?>
-									<img src="<?php echo esc_url( $footerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="site-footer__logo-image" />
-									<?php
-								} else {
-									echo esc_html( get_bloginfo( 'name' ) );
-								}
-								?>
-							</a>
-						</h2>
+	<footer role="contentinfo" class="site-footer bg-cwc-blue-02 text-white pt-16 pb-12 text-base">
+        <div class="container mx-auto grid grid-cols-4 gap-6">
+            <div class="max-w-[40ch]">
+                <h2 id="footer-header" class="max-w-64 h-auto">
+                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-footer__logo-link h-full w-full">
+                        <?php if ( $footerLogo ) { ?>
+                            <img src="<?php echo esc_url( $footerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="site-footer__logo-image" />
+                            <?php
+                        } else {
+                            echo esc_html( get_bloginfo( 'name' ) );
+                        }
+                        ?>
+                    </a>
+                </h2>
+            </div>
 
-						<div id="footer-description" aria-label="Footer description">
-							<?php echo wp_kses_post( $footerDesc ); ?>
-						</div>
+            <div id="footer-nav" aria-labelledby="footer-navigation">
+                <?php if ( $footerNav ) : ?>
+                    <nav class="site-footer__nav" aria-label="Footer navigation">
+                        <ul class="site-footer__nav-list">
+                            <?php foreach ( $footerNav as $item ) : ?>
+                                <li class="site-footer__nav-item list-none text-left <?php echo esc_attr( implode( ' ', $item->classes ) ); ?>">
+                                    <a href="<?php echo esc_url( $item->url ); ?>" class="site-footer__nav-link">
+                                        <?php echo esc_html( $item->title ); ?>
+                                    </a>
+                                </li>
+                            <?php endforeach; ?>
+                        </ul>
+                    </nav>
+                <?php endif; ?>
+            </div>
 
-						<div class="social-links mt-8">
-							<?php
-							get_template_part(
-								'views/partials/social-media',
-								null,
-								array(
-									'circle'  => false,
-									'classes' => 'social-icons p-0 mr-2 text-30px text-gray-300! hover:text-info!',
-								)
-							);
-							?>
-						</div>
-					</div>
+            <div aria-labelledby="footer-area-1" class="prose-p:text-balance">
+                <div id="footer-description" aria-label="Footer description">
+                    <?php echo wp_kses_post( $footerDesc ); ?>
+                </div>
 
-					<div id="footRight" class="col-span-4 md:col-span-8 grid md:grid-cols-4 gap-10 lg:justify-end">
-						<div aria-labelledby="footer-area-1" class="prose-p:text-balance">
-							<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-1">Footer Area 1</h3>
-							<?php dynamic_sidebar( 'footer-1' ); ?>
-						</div>
+                <?php dynamic_sidebar( 'footer-1' ); ?>
+            </div>
 
-						<div aria-labelledby="footer-area-2" class="prose-p:text-balance">
-							<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-2">Footer Area 2</h3>
-							<?php dynamic_sidebar( 'footer-2' ); ?>
-						</div>
+            <div class="text-right flex flex-col justify-end items-end">
+                <?php dynamic_sidebar( 'footer-2' ); ?>
 
-						<div aria-labelledby="footer-area-3" class="prose-p:text-balance">
-							<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-3">Footer Area 3</h3>
-							<?php dynamic_sidebar( 'footer-3' ); ?>
-						</div>
+                <x-back-to-top></x-back-to-top>
 
-						<div id="footer-nav" aria-labelledby="footer-navigation">
-							<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-navigation"><?php echo esc_html__( 'Navigation' ); ?></h3>
-							<?php if ( $footerNav ) : ?>
-								<nav class="site-footer__nav" aria-label="Footer navigation">
-									<ul class="site-footer__nav-list">
-										<?php foreach ( $footerNav as $item ) : ?>
-											<li class="site-footer__nav-item list-none text-left <?php echo esc_attr( implode( ' ', $item->classes ) ); ?>">
-												<a href="<?php echo esc_url( $item->url ); ?>" class="site-footer__nav-link">
-													<?php echo esc_html( $item->title ); ?>
-												</a>
-											</li>
-										<?php endforeach; ?>
-									</ul>
-								</nav>
-							<?php endif; ?>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+                <div class="social-links mt-12">
+                    <?php
+                    get_template_part(
+                        'views/partials/social-media',
+                        null,
+                        array(
+                            'circle'  => true,
+                            'classes' => 'social-icons p-0 text-18px',
+                        )
+                    );
+                    ?>
+                </div>
 
-		<div class="copyright bg-primary text-white text-center py-3 text-14px">
-			<?php
-			if ( $copyright ) {
-				echo wp_kses_post( $copyright );
-			} else {
-				echo esc_html( '&copy; ' . gmdate( 'Y' ) . ' ' . get_bloginfo( 'name' ) . '.' );
-			}
-			?>
-		</div>
+                <div class="copyright text-white text-right py-3 text-12px">
+                    <?php
+                    if ( $copyright ) {
+                        echo wp_kses_post( $copyright );
+                    } else {
+                        echo esc_html( '&copy; ' . gmdate( 'Y' ) . ' ' . get_bloginfo( 'name' ) . '.' );
+                    }
+                    ?>
+                </div>
+            </div>
+        </div>
 	</footer>
 
 	<?php wp_footer(); ?>
diff --git a/static/js/components/backToTop.js b/static/js/components/backToTop.js
index 8a0ce2b..ce4a940 100644
--- a/static/js/components/backToTop.js
+++ b/static/js/components/backToTop.js
@@ -2,23 +2,21 @@
 class BackToTopButton extends HTMLElement {
     connectedCallback() {
         this.innerHTML = `
-            <button id="backToTopBtn" aria-label="Back to top" class="back-to-top" style="">
-                ↑ Top
-            </button>
+            <button id="backToTopBtn" aria-label="Back to top" class="back-to-top" style=""><i class="icon-arrow-upward"></i></button>
         `;
 
         const btn = this.querySelector('#backToTopBtn');
 
-        let previousScrollY = window.scrollY;
+        // let previousScrollY = window.scrollY;
 
-        window.addEventListener('scroll', () => {
-            const currentScrollY = window.scrollY;
-            const isScrollingUp = currentScrollY < previousScrollY;
-            const shouldShowButton = currentScrollY > 300 && isScrollingUp;
+        // window.addEventListener('scroll', () => {
+        //     const currentScrollY = window.scrollY;
+        //     const isScrollingUp = currentScrollY < previousScrollY;
+        //     const shouldShowButton = currentScrollY > 300 && isScrollingUp;
 
-            btn.style.display = shouldShowButton ? 'block' : 'none';
-            previousScrollY = currentScrollY;
-        });
+        //     btn.style.display = shouldShowButton ? 'block' : 'none';
+        //     previousScrollY = currentScrollY;
+        // });
 
         btn.addEventListener('click', () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -27,7 +25,7 @@ class BackToTopButton extends HTMLElement {
 }
 
 export function registerBackToTopButton() {
-    if (!customElements.get('back-to-top')) {
-        customElements.define('back-to-top', BackToTopButton);
+    if (!customElements.get('x-back-to-top')) {
+        customElements.define('x-back-to-top', BackToTopButton);
     }
 }
diff --git a/static/js/theme.js b/static/js/theme.js
index 3d6e871..c1e01ed 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -10,41 +10,41 @@ import Navigation from './modules/Navigation.js';
 
 // Add passive event listeners
 ! function (e) {
-  "function" == typeof define && define.amd ? define(e) : e()
+    "function" == typeof define && define.amd ? define(e) : e()
 }(function () {
-  let e;
-  const t = ["scroll", "wheel", "touchstart", "touchmove", "touchenter", "touchend", "touchleave", "mouseout", "mouseleave", "mouseup", "mousedown", "mousemove", "mouseenter", "mousewheel", "mouseover"];
-  if (function () {
-    let e = !1;
-    try {
-      const t = Object.defineProperty({}, "passive", {
-        get: function () {
-          e = !0
-        }
-      });
-      window.addEventListener("test", null, t);
-      window.removeEventListener("test", null, t);
-    } catch (e) { }
-    return e
-  }()) {
-    const n = EventTarget.prototype.addEventListener;
-    e = n;
-    EventTarget.prototype.addEventListener = function (n, o, r) {
-      let i;
-      const s = "object" == typeof r && null !== r,
-        u = s ? r.capture : r;
-      if (s) {
-        const t = Object.getOwnPropertyDescriptor(r, "passive");
-        r = t && !0 !== t.writable && void 0 === t.set ? { ...r } : r;
-      } else {
-        r = {};
-      }
-      r.passive = void 0 !== (i = r.passive) ? i : -1 !== t.indexOf(n) && !0;
-      r.capture = void 0 !== u && u;
-      e.call(this, n, o, r);
-    };
-    EventTarget.prototype.addEventListener._original = e
-  }
+    let e;
+    const t = ["scroll", "wheel", "touchstart", "touchmove", "touchenter", "touchend", "touchleave", "mouseout", "mouseleave", "mouseup", "mousedown", "mousemove", "mouseenter", "mousewheel", "mouseover"];
+    if (function () {
+        let e = !1;
+        try {
+            const t = Object.defineProperty({}, "passive", {
+                get: function () {
+                    e = !0
+                }
+            });
+            window.addEventListener("test", null, t);
+            window.removeEventListener("test", null, t);
+        } catch (e) { }
+        return e
+    }()) {
+        const n = EventTarget.prototype.addEventListener;
+        e = n;
+        EventTarget.prototype.addEventListener = function (n, o, r) {
+            let i;
+            const s = "object" == typeof r && null !== r,
+                u = s ? r.capture : r;
+            if (s) {
+                const t = Object.getOwnPropertyDescriptor(r, "passive");
+                r = t && !0 !== t.writable && void 0 === t.set ? { ...r } : r;
+            } else {
+                r = {};
+            }
+            r.passive = void 0 !== (i = r.passive) ? i : -1 !== t.indexOf(n) && !0;
+            r.capture = void 0 !== u && u;
+            e.call(this, n, o, r);
+        };
+        EventTarget.prototype.addEventListener._original = e
+    }
 });
 
 /**
@@ -69,8 +69,8 @@ document.addEventListener('DOMContentLoaded', () => {
     GetHeaderHeight();
 
     // Add Back to Top button to body
-    const backToTop = document.createElement('back-to-top');
-    document.body.appendChild(backToTop);
+    // const backToTop = document.createElement('x-back-to-top');
+    // document.body.appendChild(backToTop);
 });
 
 console.log(`theme.js loaded.`);
diff --git a/styles/base/colors.css b/styles/base/colors.css
index ef6c388..1ec82b1 100644
--- a/styles/base/colors.css
+++ b/styles/base/colors.css
@@ -7,9 +7,9 @@
     --color-background: oklch(89.75% 0 0);
     --color-text:       var(--color-black);
 
-    --color-cwc-blue-01: oklch(47.31% 0.1141 242.9);
-    --color-cwc-blue-02: oklch(28.99% 0.0614 237.9);
-    --color-cwc-blue-03: oklch(80.63% 0.0724 230.4);
+    --color-cwc-blue-01:   oklch(47.31% 0.1141 242.9);
+    --color-cwc-blue-02:   oklch(28.99% 0.0614 237.9);
+    --color-cwc-blue-03:   oklch(80.63% 0.0724 230.4);
     --color-cwc-orange-01: oklch(63.53% 0.1751 29.61);
 
     --color-primary:     var(--color-cwc-blue-01);
diff --git a/styles/base/typography.css b/styles/base/typography.css
index 4fd08d9..a1b4f37 100644
--- a/styles/base/typography.css
+++ b/styles/base/typography.css
@@ -20,6 +20,7 @@
  * Font sizes at standard viewport widths:
  *           | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px
  * --------- | ----- | ----- | ----- | ------ | ------ | ------ | ------
+ * text-12px | 10.00 | 10.36 | 10.52 |  10.85 |  11.18 |  11.38 |  12.00
  * text-14px | 12.00 | 12.36 | 12.52 |  12.85 |  13.18 |  13.38 |  14.00
  * text-16px | 14.00 | 14.36 | 14.52 |  14.85 |  15.18 |  15.38 |  16.00
  * text-18px | 16.00 | 16.36 | 16.52 |  16.85 |  17.18 |  17.38 |  18.00
@@ -41,6 +42,7 @@
     --line-height: 1.6;
 
     --text-base: 1rem;
+    --text-12px: round(down, clamp(0.625rem, 0.5962rem + 0.1282vw, 0.75rem), 1px);
     --text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 2px);
     --text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 2px);
     --text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 2px);
diff --git a/styles/blocks/buttons.css b/styles/blocks/buttons.css
index e90c843..e608e0a 100644
--- a/styles/blocks/buttons.css
+++ b/styles/blocks/buttons.css
@@ -76,24 +76,6 @@
 
 .btn:active, .button:active { transform: scale(99%); }
 
-/* Back To Top Button */
-#backToTopBtn {
-    background: var(--color-primary);
-    border: none;
-    border-radius: 2em;
-    bottom: 2rem;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    color: #fff;
-    cursor: pointer;
-    display: none;
-    font-size: 1.1rem;
-    padding: 0.75em 1.5em;
-    position: fixed;
-    right: 2rem;
-    transition: opacity 0.2s;
-    z-index: 1000;
-}
-
 /**
  * Variants
  *
@@ -159,21 +141,35 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
     --button-hover-color:        var(--color-dark);
 }
 
-.back-to-top {
-    background: var(--color-primary, #3857BC);
-    border: none;
-    border-radius: 2em;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-    color: #fff;
+/* Back To Top Button */
+#backToTopBtn {
+    align-items: center;
+    background: var(--color-secondary);
+    border: 1px solid transparent;
+    border-radius: 100%;
+    color: var(--color-white);
     cursor: pointer;
-    font-size: 1.1rem;
-    opacity: 0.85;
-    padding: 0.75em 1.5em;
+    display: flex;
+    font-size: 1rem;
+    height: 1rem;
+    justify-content: center;
+    line-height: 1;
+    outline: 1px solid transparent;
+    padding: 1rem;
     transition: opacity 0.2s, background 0.2s;
-}
+    width: 1rem;
 
-.back-to-top:hover, .back-to-top:focus {
-    background: var(--color-info, #233a7a);
-    opacity: 1;
-    outline: 2px solid var(--color-info, #233a7a);
+    i {
+        font-weight: bold;
+        display: inline-block;
+        margin: -4px 0 0 0;
+    }
+
+    &:hover, &:focus {
+        background: var(--color-secondary-800);
+        border: 1px solid var(--color-secondary);
+        color: var(--color-white);
+        opacity: 1;
+        outline: 1px solid var(--color-secondary);
+    }
 }
diff --git a/styles/components/site-footer.css b/styles/components/site-footer.css
index 4c5437b..f5aae3f 100644
--- a/styles/components/site-footer.css
+++ b/styles/components/site-footer.css
@@ -1,41 +1,21 @@
 /* Footer styles */
 
 .site-footer {
-  #footRight {
-    div {
-      @apply col-span-1 md:col-span-4 lg:col-span-1;
+    border-bottom: 1rem solid var(--color-orange, #F26B53);
 
-      h3 {
-        @apply font-bold text-secondary-300 text-20px mb-4 pb-2 border-b border-b-secondary-300
-      }
-
-      a {
-        @apply text-footlinks hover:opacity-60;
-      }
-    }
+    a { @apply text-white transition-colors duration-300 hover:text-secondary-400 focus-visible:text-secondary-400; }
 
     .widget {
-      li {
-        @apply text-16px my-1 mb-2 leading-4;
-      }
+        li { @apply text-16px my-1 mb-2 leading-4; }
 
-      h4 {
-        @apply font-bold text-18px text-secondary mb-2;
-      }
-
-      a {
-        @apply transition-colors duration-300 hover:text-success focus-visible:text-success;
-      }
+        h4 { @apply font-bold text-18px text-secondary mb-2; }
     }
 
-    .menu-footer-menu-container {
-      @apply grow;
+    .menu-footer-menu-container { @apply grow; }
+
+    .copyright {
+        p { @apply text-white leading-none m-0 p-0; }
+
+        a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
     }
-  }
-
-  .copyright {
-    p { @apply leading-none m-0 p-0; }
-
-    a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
-  }
 }
diff --git a/styles/fonts/lineicons.css b/styles/fonts/lineicons.css
index 0b6410c..989ab31 100644
--- a/styles/fonts/lineicons.css
+++ b/styles/fonts/lineicons.css
@@ -26,7 +26,8 @@ Lineicons regular icon font
     /* For safety - reset parent styles, that can break glyph codes*/
     font-variant: normal;
     text-transform: none;
-    font-size: 120%;
+    font-size: 110%;
+    line-height: 1;
     /* Font smoothing. That was taken from TWBS */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -37,11 +38,21 @@ Lineicons regular icon font
     */
 }
 
+.social-links{
+    @apply flex flex-row justify-end w-full;
+
+    a {
+        margin-right: 1rem;
+
+        &:last-child { margin-right: 0 !important; }
+    }
+}
+
 /* Circular Icons */
 .circular-icon {
-    @apply box-content bg-secondary rounded-full text-gray-800 inline-block;
+    @apply box-content bg-secondary rounded-full text-white flex justify-center items-center;
 
-    --size: 3rem;
+    --size: 2rem;
     height: var(--size);
     text-align: center;
     width: var(--size);
@@ -49,7 +60,8 @@ Lineicons regular icon font
     i {
         display: inline-block;
         height: var(--size);
-        line-height: var(--size);
+        line-height: 1;
+        margin-top: 0.5rem;
         text-align: center;
         vertical-align: middle;
         width: var(--size);
diff --git a/views/blocks/contact-block/contact-block.php b/views/blocks/contact-block/contact-block.php
index 59d8079..bd32083 100644
--- a/views/blocks/contact-block/contact-block.php
+++ b/views/blocks/contact-block/contact-block.php
@@ -52,5 +52,4 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
 			></x-button>
 		<?php endif; ?>
 	</div>
-
 </section>