diff --git a/app/assets/javascripts/discourse/templates/preferences/profile.hbs b/app/assets/javascripts/discourse/templates/preferences/profile.hbs
index c94a78775df..39686f2b128 100644
--- a/app/assets/javascripts/discourse/templates/preferences/profile.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/profile.hbs
@@ -1,7 +1,7 @@
 {{#if canChangeBio}}
 <div class="control-group pref-bio">
   <label class="control-label">{{i18n 'user.bio'}}</label>
-  <div class="controls bio-composer">
+  <div class="controls bio-composer input-xxlarge">
     {{d-editor value=model.bio_raw}}
   </div>
 </div>
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 9d016e9a80d..52e481abdc1 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -138,3 +138,28 @@
   display: none;
   flex: 0;
 }
+
+.user-preferences .bio-composer,
+.edit-category-tab-topic-template {
+  textarea {
+    width: 100%;
+  }
+  .d-editor-container {
+    display: block;
+  }
+  .d-editor-textarea-wrapper {
+    border: 1px solid $primary-low;
+  }
+  .d-editor-preview-wrapper {
+    max-width: 100%;
+    margin: 10px 0 0 0;
+  }
+  .d-editor-preview {
+    background-color: dark-light-diff($primary, $secondary, 97%, -70%);
+  }
+}
+
+.user-preferences .bio-composer {
+  padding: 10px;
+  border: 1px solid $primary-low;
+}
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 118725aab60..0cf84a490f3 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -82,6 +82,7 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
 // standard color transformations, use these if possible, and add any new dark-light-diffs here
 
 //primary
+$primary-very-low: dark-light-diff($primary, $secondary, 97%, -75%);
 $primary-low: dark-light-diff($primary, $secondary, 90%, -65%);
 $primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
 $primary-medium: dark-light-diff($primary, $secondary, 50%, -20%);