diff --git a/app/assets/javascripts/discourse/app/widgets/header-contents.js b/app/assets/javascripts/discourse/app/widgets/header-contents.js
index f3f4225e8d1..7a5ccf8df4e 100644
--- a/app/assets/javascripts/discourse/app/widgets/header-contents.js
+++ b/app/assets/javascripts/discourse/app/widgets/header-contents.js
@@ -2,18 +2,16 @@ import { createWidget } from "discourse/widgets/widget";
 import hbs from "discourse/widgets/hbs-compiler";
 
 createWidget("header-contents", {
-  tagName: "div.contents",
+  tagName: "div.contents.clearfix",
   template: hbs`
-    <div class="header-logo-wrapper">
-      {{#if this.site.desktopView}}
-        {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
-          {{#if attrs.sidebarEnabled}}
-            {{sidebar-toggle attrs=attrs}}
-          {{/if}}
+    {{#if this.site.desktopView}}
+      {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
+        {{#if attrs.sidebarEnabled}}
+          {{sidebar-toggle attrs=attrs}}
         {{/if}}
       {{/if}}
-      {{home-logo attrs=attrs}}
-    </div>
+    {{/if}}
+    {{home-logo attrs=attrs}}
     {{#if attrs.topic}}
       {{header-topic-info attrs=attrs}}
     {{/if}}
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index a2d90af3d9d..75afb83d929 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -19,32 +19,33 @@
     height: 100%;
 
     .contents {
-      display: grid;
-      grid-template-areas: "logo-wrapper extra-info panel";
-      grid-template-columns: auto 1fr auto;
+      display: flex;
       align-items: center;
       height: 100%;
 
-      .has-sidebar-page & {
-        // 10px is a .wrap padding
-        grid-template-columns:
-          minmax(calc(var(--d-sidebar-width) - 10px), auto)
-          1fr auto;
+      .header-row {
+        width: 100%;
+
+        .logo-wrapper {
+          float: left;
+        }
+        .auth-buttons {
+          float: right;
+          margin-top: 0.4em;
+
+          .login-button,
+          .signup-button {
+            padding: 8px 14px;
+          }
+        }
       }
     }
   }
 
-  .header-logo-wrapper {
-    grid-area: logo-wrapper;
-    display: flex;
-    align-items: center;
-  }
-
   .title {
     display: flex;
     align-items: center;
     height: 100%;
-
     a,
     a:visited {
       color: var(--header_primary);
@@ -60,10 +61,10 @@
   }
 
   .panel {
-    grid-area: panel;
     position: relative;
     display: flex;
     flex: 0 0 auto;
+    margin-left: auto;
     align-items: center;
   }
 
@@ -211,8 +212,6 @@
 }
 
 .header-sidebar-toggle {
-  grid-area: hamburger;
-
   button {
     margin-right: 1em;
     box-sizing: content-box; // matches other header icons
@@ -243,7 +242,6 @@
 
 // topic info in the header
 .extra-info-wrapper {
-  grid-area: extra-info;
   display: flex;
   align-items: center;
   height: 100%;
@@ -251,7 +249,6 @@
   padding: 0 1.5em 0 0.5em;
   // we need to hide overflow in both to truncate the title in a flexbox
   overflow: hidden;
-
   .extra-info {
     overflow: hidden;
     width: 100%;
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 564b57fac57..780aa903ef5 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -199,3 +199,19 @@ body.has-sidebar-page {
     padding-left: 0;
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  body.sidebar-animate {
+    #main-outlet-wrapper {
+      //  grid-template-columns transition supported in Firefox, Chrome support coming summer 2022
+      transition-property: grid-template-columns, max-width;
+      transition-timing-function: var(--d-sidebar-animation-ease);
+      transition-duration: var(--d-sidebar-animation-time);
+    }
+
+    .d-header-wrap .wrap {
+      transition: max-width var(--d-sidebar-animation-time)
+        var(--d-sidebar-animation-ease);
+    }
+  }
+}