diff --git a/my_compassion/views/my2_header_menu.xml b/my_compassion/views/my2_header_menu.xml
index 8beaf0ec0..45c4cf4a9 100644
--- a/my_compassion/views/my2_header_menu.xml
+++ b/my_compassion/views/my2_header_menu.xml
@@ -1,5 +1,11 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <odoo>
+    <!-- Hide default cart -->
+    <template id="remove_native_cart" inherit_id="website_sale.template_header_default" name="Remove Native Cart">
+        <xpath expr="//t[@t-call='website_sale.header_cart_link']" position="attributes">
+            <attribute name="t-if">False</attribute>
+        </xpath>
+    </template>
     <template id="my_compassion_dynamic_menu" inherit_id="website.template_header_default">
         <xpath expr="//div[@id='top_menu_collapse']/*[1]" position="before">
             <t t-if="request.session.uid">
@@ -27,7 +33,32 @@
                             <a class="nav-link" href="/my2/donations">My donations</a>
                         </li>
                     </t>
-                    <li class="nav-item d-flex d-md-none align-items-center">
+                    <!-- Add cart and language selector to mobile menu -->
+                    <li
+                        class="nav-item d-flex d-lg-none align-items-center justify-content-between w-100 mt-3 pt-3 border-top"
+                    >
+                        <ul class="navbar-nav flex-row mb-0">
+                            <t t-call="website_sale.header_cart_link">
+                                <t t-set="_icon" t-value="True" />
+                                <t t-set="_item_class" t-value="'nav-item'" />
+                                <t t-set="_link_class" t-value="'nav-link'" />
+                            </t>
+                        </ul>
+                        <div class="d-block d-md-none">
+                            <t t-call="portal.language_selector" />
+                        </div>
+                    </li>
+                    <!-- Add cart to desktop menu -->
+                    <t t-call="website_sale.header_cart_link">
+                        <t t-set="_icon" t-value="True" />
+                        <t t-set="_item_class" t-value="'nav-item d-none d-lg-block'" />
+                        <t t-set="_link_class" t-value="'nav-link'" />
+                    </t>
+                </ul>
+            </t>
+            <t t-else="">
+                <ul class="navbar-nav w-100 d-flex d-md-none mt-5">
+                    <li class="nav-item d-flex justify-content-end w-100 pt-3 pr-2">
                         <t t-call="portal.language_selector" />
                     </li>
                 </ul>
diff --git a/theme_compassion_2025/static/src/scss/components/_language_selector.scss b/theme_compassion_2025/static/src/scss/components/_language_selector.scss
index 6e6402d94..439a59e99 100644
--- a/theme_compassion_2025/static/src/scss/components/_language_selector.scss
+++ b/theme_compassion_2025/static/src/scss/components/_language_selector.scss
@@ -112,17 +112,38 @@
     .js_language_selector {
         flex-direction: column;
         align-items: stretch;
-        height: 100%;
+        height: auto;
+
+        /* change color to match menu items */
+        .btn,
+        .btn .icon-chevron-down,
+        .dropdown-menu .dropdown-item {
+            color: rgba(0, 0, 0, 0.5) !important;
+        }
+
+        /* Increase language selector size */
+        .btn {
+            font-size: 1.5rem;
+            min-height: 48px;
+        }
     }
 
+    /* Makes sure dropdown expands towards the bottom
+       and doesn't push parent up.
+     */
     .language-selector__dropdown-menu {
-        position: static !important;
+        position: absolute !important;
+        top: 100% !important;
+        bottom: auto !important;
+        right: 0 !important;
+        left: auto !important;
+        font-size: 1.25rem !important;
+
         transform: none !important;
+        margin-top: 0.5rem;
+        width: max-content;
     }
 
