diff --git a/packages/vue-component-library/src/lib-components/NavPrimary.vue b/packages/vue-component-library/src/lib-components/NavPrimary.vue
index 79ed965a7..a79009915 100644
--- a/packages/vue-component-library/src/lib-components/NavPrimary.vue
+++ b/packages/vue-component-library/src/lib-components/NavPrimary.vue
@@ -154,7 +154,8 @@ defineExpose({ closeSlot })
 const { width } = useWindowSize()
 
 // Use computed to check if it's mobile based on window width
-const isMobile = computed(() => width.value <= 750) // Use 750px for mobile breakpoint
+const mobileBreakpoint = 850 // change scss breakpoints in ftva _header-sticky.scss, _nav-primary.scss, _site-brand-bar.scss
+const isMobile = computed(() => width.value <= mobileBreakpoint) // Use 850px for mobile breakpoint
 
 // toggle Mobile-only menu
 function toggleMobileMenu() {
diff --git a/packages/vue-component-library/src/styles/ftva/_header-sticky.scss b/packages/vue-component-library/src/styles/ftva/_header-sticky.scss
index c67d7adac..868c615ab 100644
--- a/packages/vue-component-library/src/styles/ftva/_header-sticky.scss
+++ b/packages/vue-component-library/src/styles/ftva/_header-sticky.scss
@@ -18,7 +18,7 @@
             line-height: normal;
         }
     }
-    @media #{$small} {
+    @media (max-width: 850px) {
         .primary {
             padding-inline: 18px;
         }
diff --git a/packages/vue-component-library/src/styles/ftva/_nav-primary.scss b/packages/vue-component-library/src/styles/ftva/_nav-primary.scss
index 4c794044e..72c903846 100644
--- a/packages/vue-component-library/src/styles/ftva/_nav-primary.scss
+++ b/packages/vue-component-library/src/styles/ftva/_nav-primary.scss
@@ -113,7 +113,7 @@
     }
 
     // MOBILE MENU STYLES
-    @media #{$small} {
+    @media (max-width: 850px) {
         display: flex;
         flex-direction: column;
         grid-auto-flow: unset;
diff --git a/packages/vue-component-library/src/styles/ftva/_site-brand-bar.scss b/packages/vue-component-library/src/styles/ftva/_site-brand-bar.scss
index 03cf54658..81d808cf1 100644
--- a/packages/vue-component-library/src/styles/ftva/_site-brand-bar.scss
+++ b/packages/vue-component-library/src/styles/ftva/_site-brand-bar.scss
@@ -1,6 +1,6 @@
 .ftva.site-brand-bar {
     background-color: var(--ftva-off-black);
-    height: 110px;
+    height: 0px;
     .ucla-text {
         @include ftva-site-wordmark;
         color: white;
@@ -10,4 +10,7 @@
             text-transform: uppercase;
         }
     }
+    @media (min-width: 850px) {
+        height: 110px;
+    }
 }
\ No newline at end of file