diff --git a/desktop/desktop.scss b/desktop/desktop.scss
index 59bc5fb..afb22ed 100644
--- a/desktop/desktop.scss
+++ b/desktop/desktop.scss
@@ -1,315 +1,2 @@
-// Full width layout
-
-$sidebar-width: 17em;
-
-.wrap {
-  max-width: unset; // undoing core default
-}
-
-.d-header #site-logo {
-  // constraining the logo to fit its grid container
-  // this prevents the logo from shifting header content
-  // when the sidebar is opened
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain; // contains logo without squishing/stretching
-}
-
-#main-outlet-wrapper {
-  padding: 0;
-
-  body.has-sidebar-page & {
-    .sidebar-wrapper {
-      width: var(--d-sidebar-width);
-    }
-  }
-
-  body.has-full-page-chat & {
-    gap: 0;
-  }
-
-  .sidebar-wrapper {
-    width: 100%; // safari has issues without this
-  }
-
-  #main-outlet {
-    margin: 0 auto;
-    max-width: var(--d-max-width);
-    width: 100%;
-
-    body.has-full-page-chat & {
-      max-width: unset;
-    }
-  }
-}
-
-.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
-  border: none;
-}
-
-#main-outlet > .regular {
-  max-width: var(--d-max-width);
-  margin: 0 auto;
-
-  body.has-sidebar-page & {
-    margin: 0 auto;
-  }
-}
-
-.d-header .title:not(.title--minimized) {
-  // allowing overflow here isn't always ideal
-  // but works well enough most of the time
-  overflow: visible;
-}
-
-.d-header {
-  > .wrap {
-    .contents {
-      display: grid;
-      grid-template-areas: "logo lspace extra-info rspace panel";
-      grid-template-columns:
-        minmax(auto, 1fr)
-        auto
-        minmax(0, calc(var(--d-max-width)))
-        auto
-        minmax(auto, 1fr);
-
-      .d-header-mode {
-        grid-area: extra-info;
-        white-space: nowrap;
-
-        @include breakpoint("tablet") {
-          display: none;
-        }
-      }
-
-      .d-header .title {
-        min-width: auto;
-      }
-
-      .has-sidebar-page & {
-        // at wide widths, when 1fr > 0
-        // we want the panel to be the same width as the sidebar
-        // this way we can get more accurate centering
-        grid-template-columns:
-          calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
-          1fr
-          minmax(0, calc(var(--d-max-width)))
-          1fr
-          minmax(0, calc(var(--d-sidebar-width) - 11px));
-        gap: 1em;
-
-        // at narrower widths, when 1fr = 0
-        // we can center without matching the sidebar's width
-        // which allows the title to take up the remaining width
-        @media screen and (max-width: 1400px) {
-          grid-template-columns:
-            calc(var(--d-sidebar-width) - 11px)
-            1fr
-            minmax(0, calc(var(--d-max-width)))
-            1fr
-            auto;
-        }
-
-        @media screen and (max-width: 1000px) {
-          gap: 0.5em;
-        }
-
-        .d-header-mode {
-          grid-area: extra-info;
-        }
-      }
-    }
-  }
-
-  .header-sidebar-toggle {
-    grid-area: logo;
-  }
-
-  .before-header-panel-outlet {
-    grid-area: extra-info;
-  }
-
-  .d-header-mode {
-    .bootstrap-mode {
-      margin: 0;
-    }
-  }
-
-  .home-logo-wrapper-outlet {
-    grid-area: logo;
-    margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
-    margin-right: 0.725em;
-    display: flex;
-    overflow: visible;
-
-    .title {
-      flex: 1 0 auto;
-    }
-  }
-
-  .panel {
-    grid-area: panel;
-  }
-}
-
-.extra-info-wrapper {
-  grid-area: extra-info;
-  max-width: var(--d-max-width);
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.header-search--enabled .floating-search-input-wrapper {
-  grid-area: extra-info;
-
-  @include breakpoint(tablet) {
-    grid-area: rspace;
-  }
-
-  @include breakpoint(mobile-extra-large) {
-    display: none;
-  }
-}
-
-body.has-sidebar-page {
-  .wrap {
-    max-width: unset; // undoing core default
-  }
-
-  .d-header-mode,
-  .extra-info-wrapper {
-    padding: 0;
-  }
-
-  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
-    #reply-control.show-preview {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .sidebar-container {
-      height: auto;
-    }
-  }
-
-  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
-    #reply-control.show-preview:not(.fullscreen) {
-      margin-left: $sidebar-width;
-      width: auto;
-
-      // overruling new core composer changes
-      max-width: $reply-area-max-width;
-      transform: none;
-    }
-
-    .sidebar-container {
-      height: auto;
-    }
-  }
-
-  // overruling new core composer changes
-  @media screen and (min-width: $reply-area-max-width) {
-    #reply-control.show-preview:not(.fullscreen) {
-      max-width: $reply-area-max-width;
-      transform: none;
-    }
-  }
-}
-
-body.sidebar-animate {
-  #main-outlet-wrapper {
-    transition: none;
-  }
-
-  .d-header-wrap .wrap {
-    transition: none;
-  }
-}
-
-.d-header-icons {
-  display: flex;
-}
-
-.rtl {
-  .d-header .title {
-    margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
-    margin-left: 0.725em;
-  }
-}
-
-// provides some extra space for login buttons
-@media screen and (min-width: 1400px) {
-  .anon {
-    .d-header .panel {
-      grid-column-start: -4;
-    }
-  }
-}
-
-// Fixing bulk select (only needed for desktop)
-
-.bulk-select-enabled {
-  .topic-list-header .topic-list-data.default {
-    position: sticky;
-    top: 10em;
-  }
-  .topic-author-avatar-data {
-    display: none;
-  }
-
-  .bulk-select.topic-list-data {
-    grid-area: bulk-select;
-    margin-left: -0.5em;
-
-    @media screen and (max-width: 576px) {
-      margin-top: 0;
-      label {
-        padding-block: 0.345em;
-      }
-    }
-
-    input {
-      transform: scale(1.5);
-    }
-  }
-}
-
-.topic-list-header {
-  tr {
-    border: none;
-  }
-
-  .topic-list-data {
-    padding: 0;
-
-    &:not(.default) {
-      display: none;
-    }
-
-    &.default {
-      position: absolute;
-      right: 0;
-      .bulk-select,
-      span:not(.bulk-select-topics, .d-button-label) {
-        display: none;
-      }
-    }
-  }
-
-  .bulk-select-topics {
-    position: absolute;
-    right: -1em;
-    @media screen and (max-width: 1048px) {
-      right: 0;
-    }
-
-    background: var(--secondary);
-    border-radius: 0 0 0 var(--d-border-radius);
-    padding: 1em;
-    button {
-      white-space: nowrap;
-    }
-  }
-}
+@import "desktop-horizon-fixes";
+@import "desktop-full-width";
diff --git a/scss/desktop-full-width.scss b/scss/desktop-full-width.scss
new file mode 100644
index 0000000..a581c15
--- /dev/null
+++ b/scss/desktop-full-width.scss
@@ -0,0 +1,255 @@
+// Full width layout. Ported from the Discourse Full Width theme component here
+// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
+// intend to move into core over time.
+//
+// We are copying this here so we can continue to iterate on Horizon with full
+// width without having to include the theme component as a dependency, we
+// need to remove this once full width is in core.
+
+$sidebar-width: 17em;
+
+.wrap {
+  max-width: unset; // undoing core default
+}
+
+.d-header #site-logo {
+  // constraining the logo to fit its grid container
+  // this prevents the logo from shifting header content
+  // when the sidebar is opened
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain; // contains logo without squishing/stretching
+}
+
+#main-outlet-wrapper {
+  padding: 0;
+
+  body.has-sidebar-page & {
+    .sidebar-wrapper {
+      width: var(--d-sidebar-width);
+    }
+  }
+
+  body.has-full-page-chat & {
+    gap: 0;
+  }
+
+  .sidebar-wrapper {
+    width: 100%; // safari has issues without this
+  }
+
+  #main-outlet {
+    margin: 0 auto;
+    max-width: var(--d-max-width);
+    width: 100%;
+
+    body.has-full-page-chat & {
+      max-width: unset;
+    }
+  }
+}
+
+.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
+  border: none;
+}
+
+#main-outlet > .regular {
+  max-width: var(--d-max-width);
+  margin: 0 auto;
+
+  body.has-sidebar-page & {
+    margin: 0 auto;
+  }
+}
+
+.d-header .title:not(.title--minimized) {
+  // allowing overflow here isn't always ideal
+  // but works well enough most of the time
+  overflow: visible;
+}
+
+.d-header {
+  > .wrap {
+    .contents {
+      display: grid;
+      grid-template-areas: "logo lspace extra-info rspace panel";
+      grid-template-columns:
+        minmax(auto, 1fr)
+        auto
+        minmax(0, calc(var(--d-max-width)))
+        auto
+        minmax(auto, 1fr);
+
+      .d-header-mode {
+        grid-area: extra-info;
+        white-space: nowrap;
+
+        @include breakpoint("tablet") {
+          display: none;
+        }
+      }
+
+      .d-header .title {
+        min-width: auto;
+      }
+
+      .has-sidebar-page & {
+        // at wide widths, when 1fr > 0
+        // we want the panel to be the same width as the sidebar
+        // this way we can get more accurate centering
+        grid-template-columns:
+          calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
+          1fr
+          minmax(0, calc(var(--d-max-width)))
+          1fr
+          minmax(0, calc(var(--d-sidebar-width) - 11px));
+        gap: 1em;
+
+        // at narrower widths, when 1fr = 0
+        // we can center without matching the sidebar's width
+        // which allows the title to take up the remaining width
+        @media screen and (max-width: 1400px) {
+          grid-template-columns:
+            calc(var(--d-sidebar-width) - 11px)
+            1fr
+            minmax(0, calc(var(--d-max-width)))
+            1fr
+            auto;
+        }
+
+        @media screen and (max-width: 1000px) {
+          gap: 0.5em;
+        }
+
+        .d-header-mode {
+          grid-area: extra-info;
+        }
+      }
+    }
+  }
+
+  .header-sidebar-toggle {
+    grid-area: logo;
+  }
+
+  .before-header-panel-outlet {
+    grid-area: extra-info;
+  }
+
+  .d-header-mode {
+    .bootstrap-mode {
+      margin: 0;
+    }
+  }
+
+  .home-logo-wrapper-outlet {
+    grid-area: logo;
+    margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
+    margin-right: 0.725em;
+    display: flex;
+    overflow: visible;
+
+    .title {
+      flex: 1 0 auto;
+    }
+  }
+
+  .panel {
+    grid-area: panel;
+  }
+}
+
+.extra-info-wrapper {
+  grid-area: extra-info;
+  max-width: var(--d-max-width);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.header-search--enabled .floating-search-input-wrapper {
+  grid-area: extra-info;
+
+  @include breakpoint(tablet) {
+    grid-area: rspace;
+  }
+
+  @include breakpoint(mobile-extra-large) {
+    display: none;
+  }
+}
+
+body.has-sidebar-page {
+  .wrap {
+    max-width: unset; // undoing core default
+  }
+
+  .d-header-mode,
+  .extra-info-wrapper {
+    padding: 0;
+  }
+
+  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
+    #reply-control.show-preview {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .sidebar-container {
+      height: auto;
+    }
+  }
+
+  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
+    #reply-control.show-preview:not(.fullscreen) {
+      margin-left: $sidebar-width;
+      width: auto;
+
+      // overruling new core composer changes
+      max-width: $reply-area-max-width;
+      transform: none;
+    }
+
+    .sidebar-container {
+      height: auto;
+    }
+  }
+
+  // overruling new core composer changes
+  @media screen and (min-width: $reply-area-max-width) {
+    #reply-control.show-preview:not(.fullscreen) {
+      max-width: $reply-area-max-width;
+      transform: none;
+    }
+  }
+}
+
+body.sidebar-animate {
+  #main-outlet-wrapper {
+    transition: none;
+  }
+
+  .d-header-wrap .wrap {
+    transition: none;
+  }
+}
+
+.d-header-icons {
+  display: flex;
+}
+
+.rtl {
+  .d-header .title {
+    margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
+    margin-left: 0.725em;
+  }
+}
+
+// provides some extra space for login buttons
+@media screen and (min-width: 1400px) {
+  .anon {
+    .d-header .panel {
+      grid-column-start: -4;
+    }
+  }
+}
diff --git a/scss/desktop-horizon-fixes.scss b/scss/desktop-horizon-fixes.scss
new file mode 100644
index 0000000..a8ab039
--- /dev/null
+++ b/scss/desktop-horizon-fixes.scss
@@ -0,0 +1,65 @@
+// Fixing bulk select (only needed for desktop)
+
+.bulk-select-enabled {
+  .topic-list-header .topic-list-data.default {
+    position: sticky;
+    top: 10em;
+  }
+  .topic-author-avatar-data {
+    display: none;
+  }
+
+  .bulk-select.topic-list-data {
+    grid-area: bulk-select;
+    margin-left: -0.5em;
+
+    @media screen and (max-width: 576px) {
+      margin-top: 0;
+      label {
+        padding-block: 0.345em;
+      }
+    }
+
+    input {
+      transform: scale(1.5);
+    }
+  }
+}
+
+.topic-list-header {
+  tr {
+    border: none;
+  }
+
+  .topic-list-data {
+    padding: 0;
+
+    &:not(.default) {
+      display: none;
+    }
+
+    &.default {
+      position: absolute;
+      right: 0;
+      .bulk-select,
+      span:not(.bulk-select-topics, .d-button-label) {
+        display: none;
+      }
+    }
+  }
+
+  .bulk-select-topics {
+    position: absolute;
+    right: -1em;
+    @media screen and (max-width: 1048px) {
+      right: 0;
+    }
+
+    background: var(--secondary);
+    border-radius: 0 0 0 var(--d-border-radius);
+    padding: 1em;
+    button {
+      white-space: nowrap;
+    }
+  }
+}