-    .language-selector__icon_left {
-          display: none !important;
-      }
 
     /* Mobile-Specific Animation
        Desktop 'scaleY' animation can look weird in flow layout.
@@ -135,6 +156,7 @@
 
     .animation-drop.show {
         animation: mobileAccordionDrop 0.3s ease-out forwards;
+        display: block !important;
     }
 }
 
diff --git a/theme_compassion_2025/static/src/scss/layout/_header.scss b/theme_compassion_2025/static/src/scss/layout/_header.scss
index 8f416753e..7bdca8b4e 100644
--- a/theme_compassion_2025/static/src/scss/layout/_header.scss
+++ b/theme_compassion_2025/static/src/scss/layout/_header.scss
@@ -30,3 +30,58 @@
     }
   }
 }
+
+/* Off-canvas mobile menu (Left to Right) */
+@include media-breakpoint-down(md) {
+    #top_menu_collapse {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 85vw;
+        max-width: 350px;
+        background-color: $white;
+        z-index: $zindex-fixed + 10;
+        overflow-y: auto;
+        padding: 1rem;
+        box-shadow: 0.5rem 0 1rem rgba(0, 0, 0, 0.15);
+
+        /* Override Bootstrap's default collapse vertical behavior */
+        display: block !important;
+        visibility: hidden;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        height: 100vh !important;
+        max-height: 100vh !important;
+
+        /* Slide in when active */
+        &.show {
+            visibility: visible;
+            transform: translateX(0);
+            max-height: 100vh !important;
+        }
+
+        /* Override the vertical collapsing animation */
+        &.collapsing {
+            visibility: visible;
+            transform: translateX(-100%);
+            transition: transform 0.3s ease-in-out;
+            overflow: hidden;
+        }
+        .nav-item {
+            /* Increase font size and add padding for mobile UX */
+            .nav-link {
+                font-size: 1.25rem !important;
+                padding: 0.75rem;
+            }
+        }
+    }
+
+  #menu_close {
+    position:absolute;
+    top: 0;
+    right: 1.5rem;
+    z-index: $zindex-fixed + 11;
+    font-size: 4rem;
+  }
+}
diff --git a/theme_compassion_2025/views/template_header.xml b/theme_compassion_2025/views/template_header.xml
index f5eccf2b2..ebdfc6793 100644
--- a/theme_compassion_2025/views/template_header.xml
+++ b/theme_compassion_2025/views/template_header.xml
@@ -1,11 +1,14 @@
 <!-- oca-hooks:disable=xml-dangerous-qweb-replace-low-priority -->
 <odoo>
     <template id="template_header_default" inherit_id="website.template_header_default">
-        <!-- Move the hamburger menu to the left -->
+        <!-- Move the hamburger menu to the left & hide on md screens -->
         <xpath expr="//t[@t-call='website.navbar_toggler']" position="replace" />
         <xpath expr="//t[@t-call='website.placeholder_header_brand']" position="before">
             <t t-call="website.navbar_toggler">
-                <t t-set="_toggler_class" t-value="'mr-4 text-primary'" />
+                <t
+                    t-set="_toggler_class"
+                    t-value="'mr-4 text-primary d-md-none' if not request.session.uid else 'mr-4 text-primary'"
+                />
             </t>
         </xpath>
         <!-- Improve the layout of the navbar and add the svg -->
@@ -30,6 +33,19 @@
         <xpath expr="//div[@id='top_menu_collapse']" position="before">
             <div class="flex-grow-1" />
         </xpath>
+        <!-- Add a close button inside the menu -->
+        <xpath expr="//div[@id='top_menu_collapse']" position="inside">
+            <button
+                id="menu_close"
+                type="button"
+                class="close d-lg-none position-absolute"
+                aria-label="Close"
+                data-toggle="collapse"
+                data-target="#top_menu_collapse"
+            >
+                <span aria-hidden="true">&amp;times;</span>
+            </button>
+        </xpath>
         <!-- Move the login button out of the main menu and adapt its style -->
         <xpath expr="//t[@t-call='portal.placeholder_user_sign_in']" position="replace" />
         <xpath expr="//t[@t-call='portal.user_dropdown']" position="replace" />
@@ -38,7 +54,8 @@
                 <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-4'" />
                 <t t-set="_link_class" t-value="'nav-link font-weight-bold'" />
             </t>
-            <div class="d-none d-md-block ml-lg-3">
+            <!-- Add a language selector to the left of the user dropdown on desktop -->
+            <div class="d-none d-md-block ml-md-3">
                 <t t-call="portal.language_selector" />
             </div>
         </xpath>