diff --git a/less/forum/Composer.less b/less/forum/Composer.less
new file mode 100644
index 000000000..94b80c7bb
--- /dev/null
+++ b/less/forum/Composer.less
@@ -0,0 +1,334 @@
+// ------------------------------------
+// Composer
+
+.Composer {
+  pointer-events: auto;
+  .box-shadow(0 2px 6px @shadow-color);
+
+  &.minimized {
+    height: 50px;
+    cursor: pointer;
+  }
+}
+.Composer-controls {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.ComposerBody-content {
+  .minimized & {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.ComposerBody-header {
+  list-style: none;
+  padding: 1px 0;
+  margin: 0 0 10px;
+
+  .minimized & {
+    pointer-events: none;
+  }
+
+  > li {
+    display: inline-block;
+    margin-right: -4px;
+  }
+  h3 {
+    margin: 0;
+    line-height: 1.5em;
+
+    &, input, a {
+      color: @secondary-color;
+      font-size: 14px;
+      font-weight: normal;
+    }
+    input {
+      font-size: 16px;
+
+      &, &[disabled], &:focus {
+        background: none;
+        border: 0;
+        padding: 0 20px 0 0;
+        height: auto;
+      }
+    }
+    .icon {
+      font-size: 14px;
+    }
+  }
+}
+.fa-minus.minimize {
+  vertical-align: -5px;
+}
+.Composer-controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+
+  & li {
+    display: inline-block;
+  }
+  .minimized & {
+    top: 7px;
+  }
+}
+.ComposerBody-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: fade(@body-bg, 90%);
+  opacity: 0;
+  pointer-events: none;
+  border-radius: @border-radius @border-radius 0 0;
+  .transition(opacity 0.2s);
+
+  &.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+.ComposerBody-editor {
+  .minimized & {
+    visibility: hidden;
+  }
+}
+
+// On phones, show the composer as a fixed overlay that covers the whole
+// screen. The controls are hidden (except for the 'x', which is the back-
+// control), and the avatar hidden.
+@media @phone {
+  .Composer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: @zindex-composer;
+    background: @body-bg;
+
+    &:not(.minimized) {
+      top: 0;
+      height: 100vh !important;
+      padding-top: @header-height-phone;
+
+      &:before {
+        content: " ";
+        .header-background();
+        opacity: 0;
+
+        .visible& {
+          opacity: 1;
+        }
+      }
+
+      & .Composer-controls {
+        z-index: @zindex-header + 1;
+
+        li:not(.App-backControl) {
+          display: none;
+        }
+      }
+    }
+  }
+  .ComposerBody-content {
+    .minimized & {
+      margin-right: 50px;
+    }
+  }
+  .ComposerBody-avatar {
+    display: none;
+  }
+  .ComposerBody-header {
+    margin-bottom: 0;
+
+    > li {
+      display: block;
+      border-bottom: 1px solid @control-bg;
+      padding: 10px 15px;
+
+      .minimized & {
+        border-bottom: 0;
+        padding: 15px;
+      }
+    }
+    h3 {
+      &, a, input {
+        font-size: 14px;
+      }
+      input {
+        width: 100% !important;
+      }
+    }
+  }
+  .ComposerBody-editor {
+    padding: 15px;
+
+    textarea {
+      height: 50vh !important;
+    }
+  }
+}
+
+// On larger screens, show the composer as a window at the bottom of the
+// content area. We hide a lot of the content when the composer is minimized.
+@media @tablet-up {
+  .App-composer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: @zindex-composer;
+    pointer-events: none;
+    .transition(left 0.2s);
+  }
+  .Composer {
+    border-radius: @border-radius @border-radius 0 0;
+    background: fade(@body-bg, 95%);
+    transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
+    position: relative;
+    height: 300px;
+    .transition(~"background 0.2s, box-shadow 0.2s");
+
+    &.active, &.fullScreen {
+      background: @body-bg;
+    }
+    &.active:not(.fullScreen) {
+      box-shadow: 0 0 0 2px @primary-color, 0 2px 6px @shadow-color;
+    }
+    &.fullScreen {
+      position: fixed;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      margin: 0;
+      height: auto;
+    }
+  }
+  .Composer-controls {
+    .fullScreen & .Button {
+      padding: 13px;
+      width: auto;
+
+      .Button-icon {
+        font-size: 20px;
+      }
+    }
+  }
+  .ComposerBody-header {
+    .fullScreen & {
+      margin-bottom: 20px;
+    }
+  }
+  .Composer-content {
+    padding: 20px 20px 0;
+
+    .minimized & {
+      padding: 12px 20px;
+    }
+    .fullScreen & {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 30px;
+    }
+  }
+  .Composer-handle {
+    height: 15px;
+    margin-bottom: -17px;
+    position: relative;
+
+    .minimized &, .fullScreen & {
+      display: none;
+    }
+  }
+  .ComposerBody-avatar {
+    float: left;
+    .Avatar--size(64px);
+
+    .minimized &, .fullScreen & {
+      display: none;
+    }
+  }
+  .ComposerBody-content {
+    margin-left: 90px;
+
+    .minimized &, .fullScreen & {
+      margin-left: 0;
+    }
+  }
+  .ComposerBody-editor {
+    .fullScreen & textarea {
+      font-size: 16px;
+    }
+  }
+}
+
+@media @desktop-up {
+  .Composer:not(.fullScreen) {
+    margin-left: -20px;
+    margin-right: 180px;
+
+    .App--index & {
+      margin-left: 205px;
+      margin-right: -20px;
+    }
+  }
+}
+
+@media @desktop-hd {
+  .hasPane.panePinned .App-composer {
+    left: @pane-width;
+  }
+}
+
+// ------------------------------------
+// Text Editor
+
+.TextEditor {
+  & textarea {
+    border-radius: 0;
+    padding: 0 0 10px;
+    border: 0;
+    resize: none;
+    color: @text-color;
+    font-size: 14px;
+    line-height: 1.7;
+
+    &, &:focus, &[disabled] {
+      background: none;
+      border: 0;
+    }
+  }
+}
+.TextEditor-controls {
+  margin: 0;
+  padding: 15px 0;
+  list-style-type: none;
+
+  & li {
+    display: inline-block;
+  }
+}
+
+@media @tablet-up {
+  .TextEditor-controls {
+    margin: 0 -20px 0 -110px;
+    padding: 15px 20px;
+    border-top: 1px solid @control-bg;
+
+    .fullScreen & {
+      margin: 0;
+      border-top: 0;
+      padding: 20px 0;
+    }
+
+    & .Button--primary {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+}
diff --git a/less/forum/Hero.less b/less/forum/Hero.less
new file mode 100644
index 000000000..629aac1b1
--- /dev/null
+++ b/less/forum/Hero.less
@@ -0,0 +1,47 @@
+.Hero {
+  margin-top: -1px;
+  background: @hero-bg;
+  text-align: center;
+  color: @hero-color;
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: normal;
+    line-height: 1.5em;
+  }
+  .container {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+}
+.Hero-close {
+  float: right;
+  margin-top: -10px;
+  color: inherit;
+}
+.Hero-subtitle {
+  margin: 8px 0 0;
+  line-height: 1.5em;
+}
+
+@media @phone {
+  .Hero-close {
+    margin-right: -10px;
+  }
+}
+
+@media @tablet-up {
+  .Hero {
+    h2 {
+      font-size: 22px;
+    }
+    .container {
+      padding-top: 40px;
+      padding-bottom: 30px;
+    }
+  }
+  .Hero-subtitle {
+    font-size: 15px;
+  }
+}
diff --git a/less/lib/Search.less b/less/lib/Search.less
new file mode 100755
index 000000000..7fa726d9a
--- /dev/null
+++ b/less/lib/Search.less
@@ -0,0 +1,67 @@
+@media @tablet-up {
+  .Search {
+    input:focus, &.active input, .Search-results {
+      width: 400px;
+    }
+  }
+}
+.Search-results {
+  max-height: 70vh;
+  overflow: auto;
+  left: auto;
+  right: 0;
+
+  > li > a {
+    white-space: normal;
+  }
+
+  mark {
+    background: none;
+    padding: 0;
+    font-weight: bold;
+    color: inherit;
+    box-shadow: none;
+  }
+}
+
+.Search-input {
+  overflow: hidden;
+  color: @muted-color;
+
+  &:before {
+    .fa();
+    content: @fa-var-search;
+    float: left;
+    margin-right: -36px;
+    width: 36px;
+    font-size: 14px;
+    text-align: center;
+    position: relative;
+    padding: 7px 0;
+    line-height: 1.5;
+    pointer-events: none;
+  }
+  input {
+    float: left;
+    width: 225px;
+    padding-left: 36px;
+    padding-right: 36px;
+    .transition(~"all 0.4s");
+  }
+  .Button {
+    float: left;
+    margin-left: -36px;
+    width: 36px !important;
+    outline: none;
+  }
+}
+
+.DiscussionSearchResult-excerpt {
+  margin-top: 3px;
+  color: @muted-color;
+  font-size: 11px;
+}
+.UserSearchResult .Avatar {
+  .Avatar--size(24px);
+  margin: -2px 10px -2px 0;
+}