diff --git a/api/mutations/files/index.js b/api/mutations/files/index.js
new file mode 100644
index 0000000000..f2dec2e74f
--- /dev/null
+++ b/api/mutations/files/index.js
@@ -0,0 +1,8 @@
+// @flow
+import uploadImage from './uploadImage';
+
+module.exports = {
+  Mutation: {
+    uploadImage,
+  },
+};
diff --git a/api/mutations/files/uploadImage.js b/api/mutations/files/uploadImage.js
new file mode 100644
index 0000000000..fa0486952b
--- /dev/null
+++ b/api/mutations/files/uploadImage.js
@@ -0,0 +1,23 @@
+// @flow
+import { isAuthedResolver } from '../../utils/permissions';
+import { uploadImage } from '../../utils/file-storage';
+import type { EntityTypes } from 'shared/types';
+import type { GraphQLContext } from '../../';
+import type { FileUpload } from 'shared/types';
+import { signImageUrl } from 'shared/imgix';
+
+type Args = {
+  input: {
+    image: FileUpload,
+    type: EntityTypes,
+    id?: string,
+  },
+};
+
+export default isAuthedResolver(
+  async (_: void, { input }: Args, { loaders }: GraphQLContext) => {
+    const { image, type, id } = input;
+    const url = await uploadImage(image, type, id || 'draft');
+    return await signImageUrl(url);
+  }
+);
diff --git a/api/mutations/thread/publishThread.js b/api/mutations/thread/publishThread.js
index afd5a907ab..381e64487d 100644
--- a/api/mutations/thread/publishThread.js
+++ b/api/mutations/thread/publishThread.js
@@ -1,11 +1,17 @@
 // @flow
 const debug = require('debug')('api:mutations:thread:publish-thread');
 import stringSimilarity from 'string-similarity';
-import { convertToRaw } from 'draft-js';
+import {
+  convertToRaw,
+  convertFromRaw,
+  EditorState,
+  SelectionState,
+} from 'draft-js';
 import { stateFromMarkdown } from 'draft-js-import-markdown';
 import type { GraphQLContext } from '../../';
 import UserError from '../../utils/UserError';
 import { uploadImage } from '../../utils/file-storage';
+import processThreadContent from 'shared/draft-utils/process-thread-content';
 import {
   publishThread,
   editThread,
@@ -68,22 +74,11 @@ export default requireAuth(
       );
     }
 
-    if (type === 'TEXT') {
-      type = 'DRAFTJS';
-      if (thread.content.body) {
-        thread.content.body = JSON.stringify(
-          convertToRaw(
-            stateFromMarkdown(thread.content.body, {
-              parserOptions: {
-                breaks: true,
-              },
-            })
-          )
-        );
-      }
+    if (thread.content.body) {
+      thread.content.body = processThreadContent(type, thread.content.body);
     }
 
-    thread.type = type;
+    thread.type = 'DRAFTJS';
 
     const [
       currentUserChannelPermissions,
diff --git a/api/schema.js b/api/schema.js
index 9ecc93730d..ec1ada63fb 100644
--- a/api/schema.js
+++ b/api/schema.js
@@ -56,6 +56,7 @@ const notificationMutations = require('./mutations/notification');
 const userMutations = require('./mutations/user');
 const metaMutations = require('./mutations/meta');
 const communityMemberMutations = require('./mutations/communityMember');
+const fileMutations = require('./mutations/files');
 
 const messageSubscriptions = require('./subscriptions/message');
 const notificationSubscriptions = require('./subscriptions/notification');
@@ -125,6 +126,7 @@ const resolvers = merge(
   userMutations,
   metaMutations,
   communityMemberMutations,
+  fileMutations,
   // subscriptions
   messageSubscriptions,
   notificationSubscriptions,
diff --git a/api/types/general.js b/api/types/general.js
index 24a37ee63c..0caf9a1eab 100644
--- a/api/types/general.js
+++ b/api/types/general.js
@@ -76,6 +76,24 @@ const general = /* GraphQL */ `
     createdAt: String
     status: String
   }
+
+  enum EntityTypes {
+    communities
+    channels
+    users
+    threads
+  }
+
+  input UploadImageInput {
+    image: Upload!
+    type: EntityTypes!
+    id: String
+  }
+
+  extend type Mutation {
+    uploadImage(input: UploadImageInput!): String
+      @rateLimit(max: 20, window: "20m")
+  }
 `;
 
 module.exports = general;
diff --git a/cypress/integration/channel/view/composer_spec.js b/cypress/integration/channel/view/composer_spec.js
index f04a79633c..cf42bd8b6c 100644
--- a/cypress/integration/channel/view/composer_spec.js
+++ b/cypress/integration/channel/view/composer_spec.js
@@ -33,7 +33,7 @@ describe('renders composer for logged in members', () => {
 
     cy.get('[data-cy="thread-composer-placeholder"]').click();
 
-    cy.get('[data-cy="thread-composer"]').should('be.visible');
+    cy.get('[data-cy="rich-text-editor"]').should('be.visible');
   });
 });
 
diff --git a/cypress/integration/community/view/profile_spec.js b/cypress/integration/community/view/profile_spec.js
index 46a474e61f..c1f14586ae 100644
--- a/cypress/integration/community/view/profile_spec.js
+++ b/cypress/integration/community/view/profile_spec.js
@@ -268,7 +268,8 @@ describe('private community signed in with permissions', () => {
       .filter(channel => !channel.isPrivate)
       .filter(channel => !channel.deletedAt)
       .forEach(channel => {
-        cy.contains(channel.name)
+        cy.get('[data-cy="channel-list"]')
+          .contains(channel.name)
           .scrollIntoView()
           .should('be.visible');
       });
diff --git a/cypress/integration/thread/action_bar_spec.js b/cypress/integration/thread/action_bar_spec.js
index 45a1481b2c..643b0bcb26 100644
--- a/cypress/integration/thread/action_bar_spec.js
+++ b/cypress/integration/thread/action_bar_spec.js
@@ -189,7 +189,7 @@ describe('action bar renders', () => {
       cy.get('[data-cy="thread-dropdown-edit"]').click();
       cy.get('[data-cy="save-thread-edit-button"]').should('be.visible');
       const title = 'Some new thread';
-      cy.get('[data-cy="rich-text-editor"]').should('be.visible');
+      cy.get('[data-cy="rich-text-editor"].markdown').should('be.visible');
       cy.get('[data-cy="thread-editor-title-input"]')
         .clear()
         .type(title);
@@ -201,7 +201,7 @@ describe('action bar renders', () => {
       cy.get('[data-cy="thread-dropdown-edit"]').click();
       cy.get('[data-cy="save-thread-edit-button"]').should('be.visible');
       const originalTitle = 'The first thread! 🎉';
-      cy.get('[data-cy="rich-text-editor"]').should('be.visible');
+      cy.get('[data-cy="rich-text-editor"].markdown').should('be.visible');
       cy.get('[data-cy="thread-editor-title-input"]')
         .clear()
         .type(originalTitle);
diff --git a/cypress/integration/thread_spec.js b/cypress/integration/thread_spec.js
index 27456ffcd5..c9de67c3ef 100644
--- a/cypress/integration/thread_spec.js
+++ b/cypress/integration/thread_spec.js
@@ -456,7 +456,7 @@ describe('/new/thread', () => {
     cy.get('[data-cy="composer-channel-selector"]').should('be.visible');
     // Type title and body
     cy.get('[data-cy="composer-title-input"]').type(title);
-    cy.get('[contenteditable="true"]').type(body);
+    cy.get('[data-cy="rich-text-editor"]').type(body);
     cy.get('[data-cy="composer-publish-button"]').click();
     cy.location('pathname').should('contain', 'thread');
     cy.get('[data-cy="thread-view"]');
@@ -472,12 +472,12 @@ describe('/new/thread', () => {
     cy.get('[data-cy="composer-channel-selector"]').should('be.visible');
     // Type title and body
     cy.get('[data-cy="composer-title-input"]').type(title);
-    cy.get('[contenteditable="true"]').type(body);
+    cy.get('[data-cy="rich-text-editor"]').type(body);
     /////need time as our localstorage is not set
     cy.wait(1000);
     cy.reload();
 
     cy.get('[data-cy="composer-title-input"]').contains(title);
-    cy.get('[contenteditable="true"]').contains(body);
+    cy.get('[data-cy="rich-text-editor"]').contains(body);
   });
 });
diff --git a/flow-typed/npm/react-dropzone_vx.x.x.js b/flow-typed/npm/react-dropzone_vx.x.x.js
new file mode 100644
index 0000000000..57b7ee6318
--- /dev/null
+++ b/flow-typed/npm/react-dropzone_vx.x.x.js
@@ -0,0 +1,116 @@
+// flow-typed signature: a5a6c5ef2495cde307215470bb3dd2b5
+// flow-typed version: <<STUB>>/react-dropzone_v8.0.3/flow_v0.66.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'react-dropzone'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'react-dropzone' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'react-dropzone/commitlint.config' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/dist/es/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/dist/es/utils/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/dist/es/utils/styles' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/dist/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/rollup.config' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/index.spec' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/utils/index' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/utils/index.spec' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/src/utils/styles' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/styleguide.config' {
+  declare module.exports: any;
+}
+
+declare module 'react-dropzone/testSetup' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'react-dropzone/commitlint.config.js' {
+  declare module.exports: $Exports<'react-dropzone/commitlint.config'>;
+}
+declare module 'react-dropzone/dist/es/index.js' {
+  declare module.exports: $Exports<'react-dropzone/dist/es/index'>;
+}
+declare module 'react-dropzone/dist/es/utils/index.js' {
+  declare module.exports: $Exports<'react-dropzone/dist/es/utils/index'>;
+}
+declare module 'react-dropzone/dist/es/utils/styles.js' {
+  declare module.exports: $Exports<'react-dropzone/dist/es/utils/styles'>;
+}
+declare module 'react-dropzone/dist/index.js' {
+  declare module.exports: $Exports<'react-dropzone/dist/index'>;
+}
+declare module 'react-dropzone/rollup.config.js' {
+  declare module.exports: $Exports<'react-dropzone/rollup.config'>;
+}
+declare module 'react-dropzone/src/index.js' {
+  declare module.exports: $Exports<'react-dropzone/src/index'>;
+}
+declare module 'react-dropzone/src/index.spec.js' {
+  declare module.exports: $Exports<'react-dropzone/src/index.spec'>;
+}
+declare module 'react-dropzone/src/utils/index.js' {
+  declare module.exports: $Exports<'react-dropzone/src/utils/index'>;
+}
+declare module 'react-dropzone/src/utils/index.spec.js' {
+  declare module.exports: $Exports<'react-dropzone/src/utils/index.spec'>;
+}
+declare module 'react-dropzone/src/utils/styles.js' {
+  declare module.exports: $Exports<'react-dropzone/src/utils/styles'>;
+}
+declare module 'react-dropzone/styleguide.config.js' {
+  declare module.exports: $Exports<'react-dropzone/styleguide.config'>;
+}
+declare module 'react-dropzone/testSetup.js' {
+  declare module.exports: $Exports<'react-dropzone/testSetup'>;
+}
diff --git a/package.json b/package.json
index 899f82c0d8..2f2b5684dd 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "draft-js-export-markdown": "^1.3.0",
     "draft-js-focus-plugin": "^2.2.0",
     "draft-js-image-plugin": "^2.0.6",
-    "draft-js-import-markdown": "^1.3.0",
+    "draft-js-import-markdown": "^1.3.1",
     "draft-js-linkify-plugin": "^2.0.0-beta1",
     "draft-js-markdown-plugin": "^3.0.5",
     "draft-js-plugins-editor": "^2.1.1",
@@ -156,6 +156,7 @@
     "react-app-rewired": "^1.6.2",
     "react-clipboard.js": "^2.0.1",
     "react-dom": "^16.7.0-alpha.2",
+    "react-dropzone": "^8.0.3",
     "react-flip-move": "^3.0.2",
     "react-helmet-async": "^0.1.0",
     "react-image": "^1.5.1",
@@ -220,7 +221,7 @@
     "start:api": "cross-env NODE_ENV=production node build-api/main.js",
     "dev:web": "cross-env NODE_PATH=./ react-app-rewired start",
     "dev:api": "cross-env FILE_STORAGE=local cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,api*,shared:rethinkdb:db-query-cache,-api:resolvers cross-env DIR=api backpack",
-    "dev:api:s3": "cross-env FILE_STORAGE=s3 cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,api*,shared:middlewares*,shared:rethinkdb:db-query-cache,-api:resolvers cross-env DIR=api backpack",
+    "dev:api:s3": "cross-env FILE_STORAGE=s3 cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,api*,shared:rethinkdb:db-query-cache,-api:resolvers cross-env DIR=api backpack",
     "dev:athena": "cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,athena*,shared:middlewares*,-athena:resolvers cross-env DIR=athena backpack",
     "dev:hermes": "cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,hermes*,shared:middlewares*,-hermes:resolvers cross-env DIR=hermes backpack",
     "dev:chronos": "cross-env NODE_PATH=./ cross-env NODE_ENV=development cross-env DEBUG=build*,chronos*,shared:middlewares*,-chronos:resolvers cross-env DIR=chronos backpack",
diff --git a/shared/clients/draft-js/links-decorator/core.js b/shared/clients/draft-js/links-decorator/core.js
index 5e1253b2b2..8c43daa584 100644
--- a/shared/clients/draft-js/links-decorator/core.js
+++ b/shared/clients/draft-js/links-decorator/core.js
@@ -3,10 +3,13 @@ import React from 'react';
 import linkStrategy from 'draft-js-linkify-plugin/lib/linkStrategy';
 import normalizeUrl from '../../../normalize-url';
 import type { ContentBlock } from 'draft-js/lib/ContentBlock';
+import type { ContentState } from 'draft-js/lib/ContentState';
 import type { ComponentType, Node } from 'react';
 
 type DecoratorComponentProps = {
   decoratedText: string,
+  contentState: ContentState,
+  entityKey?: string,
   children?: Node,
 };
 
@@ -21,15 +24,34 @@ const createLinksDecorator = (
 ) => ({
   strategy: (
     contentBlock: ContentBlock,
-    callback: (...args?: Array<any>) => any
+    callback: (...args?: Array<any>) => any,
+    contentState: ContentState
   ) => {
     if (contentBlock.type === 'code-block') return;
 
+    if (contentBlock.findEntityRanges) {
+      contentBlock.findEntityRanges(char => {
+        const entityKey = char.getEntity();
+        return (
+          entityKey !== null &&
+          contentState.getEntity(entityKey).getType() === 'LINK'
+        );
+      }, callback);
+    }
     linkStrategy(contentBlock, callback);
   },
-  component: ({ decoratedText, children }: DecoratorComponentProps) => (
+  component: ({
+    decoratedText,
+    children,
+    entityKey,
+    contentState,
+  }: DecoratorComponentProps) => (
     <Component
-      href={normalizeUrl(decoratedText)}
+      href={
+        entityKey
+          ? contentState.getEntity(entityKey).getData().url
+          : normalizeUrl(decoratedText)
+      }
       children={children}
       /* NOTE(@mxstbr): This is super hacky, but I couldn't find a way to give two URLs in the same message a different key. (i.e. "I am on https://github.com https://github.com is great" would only show the link once) */
       key={`link-${i++}`}
diff --git a/shared/draft-utils/add-embeds-to-draft-js.js b/shared/draft-utils/add-embeds-to-draft-js.js
new file mode 100644
index 0000000000..594467b9f2
--- /dev/null
+++ b/shared/draft-utils/add-embeds-to-draft-js.js
@@ -0,0 +1,152 @@
+// @flow
+import {
+  EditorState,
+  Entity,
+  AtomicBlockUtils,
+  ContentState,
+  convertToRaw,
+  SelectionState,
+} from 'draft-js';
+
+const FIGMA_URLS = /\b((?:https?\/\/)?(?:www\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?)/gi;
+const YOUTUBE_URLS = /\b(?:\/\/)?(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/gi;
+const VIMEO_URLS = /\b(?:\/\/)?(?:www\.)?vimeo.com\/(?:channels\/[0-9a-z-_]+\/)?([0-9a-z\-_]+)/gi;
+const IFRAME_TAG = /<iframe.+?src=['"](.+?)['"]/gi;
+const FRAMER_URLS = /\b((?:https?\/\/)?(?:www\.)?(?:framer\.cloud|share\.framerjs\.com)(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?)/gi;
+const CODEPEN_URLS = /\b(?:\/\/)?(?:www\.)?codepen\.io(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?/gi;
+const CODESANDBOX_URLS = /\b(?:\/\/)?(?:www\.)?codesandbox\.io(\/[A-Za-z0-9\-\._~:\/\?#\[\]@!$&'\(\)\*\+,;\=]*)?/gi;
+
+type AddEmbedAttrs = {
+  url: string,
+  aspectRatio?: string,
+  width?: number,
+  height?: number,
+};
+
+export const addEmbedsToEditorState = (
+  editorState: typeof EditorState
+): typeof EditorState => {
+  const raw = convertToRaw(editorState.getCurrentContent());
+  let newEditorState = editorState;
+  raw.blocks.forEach(block => {
+    if (block.type !== 'unstyled') return;
+    const embeds = getEmbedsFromText(block.text);
+    if (embeds.length > 0) {
+      embeds.forEach(embed => {
+        const selection = SelectionState.createEmpty(block.key);
+        newEditorState = addEmbedToEditorState(newEditorState, embed);
+      });
+    }
+  });
+  return newEditorState;
+};
+
+// Taken from https://github.com/vacenz/last-draft-js-plugins/blob/master/draft-js-embed-plugin/src/modifiers/addEmbed.js
+// adapted to pass additional attrs onto the iframe
+export const addEmbedToEditorState = (
+  editorState: typeof EditorState,
+  attrs: AddEmbedAttrs
+) => {
+  const urlType = 'embed';
+  const entityKey = Entity.create(urlType, 'IMMUTABLE', {
+    src: (attrs && attrs.url) || null,
+    aspectRatio: attrs && attrs.aspectRatio,
+    width: attrs && attrs.width,
+    height: attrs && attrs.height,
+  });
+  const newEditorState = AtomicBlockUtils.insertAtomicBlock(
+    editorState,
+    entityKey,
+    ' '
+  );
+  // insertAtomicBlock inserts _before_ the current block, which is not what we want,
+  // so we have to manually move the new atomic block one further down
+  const content = newEditorState.getCurrentContent();
+  let newBlocks = [];
+  let moveNext;
+  content.getBlocksAsArray().forEach(block => {
+    if (!moveNext) {
+      newBlocks.push(block);
+    } else {
+      newBlocks = [
+        ...newBlocks.slice(0, newBlocks.length - 2),
+        block,
+        ...newBlocks.slice(newBlocks.length - 2),
+      ];
+    }
+    if (block.type === 'atomic' && block.getEntityAt(0) === entityKey) {
+      // move the automatically added empty block above the atomic block below the atomic block
+      newBlocks = [
+        ...newBlocks.slice(0, newBlocks.length - 2),
+        newBlocks[newBlocks.length - 1],
+        newBlocks[newBlocks.length - 2],
+      ];
+      moveNext = true;
+    }
+  });
+  const newContent = ContentState.createFromBlockArray(newBlocks);
+  return EditorState.push(newEditorState, newContent, 'insert-characters');
+};
+
+// Utility function to return the first capturing group of each unique match
+// of a regex in a string
+const match = (regex: RegExp, text: string) => {
+  const matches = text.match(regex);
+  if (!matches) return [];
+  return [...new Set(matches)].map(match => {
+    return regex.exec(match)[1];
+  });
+};
+
+export const getEmbedsFromText = (text: string): Array<AddEmbedAttrs> => {
+  let embeds = [];
+
+  match(IFRAME_TAG, text).forEach(url => {
+    embeds.push({ url });
+  });
+
+  match(FIGMA_URLS, text).forEach(url => {
+    embeds.push({
+      url: `https://www.figma.com/embed?embed_host=spectrum&url=${url}`,
+      aspectRatio: '56.25%', // 16:9 aspect ratio
+    });
+  });
+
+  match(YOUTUBE_URLS, text).forEach(id => {
+    embeds.push({
+      url: `https://www.youtube.com/embed/${id}`,
+      aspectRatio: '56.25%', // 16:9 aspect ratio
+    });
+  });
+
+  match(VIMEO_URLS, text).forEach(id => {
+    embeds.push({
+      url: `https://player.vimeo.com/video/${id}`,
+      aspectRatio: '56.25%', // 16:9 aspect ratio
+    });
+  });
+
+  match(FRAMER_URLS, text).forEach(url => {
+    embeds.push({
+      url: `https://${url}`,
+      width: 600,
+      height: 800,
+    });
+  });
+
+  match(CODEPEN_URLS, text).forEach(path => {
+    embeds.push({
+      url: `https://codepen.io${path.replace(/(pen|full|details)/, 'embed')}`,
+      height: 300,
+    });
+  });
+
+  match(CODESANDBOX_URLS, text).forEach(path => {
+    embeds.push({
+      url: `https://codesandbox.io${path.replace('/s/', '/embed/')}`,
+      height: 500,
+    });
+  });
+
+  return embeds;
+};
diff --git a/shared/draft-utils.js b/shared/draft-utils/index.js
similarity index 100%
rename from shared/draft-utils.js
rename to shared/draft-utils/index.js
diff --git a/shared/draft-utils/process-thread-content.js b/shared/draft-utils/process-thread-content.js
new file mode 100644
index 0000000000..647f50b38d
--- /dev/null
+++ b/shared/draft-utils/process-thread-content.js
@@ -0,0 +1,53 @@
+// @flow
+import { stateFromMarkdown } from 'draft-js-import-markdown';
+import { convertFromRaw, convertToRaw, EditorState } from 'draft-js';
+import { addEmbedsToEditorState } from './add-embeds-to-draft-js';
+
+export default (type: 'TEXT' | 'DRAFTJS', body: string): string => {
+  let newBody = body;
+  if (type === 'TEXT') {
+    newBody = JSON.stringify(
+      convertToRaw(
+        stateFromMarkdown(newBody, {
+          customBlockFn: elem => {
+            if (elem.nodeName !== 'PRE') return;
+
+            const code = elem.childNodes.find(node => node.nodeName === 'CODE');
+            if (!code) return;
+
+            const className = code.attributes.find(
+              ({ name }) => name === 'class'
+            );
+            if (!className) return;
+
+            const lang = className.value.replace('lang-', '');
+
+            return {
+              type: null,
+              data: {
+                language: lang,
+              },
+            };
+          },
+          parserOptions: {
+            atomicImages: true,
+            breaks: true,
+          },
+        })
+      )
+    );
+  }
+
+  // Add automatic embeds to body
+  try {
+    const editorState = EditorState.createWithContent(
+      convertFromRaw(JSON.parse(newBody))
+    );
+    const newEditorState = addEmbedsToEditorState(editorState);
+    return JSON.stringify(convertToRaw(newEditorState.getCurrentContent()));
+    // Ignore errors during automatic embed detection
+  } catch (err) {
+    console.error(err);
+    return newBody;
+  }
+};
diff --git a/shared/draft-utils/test/add-embeds-to-draft-js.test.js b/shared/draft-utils/test/add-embeds-to-draft-js.test.js
new file mode 100644
index 0000000000..ea23cf291d
--- /dev/null
+++ b/shared/draft-utils/test/add-embeds-to-draft-js.test.js
@@ -0,0 +1,316 @@
+// @flow
+import { getEmbedsFromText } from '../add-embeds-to-draft-js';
+
+describe('sites', () => {
+  describe('<iframe>', () => {
+    it('should handle simple HTML', () => {
+      const url = 'https://bla.com';
+      const text = `<iframe src="${url}" />`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          url,
+        },
+      ]);
+    });
+
+    it('should handle attributes', () => {
+      const url = 'https://bla.com';
+      const text = `<iframe src="${url}" height="500px" />`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          url,
+        },
+      ]);
+    });
+  });
+
+  describe('vimeo', () => {
+    it('should handle standard urls', () => {
+      const id = '313662630';
+      const text = `https://www.vimeo.com/${id}`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://player.vimeo.com/video/${id}`,
+        },
+      ]);
+    });
+
+    it('should handle urls without https://', () => {
+      const id = '313662630';
+      const text = `www.vimeo.com/${id}`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://player.vimeo.com/video/${id}`,
+        },
+      ]);
+    });
+
+    it('should handle urls without www', () => {
+      const id = '313662630';
+      const text = `vimeo.com/${id}`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://player.vimeo.com/video/${id}`,
+        },
+      ]);
+    });
+
+    it('should handle channel urls', () => {
+      const id = '313662630';
+      const text = `https://www.vimeo.com/channels/staffpicks/${id}`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://player.vimeo.com/video/${id}`,
+        },
+      ]);
+    });
+
+    it('should handle channel urls with numbers and underscores', () => {
+      const id = '313662630';
+      const text = `https://www.vimeo.com/channels/my_channel123/${id}`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://player.vimeo.com/video/${id}`,
+        },
+      ]);
+    });
+  });
+
+  describe('figma', () => {
+    it('should handle file urls', () => {
+      const text = 'www.figma.com/file/aLQFl2vxHpVRI6yDppNMMH3i/logo';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://www.figma.com/embed?embed_host=spectrum&url=${text}`,
+        },
+      ]);
+    });
+
+    it('should handle file urls with query strings', () => {
+      const text =
+        'www.figma.com/file/aLQFl2vxHpVRI6yDppNMMH3i/logo?node-id=0%3A2';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://www.figma.com/embed?embed_host=spectrum&url=${text}`,
+        },
+      ]);
+    });
+
+    it('should handle prototyping urls', () => {
+      const text = 'www.figma.com/proto/aLQFl2vxHpVRI6yDppNMMH3i/logo';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://www.figma.com/embed?embed_host=spectrum&url=${text}`,
+        },
+      ]);
+    });
+
+    it('should handle prototyping urls with query strings', () => {
+      const text =
+        'www.figma.com/proto/aLQFl2vxHpVRI6yDppNMMH3i/logo?node-id=0%3A2&scaling=min-zoom';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://www.figma.com/embed?embed_host=spectrum&url=${text}`,
+        },
+      ]);
+    });
+
+    it('should urls with https', () => {
+      const text = 'https://www.figma.com/file/aLQFl2vxHpVRI6yDppNMMH3i/logo';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://www.figma.com/embed?embed_host=spectrum&url=${text.replace(
+            'https://',
+            ''
+          )}`,
+        },
+      ]);
+    });
+  });
+
+  describe('youtube', () => {
+    it('should handle video urls', () => {
+      const id = '2pMb6RJ7ioU';
+      const text = `https://www.youtube.com/watch?v=${id}`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://www.youtube.com/embed/${id}`,
+        },
+      ]);
+    });
+
+    it('should handle youtu.be urls', () => {
+      const id = '2pMb6RJ7ioU';
+      const text = `https://www.youtu.be/${id}`;
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          aspectRatio: '56.25%',
+          url: `https://www.youtube.com/embed/${id}`,
+        },
+      ]);
+    });
+  });
+
+  describe('framer', () => {
+    it('should handle prototyping urls', () => {
+      const text = 'https://framer.cloud/asdf123';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          url: 'https://framer.cloud/asdf123',
+          width: 600,
+          height: 800,
+        },
+      ]);
+    });
+
+    it('should handle share urls', () => {
+      const text = 'https://share.framerjs.com/478kta5wx0wn';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          url: 'https://share.framerjs.com/478kta5wx0wn',
+          width: 600,
+          height: 800,
+        },
+      ]);
+    });
+  });
+
+  describe('codepen', () => {
+    it('should handle pen URLs', () => {
+      const text = 'https://codepen.io/jcoulterdesign/pen/NeOQzX';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          height: 300,
+          url: 'https://codepen.io/jcoulterdesign/embed/NeOQzX',
+        },
+      ]);
+    });
+
+    it('should handle full screen view URLs', () => {
+      const text = 'https://codepen.io/jcoulterdesign/full/NeOQzX';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          height: 300,
+          url: 'https://codepen.io/jcoulterdesign/embed/NeOQzX',
+        },
+      ]);
+    });
+
+    it('should handle details view URLs', () => {
+      const text = 'https://codepen.io/jcoulterdesign/details/NeOQzX';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          height: 300,
+          url: 'https://codepen.io/jcoulterdesign/embed/NeOQzX',
+        },
+      ]);
+    });
+
+    it('should handle embed URLs', () => {
+      const text = 'https://codepen.io/jcoulterdesign/embed/NeOQzX';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          height: 300,
+          url: 'https://codepen.io/jcoulterdesign/embed/NeOQzX',
+        },
+      ]);
+    });
+  });
+
+  describe('codesandbox', () => {
+    it('should handle sandbox urls', () => {
+      const text = 'https://codesandbox.io/s/8lz7276xz2';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          height: 500,
+          url: 'https://codesandbox.io/embed/8lz7276xz2',
+        },
+      ]);
+    });
+
+    it('should handle sandbox urls with query params', () => {
+      const text = 'https://codesandbox.io/s/8lz7276xz2?autoresize=true';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          height: 500,
+          url: 'https://codesandbox.io/embed/8lz7276xz2?autoresize=true',
+        },
+      ]);
+    });
+
+    it('should handle embed urls', () => {
+      const text = 'https://codesandbox.io/embed/8lz7276xz2';
+      expect(getEmbedsFromText(text)).toEqual([
+        {
+          height: 500,
+          url: 'https://codesandbox.io/embed/8lz7276xz2',
+        },
+      ]);
+    });
+  });
+});
+
+describe('complex text', () => {
+  it('should handle text before and after the URL', () => {
+    const text = 'this is cool: vimeo.com/123456 love it!';
+    expect(getEmbedsFromText(text)).toEqual([
+      {
+        url: 'https://player.vimeo.com/video/123456',
+        aspectRatio: '56.25%',
+      },
+    ]);
+  });
+
+  it('should handle the same url multiple times', () => {
+    const text = 'vimeo.com/123456 vimeo.com/123456 vimeo.com/123456';
+    expect(getEmbedsFromText(text)).toEqual([
+      {
+        url: 'https://player.vimeo.com/video/123456',
+        aspectRatio: '56.25%',
+      },
+    ]);
+  });
+
+  it('should handle multiple embeds', () => {
+    const text =
+      'Hey, look at this vimeo.com/123456 and this: youtu.be/asdf123 wow';
+    expect(getEmbedsFromText(text)).toEqual([
+      {
+        aspectRatio: '56.25%',
+        url: 'https://www.youtube.com/embed/asdf123',
+      },
+      {
+        aspectRatio: '56.25%',
+        url: 'https://player.vimeo.com/video/123456',
+      },
+    ]);
+  });
+
+  it('should handle a URL and an iframe', () => {
+    const text = 'vimeo.com/123456 <iframe src="bla.com" />';
+    expect(getEmbedsFromText(text)).toEqual([
+      {
+        url: 'bla.com',
+      },
+      {
+        url: 'https://player.vimeo.com/video/123456',
+        aspectRatio: '56.25%',
+      },
+    ]);
+  });
+
+  it('should handle text without embeds', () => {
+    expect(getEmbedsFromText('no embeds here')).toEqual([]);
+  });
+});
diff --git a/shared/graphql/mutations/uploadImage.js b/shared/graphql/mutations/uploadImage.js
new file mode 100644
index 0000000000..336a5eaad7
--- /dev/null
+++ b/shared/graphql/mutations/uploadImage.js
@@ -0,0 +1,35 @@
+// @flow
+import gql from 'graphql-tag';
+import { graphql } from 'react-apollo';
+import type { EntityTypes } from 'shared/types';
+
+export type UploadImageType = {
+  data: {
+    uploadImage: string,
+  },
+};
+
+export type UploadImageInput = {
+  image: Object,
+  type: EntityTypes,
+  id?: string,
+};
+
+export const uploadImageMutation = gql`
+  mutation uploadImage($input: UploadImageInput!) {
+    uploadImage(input: $input)
+  }
+`;
+
+const uploadImageOptions = {
+  props: ({ mutate }) => ({
+    uploadImage: (input: UploadImageInput) =>
+      mutate({
+        variables: {
+          input,
+        },
+      }),
+  }),
+};
+
+export default graphql(uploadImageMutation, uploadImageOptions);
diff --git a/src/components/chatInput/index.js b/src/components/chatInput/index.js
index 34f2f2657e..e3ffa9f592 100644
--- a/src/components/chatInput/index.js
+++ b/src/components/chatInput/index.js
@@ -15,8 +15,6 @@ import {
   InputWrapper,
   SendButton,
   PhotoSizeError,
-  MarkdownHint,
-  Preformatted,
   PreviewWrapper,
   RemovePreviewButton,
 } from './style';
@@ -26,6 +24,7 @@ import { getMessageById } from 'shared/graphql/queries/message/getMessage';
 import MediaUploader from './components/mediaUploader';
 import { QuotedMessage as QuotedMessageComponent } from '../message/view';
 import type { Dispatch } from 'redux';
+import { MarkdownHint } from 'src/components/markdownHint';
 
 const QuotedMessage = connect()(
   getMessageById(props => {
@@ -367,13 +366,7 @@ const ChatInput = (props: Props) => {
           </Form>
         </ChatInputWrapper>
       </ChatInputContainer>
-      <MarkdownHint showHint={text.length > 0} data-cy="markdownHint">
-        <b>**bold**</b>
-        <i>*italic*</i>
-        <Preformatted>`code`</Preformatted>
-        <Preformatted>```codeblock```</Preformatted>
-        <Preformatted>[name](link)</Preformatted>
-      </MarkdownHint>
+      <MarkdownHint showHint={text.length > 0} dataCy="markdownHint" />
     </React.Fragment>
   );
 };
diff --git a/src/components/chatInput/style.js b/src/components/chatInput/style.js
index ed82797958..a16f8d6b10 100644
--- a/src/components/chatInput/style.js
+++ b/src/components/chatInput/style.js
@@ -290,34 +290,3 @@ export const PreviewWrapper = styled.div`
     max-width: 37%;
   }
 `;
-
-export const Preformatted = styled.code`
-  background-color: ${theme.bg.wash};
-  border: 1px solid ${theme.bg.border};
-  white-space: nowrap;
-`;
-
-export const MarkdownHint = styled.div`
-  display: flex;
-  flex: 0 0 auto;
-  justify-content: flex-start;
-  margin-left: 56px;
-  font-size: 11px;
-  color: ${theme.text.alt};
-  line-height: 1;
-  padding: 6px 0;
-  opacity: ${({ showHint }) => (showHint ? 1 : 0)};
-  transition: opacity 200ms ease-in-out;
-  b {
-    font-weight: 600;
-  }
-  i,
-  b,
-  code {
-    margin-right: 3px;
-  }
-
-  @media (max-width: 768px) {
-    display: none;
-  }
-`;
diff --git a/src/components/composer/index.js b/src/components/composer/index.js
index 818373cc49..bc1b93555a 100644
--- a/src/components/composer/index.js
+++ b/src/components/composer/index.js
@@ -2,15 +2,22 @@
 import React, { Component } from 'react';
 import compose from 'recompose/compose';
 import Textarea from 'react-textarea-autosize';
+import MentionsInput from 'src/components/mentionsInput';
 import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 import debounce from 'debounce';
 import queryString from 'query-string';
 import { KeyBindingUtil } from 'draft-js';
+import Dropzone from 'react-dropzone';
+import Icon from '../icons';
+import processThreadContent from 'shared/draft-utils/process-thread-content';
+import { ThreadHeading } from 'src/views/thread/style';
+import Editor from 'src/components/rich-text-editor';
+import Image from 'src/components/rich-text-editor/Image';
+import { SegmentedControl, Segment } from 'src/components/segmentedControl';
 import { closeComposer } from '../../actions/composer';
 import { changeActiveThread } from '../../actions/dashboardFeed';
 import { addToastWithTimeout } from '../../actions/toasts';
-import Editor from '../rich-text-editor';
 import {
   toPlainText,
   fromPlainText,
@@ -21,12 +28,23 @@ import {
 import getComposerCommunitiesAndChannels from 'shared/graphql/queries/composer/getComposerCommunitiesAndChannels';
 import type { GetComposerType } from 'shared/graphql/queries/composer/getComposerCommunitiesAndChannels';
 import publishThread from 'shared/graphql/mutations/thread/publishThread';
+import uploadImage, {
+  type UploadImageInput,
+  type UploadImageType,
+} from 'shared/graphql/mutations/uploadImage';
 import { TextButton, Button } from '../buttons';
-import { FlexRow } from '../../components/globals';
+import { FlexRow } from 'src/components/globals';
+import {
+  MediaLabel,
+  MediaInput,
+} from 'src/components/chatInput/components/style';
+import { MarkdownHint } from 'src/components/markdownHint';
 import { LoadingSelect } from '../loading';
 import Titlebar from '../../views/titlebar';
 import type { Dispatch } from 'redux';
 import {
+  ComposerSlider,
+  Overlay,
   Container,
   ThreadDescription,
   ThreadTitle,
@@ -35,6 +53,11 @@ import {
   Dropdowns,
   RequiredSelector,
   DisabledWarning,
+  DropImageOverlay,
+  DropzoneWrapper,
+  InputHints,
+  DesktopLink,
+  ButtonRow,
 } from './style';
 import {
   sortCommunities,
@@ -44,15 +67,36 @@ import {
 import { events, track } from 'src/helpers/analytics';
 import { ESC, ENTER } from 'src/helpers/keycodes';
 
+const PreviewEditor = (props: { state: Object }) => {
+  // $FlowIssue
+  const [state, setState] = React.useState(props.state);
+
+  const onChange = change => {
+    setState(change);
+  };
+
+  return (
+    <Editor
+      readOnly
+      state={state}
+      onChange={onChange}
+      placeholder=""
+      version={2}
+      editorKey="preview-editor"
+    />
+  );
+};
+
 type State = {
   title: string,
-  body: Object,
+  body: string,
   availableCommunities: Array<any>,
   availableChannels: Array<any>,
   activeCommunity: ?string,
   activeChannel: ?string,
-  isPublishing: boolean,
+  isLoading: boolean,
   postWasPublished: boolean,
+  preview: boolean,
 };
 
 type Props = {
@@ -61,7 +105,9 @@ type Props = {
     refetch: Function,
     loading: boolean,
   },
+  uploadImage: (input: UploadImageInput) => Promise<UploadImageType>,
   isOpen: boolean,
+  isSlider?: boolean,
   dispatch: Dispatch<Object>,
   publishThread: Function,
   history: Object,
@@ -74,9 +120,9 @@ type Props = {
   networkOnline: boolean,
 };
 
-const LS_BODY_KEY = 'last-thread-composer-body';
-const LS_TITLE_KEY = 'last-thread-composer-title';
-const LS_COMPOSER_EXPIRE = 'last-thread-composer-expire';
+const LS_BODY_KEY = 'last-plaintext-thread-composer-body';
+const LS_TITLE_KEY = 'last-plaintext-thread-composer-title';
+const LS_COMPOSER_EXPIRE = 'last-plaintext-thread-composer-expire';
 
 const ONE_DAY = (): string => {
   const time = new Date().getTime() + 60 * 60 * 24 * 1000;
@@ -98,14 +144,15 @@ class ComposerWithData extends Component<Props, State> {
     );
 
     this.state = {
-      title: storedTitle || '',
-      body: storedBody || fromPlainText(''),
+      title: '',
+      body: '',
       availableCommunities: [],
       availableChannels: [],
       activeCommunity: activeCommunitySlug || '',
       activeChannel: activeChannelSlug || '',
-      isPublishing: false,
+      isLoading: false,
       postWasPublished: false,
+      preview: false,
     };
 
     this.persistBodyToLocalStorageWithDebounce = debounce(
@@ -136,10 +183,8 @@ class ComposerWithData extends Component<Props, State> {
         if (expireTime && currTime > expireTime) {
           this.removeStorage();
         } else {
-          storedBody = toState(
-            JSON.parse(localStorage.getItem(LS_BODY_KEY) || '')
-          );
-          storedTitle = localStorage.getItem(LS_TITLE_KEY);
+          storedBody = localStorage.getItem(LS_BODY_KEY) || '';
+          storedTitle = localStorage.getItem(LS_TITLE_KEY) || '';
         }
       } catch (err) {
         this.removeStorage();
@@ -285,7 +330,8 @@ class ComposerWithData extends Component<Props, State> {
     });
   };
 
-  changeBody = body => {
+  changeBody = evt => {
+    const body = evt.target.value;
     this.persistBodyToLocalStorageWithDebounce(body);
     this.setState({
       body,
@@ -339,16 +385,14 @@ class ComposerWithData extends Component<Props, State> {
     }
   };
 
-  onCancelClick = () => {
-    this.activateLastThread();
+  onCancelClick = async () => {
+    await this.activateLastThread();
+    this.props.dispatch(closeComposer());
   };
 
   handleTitleBodyChange = titleOrBody => {
     if (titleOrBody === 'body') {
-      localStorage.setItem(
-        LS_BODY_KEY,
-        JSON.stringify(toJSON(this.state.body))
-      );
+      localStorage.setItem(LS_BODY_KEY, this.state.body);
     } else {
       localStorage.setItem(LS_TITLE_KEY, this.state.title);
     }
@@ -405,15 +449,62 @@ class ComposerWithData extends Component<Props, State> {
     });
   };
 
+  uploadFile = evt => {
+    this.uploadFiles(evt.target.files);
+  };
+
+  uploadFiles = files => {
+    const uploading = `![Uploading ${files[0].name}...]()`;
+    let caretPos = this.bodyEditor.selectionStart;
+
+    this.setState(
+      ({ body }) => ({
+        isLoading: true,
+        body:
+          body.substring(0, caretPos) +
+          uploading +
+          body.substring(this.bodyEditor.selectionEnd, this.state.body.length),
+      }),
+      () => {
+        caretPos = caretPos + uploading.length;
+        this.bodyEditor.selectionStart = caretPos;
+        this.bodyEditor.selectionEnd = caretPos;
+        this.bodyEditor.focus();
+      }
+    );
+
+    return this.props
+      .uploadImage({
+        image: files[0],
+        type: 'threads',
+      })
+      .then(({ data }) => {
+        this.setState({
+          isLoading: false,
+        });
+        this.changeBody({
+          target: {
+            value: this.state.body.replace(
+              uploading,
+              `![${files[0].name}](${data.uploadImage})`
+            ),
+          },
+        });
+      })
+      .catch(err => {
+        console.error({ err });
+      });
+  };
+
   publishThread = () => {
     // if no title and no channel is set, don't allow a thread to be published
     if (!this.state.title || !this.state.activeChannel) {
       return;
     }
 
-    // isPublishing will change the publish button to a loading spinner
+    // isLoading will change the publish button to a loading spinner
     this.setState({
-      isPublishing: true,
+      isLoading: true,
     });
 
     const { dispatch, networkOnline, websocketConnection } = this.props;
@@ -444,23 +535,12 @@ class ComposerWithData extends Component<Props, State> {
     const { activeChannel, activeCommunity, title, body } = this.state;
     const channelId = activeChannel;
     const communityId = activeCommunity;
-    const jsonBody = toJSON(body);
 
     const content = {
       title: title.trim(),
-      body: isAndroid() ? toPlainText(body) : JSON.stringify(jsonBody),
+      body: body,
     };
 
-    // Get the images
-    const filesToUpload = Object.keys(jsonBody.entityMap)
-      .filter(
-        key =>
-          jsonBody.entityMap[key].type.toLowerCase() === 'image' &&
-          jsonBody.entityMap[key].data.file &&
-          jsonBody.entityMap[key].data.file.constructor === File
-      )
-      .map(key => jsonBody.entityMap[key].data.file);
-
     // this.props.mutate comes from a higher order component defined at the
     // bottom of this file
     const thread = {
@@ -468,9 +548,9 @@ class ComposerWithData extends Component<Props, State> {
       communityId,
       // NOTE(@mxstbr): On android we send plain text content
       // which is parsed as markdown to draftjs on the server
-      type: isAndroid() ? 'TEXT' : 'DRAFTJS',
+      type: 'TEXT',
       content,
-      filesToUpload,
+      // filesToUpload,
     };
 
     // one last save to localstorage
@@ -489,10 +569,12 @@ class ComposerWithData extends Component<Props, State> {
 
         // stop the loading spinner on the publish button
         this.setState({
-          isPublishing: false,
+          isLoading: false,
           postWasPublished: true,
         });
 
+        this.props.dispatch(closeComposer());
+
         // redirect the user to the thread
         // if they are in the inbox, select it
         this.props.dispatch(
@@ -511,7 +593,7 @@ class ComposerWithData extends Component<Props, State> {
       })
       .catch(err => {
         this.setState({
-          isPublishing: false,
+          isLoading: false,
         });
         this.props.dispatch(addToastWithTimeout('error', err.message));
       });
@@ -524,14 +606,17 @@ class ComposerWithData extends Component<Props, State> {
       availableCommunities,
       activeCommunity,
       activeChannel,
-      isPublishing,
+      isLoading,
+      preview,
     } = this.state;
 
     const {
       data: { user },
       threadSliderIsOpen,
+      isOpen,
       networkOnline,
       websocketConnection,
+      isSlider,
     } = this.props;
     const dataExists = user && availableCommunities && availableChannels;
 
@@ -541,103 +626,184 @@ class ComposerWithData extends Component<Props, State> {
         websocketConnection !== 'reconnected');
 
     return (
-      <Container>
-        <Titlebar provideBack title={'New conversation'} noComposer />
-        <Dropdowns>
-          <span>To:</span>
-          {!dataExists ? (
-            <LoadingSelect />
-          ) : (
-            <RequiredSelector
-              data-cy="composer-community-selector"
-              onChange={this.setActiveCommunity}
-              value={activeCommunity}
-            >
-              {availableCommunities.map(community => {
-                return (
-                  <option key={community.id} value={community.id}>
-                    {community.name}
-                  </option>
-                );
-              })}
-            </RequiredSelector>
-          )}
-          {!dataExists ? (
-            <LoadingSelect />
-          ) : (
-            <RequiredSelector
-              data-cy="composer-channel-selector"
-              onChange={this.setActiveChannel}
-              value={activeChannel}
-            >
-              {availableChannels
-                .filter(channel => channel.community.id === activeCommunity)
-                .map(channel => {
+      <ComposerSlider isSlider={isSlider} isOpen={isOpen}>
+        <Overlay
+          isOpen={isOpen}
+          onClick={this.closeComposer}
+          data-cy="thread-composer-overlay"
+        />
+        <Container isSlider={isSlider}>
+          <Titlebar provideBack title={'New conversation'} noComposer />
+          <Dropdowns>
+            <span>To:</span>
+            {!dataExists ? (
+              <LoadingSelect />
+            ) : (
+              <RequiredSelector
+                data-cy="composer-community-selector"
+                onChange={this.setActiveCommunity}
+                value={activeCommunity}
+              >
+                {availableCommunities.map(community => {
                   return (
-                    <option key={channel.id} value={channel.id}>
-                      {channel.name}
+                    <option key={community.id} value={community.id}>
+                      {community.name}
                     </option>
                   );
                 })}
-            </RequiredSelector>
-          )}
-        </Dropdowns>
-        <ThreadInputs>
-          <Textarea
-            data-cy="composer-title-input"
-            onChange={this.changeTitle}
-            style={ThreadTitle}
-            value={this.state.title}
-            placeholder={"What's up?"}
-            ref={'titleTextarea'}
-            autoFocus={!threadSliderIsOpen}
-          />
-
-          <Editor
-            version={2}
-            onChange={this.changeBody}
-            state={this.state.body}
-            style={ThreadDescription}
-            editorRef={editor => (this.bodyEditor = editor)}
-            editorKey="thread-composer"
-            placeholder={'Write more thoughts here...'}
-            className={'threadComposer'}
-          />
-        </ThreadInputs>
-
-        <Actions>
+              </RequiredSelector>
+            )}
+            {!dataExists ? (
+              <LoadingSelect />
+            ) : (
+              <RequiredSelector
+                data-cy="composer-channel-selector"
+                onChange={this.setActiveChannel}
+                value={activeChannel}
+              >
+                {availableChannels
+                  .filter(channel => channel.community.id === activeCommunity)
+                  .map(channel => {
+                    return (
+                      <option key={channel.id} value={channel.id}>
+                        {channel.name}
+                      </option>
+                    );
+                  })}
+              </RequiredSelector>
+            )}
+          </Dropdowns>
+          <ThreadInputs>
+            <SegmentedControl
+              css={{
+                marginRight: 0,
+                marginLeft: 0,
+                marginTop: 0,
+                marginBottom: '32px',
+              }}
+            >
+              <Segment
+                selected={!this.state.preview}
+                onClick={() => this.setState({ preview: false })}
+              >
+                Write
+              </Segment>
+              <Segment
+                selected={this.state.preview}
+                onClick={() => this.setState({ preview: true })}
+              >
+                Preview
+              </Segment>
+            </SegmentedControl>
+            {preview ? (
+              /* $FlowFixMe */
+              <div style={{ padding: '0 32px' }}>
+                <ThreadHeading>{this.state.title}</ThreadHeading>
+                {/* $FlowFixMe */}
+                <PreviewEditor
+                  state={toState(
+                    JSON.parse(processThreadContent('TEXT', this.state.body))
+                  )}
+                />
+              </div>
+            ) : (
+              <Dropzone
+                accept={['image/gif', 'image/jpeg', 'image/png', 'video/mp4']}
+                disableClick
+                multiple={false}
+                onDropAccepted={this.uploadFiles}
+              >
+                {({ getRootProps, getInputProps, isDragActive }) => (
+                  <DropzoneWrapper
+                    {...getRootProps({
+                      refKey: 'innerRef',
+                    })}
+                  >
+                    <input {...getInputProps()} />
+                    <Textarea
+                      data-cy="composer-title-input"
+                      onChange={this.changeTitle}
+                      style={ThreadTitle}
+                      value={this.state.title}
+                      placeholder={'What‘s on your mind?'}
+                      autoFocus={!threadSliderIsOpen}
+                    />
+
+                    <MentionsInput
+                      onChange={this.changeBody}
+                      value={this.state.body}
+                      style={ThreadDescription}
+                      inputRef={editor => (this.bodyEditor = editor)}
+                      placeholder={'Add more thoughts here...'}
+                      className={'threadComposer'}
+                      dataCy="rich-text-editor"
+                    />
+                    <DropImageOverlay visible={isDragActive} />
+                  </DropzoneWrapper>
+                )}
+              </Dropzone>
+            )}
+          </ThreadInputs>
+
           {networkDisabled && (
             <DisabledWarning>
               Lost connection to the internet or server...
             </DisabledWarning>
           )}
-
-          <FlexRow>
-            <TextButton hoverColor="warn.alt" onClick={this.onCancelClick}>
-              Cancel
-            </TextButton>
-            <Button
-              data-cy="composer-publish-button"
-              onClick={this.publishThread}
-              loading={isPublishing}
-              disabled={
-                !title ||
-                title.trim().length === 0 ||
-                isPublishing ||
-                networkDisabled
-              }
-              color={'brand'}
-            >
-              Publish
-            </Button>
-          </FlexRow>
-        </Actions>
-      </Container>
+          <Actions>
+            <InputHints>
+              <MediaLabel>
+                <MediaInput
+                  type="file"
+                  accept={'.png, .jpg, .jpeg, .gif, .mp4'}
+                  multiple={false}
+                  onChange={this.uploadFile}
+                />
+                <Icon
+                  glyph="photo"
+                  tipLocation={'top-right'}
+                  tipText="Upload photo"
+                />
+              </MediaLabel>
+              <DesktopLink
+                target="_blank"
+                href="https://guides.github.com/features/mastering-markdown/"
+              >
+                <Icon
+                  tipText="Style with Markdown"
+                  tipLocation="top-right"
+                  glyph="markdown"
+                />
+              </DesktopLink>
+            </InputHints>
+            <ButtonRow>
+              <TextButton hoverColor="warn.alt" onClick={this.onCancelClick}>
+                Cancel
+              </TextButton>
+              <Button
+                data-cy="composer-publish-button"
+                onClick={this.publishThread}
+                loading={isLoading}
+                disabled={
+                  !title ||
+                  title.trim().length === 0 ||
+                  isLoading ||
+                  networkDisabled
+                }
+                color={'brand'}
+              >
+                Publish
+              </Button>
+            </ButtonRow>
+          </Actions>
+        </Container>
+      </ComposerSlider>
     );
   }
 }
 
 export const ThreadComposer = compose(
+  uploadImage,
   getComposerCommunitiesAndChannels, // query to get data
   publishThread, // mutation to publish a thread
   withRouter // needed to use history.push() as a post-publish action
diff --git a/src/components/composer/style.js b/src/components/composer/style.js
index 0f571c94da..c959e8a54e 100644
--- a/src/components/composer/style.js
+++ b/src/components/composer/style.js
@@ -1,17 +1,100 @@
-import styled from 'styled-components';
+import React from 'react';
+import styled, { css } from 'styled-components';
 import theme from 'shared/theme';
-import { hexa, Shadow, FlexRow, FlexCol, zIndex } from '../globals';
+import Icon from '../icons';
+import { hexa, Shadow, FlexRow, FlexCol, zIndex, Tooltip } from '../globals';
+
+export const DropzoneWrapper = styled.div`
+  padding: 0 32px;
+  position: relative;
+  height: 100%;
+`;
+
+export const DropImageOverlay = (props: { visible: boolean }) => {
+  return (
+    <DropImageOverlayWrapper visible={props.visible}>
+      <Icon glyph="photo" />
+      <h3>Drop image to upload</h3>
+    </DropImageOverlayWrapper>
+  );
+};
+
+export const DropImageOverlayWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 16px;
+  right: 16px;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: ${theme.bg.wash};
+  border-radius: 4px;
+  border: 1px solid ${theme.bg.border};
+  color: ${theme.text.secondary};
+  transition: opacity 125ms ease-in-out;
+
+  ${props =>
+    props.visible
+      ? css`
+          opacity: 0.9;
+        `
+      : css`
+          opacity: 0;
+          pointer-events: none;
+        `}
+`;
+
+export const ComposerSlider = styled.div`
+  display: ${props => (props.isSlider ? 'none' : 'block')};
+  ${props =>
+    props.isSlider &&
+    props.isOpen &&
+    css`
+      display: block;
+      position: fixed;
+      width: 50%;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: ${zIndex.composer};
+    `}
+`;
+
+export const Overlay = styled.div`
+  ${props =>
+    props.isOpen
+      ? `
+      position: fixed;
+      top: 48px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3000;
+      background: #000;
+      pointer-events: auto;
+      opacity: 0.4;
+    `
+      : `
+      opacity: 0;
+      pointer-events: none;
+
+    `};
+`;
 
 export const Container = styled(FlexCol)`
   background-color: ${theme.bg.default};
   display: grid;
-  grid-template-rows: 60px 1fr 64px;
+  grid-template-rows: 50px 1fr 64px;
   grid-template-columns: 100%;
   grid-template-areas: 'header' 'body' 'footer';
   align-self: stretch;
   flex: auto;
   overflow: hidden;
-  height: calc(100vh - 48px);
+  height: ${props => (props.isSlider ? '100vh' : 'calc(100vh - 48px)')};
 
   @media (max-width: 768px) {
     grid-template-rows: 48px 64px 1fr 64px;
@@ -21,18 +104,33 @@ export const Container = styled(FlexCol)`
   }
 `;
 
+export const DesktopLink = styled.a`
+  display: flex;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const ButtonRow = styled(FlexRow)`
+  @media (max-width: 768px) {
+    justify-content: flex-end;
+  }
+`;
+
 export const Actions = styled(FlexCol)`
   background: ${theme.bg.wash};
   border-top: 2px solid ${theme.bg.border};
-  padding: 8px;
+  padding: 8px 32px 8px 16px;
   border-radius: 0;
   align-self: stretch;
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
   position: relative;
   grid-area: footer;
+  z-index: ${zIndex.composer};
 
   @media (max-width: 768px) {
     padding: 8px;
@@ -42,7 +140,7 @@ export const Actions = styled(FlexCol)`
     box-shadow: none;
     background-color: transparent;
 
-    > div {
+    > ${ButtonRow} {
       width: 100%;
 
       > button:first-of-type {
@@ -50,12 +148,18 @@ export const Actions = styled(FlexCol)`
       }
 
       > button:last-of-type {
-        width: 100%;
+        width: calc(100% - 16px);
+        margin-right: 8px;
       }
     }
   }
 `;
 
+export const InputHints = styled(FlexRow)`
+  color: ${theme.text.alt};
+  font-size: 14px;
+`;
+
 export const Dropdowns = styled(FlexRow)`
   display: flex;
   align-items: center;
@@ -124,30 +228,22 @@ export const OptionalSelector = styled(Selector)`
 export const ThreadInputs = styled(FlexCol)`
   grid-area: body;
   overflow-y: scroll;
-  padding: 64px;
-  padding-left: 80px;
+  padding: 32px;
+  padding-top: 8px;
+  margin-left: -32px;
+  margin-right: -32px;
+  width: calc(100% + 64px);
   background-color: ${theme.bg.default};
-
-  @media (max-width: 768px) {
-    max-width: 100vw;
-    padding: 32px;
-    padding-left: 48px;
-  }
-
-  @media (max-width: 480px) {
-    max-width: 100vw;
-    padding: 16px;
-    padding-left: 48px;
-  }
+  z-index: ${zIndex.composer};
 `;
 
 export const ThreadTitle = {
-  fontSize: '24px',
+  fontSize: '28px',
   padding: '0',
   outline: 'none',
   border: '0',
-  lineHeight: '1.4',
-  fontWeight: '800',
+  lineHeight: '1.3',
+  fontWeight: '600',
   boxShadow: 'none',
   width: '100%',
   color: '#16171A',
@@ -161,11 +257,10 @@ export const ThreadTitle = {
 
 export const ThreadDescription = {
   fontSize: '16px',
-  fontWeight: '500',
+  fontWeight: '400',
   width: '100%',
   display: 'inline-block',
   lineHeight: '1.5',
-  padding: '0 32px 32px',
   outline: 'none',
   border: '0',
   boxShadow: 'none',
@@ -173,6 +268,9 @@ export const ThreadDescription = {
   whiteSpace: 'pre-wrap',
   overflowY: 'scroll',
   position: 'relative',
+  // NOTE(@mxstbr): Magic value to make the margin between
+  // the thread title and body match the preview
+  marginTop: '12px',
 };
 
 export const DisabledWarning = styled.div`
diff --git a/src/components/globals/index.js b/src/components/globals/index.js
index e9e15bb50f..c6e71ddaa0 100644
--- a/src/components/globals/index.js
+++ b/src/components/globals/index.js
@@ -70,7 +70,7 @@ export const zIndex = new function() {
   this.dropDown = this.chrome + 1; // dropDowns shouldn't appear behind the navBar
 
   this.slider = window.innerWidth < 768 ? this.chrome + 1 : this.chrome; // slider should appear significantly above the base to leave room for other elements
-  this.composer = this.slider - 2; // composer should never appear above the slider
+  this.composer = 4000; // should cover all screen except toasts
   this.chatInput = this.slider + 1; // the slider chatInput should always appear above the slider
   this.flyout = this.chatInput + 3; // flyout may overlap with chatInput and should take precedence
 
diff --git a/src/components/markdownHint/index.js b/src/components/markdownHint/index.js
new file mode 100644
index 0000000000..57fe152303
--- /dev/null
+++ b/src/components/markdownHint/index.js
@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+import { StyledMarkdownHint, Preformatted } from './style';
+
+type Props = {
+  dataCy?: string,
+  showHint: boolean,
+  style?: Object,
+};
+
+export const MarkdownHint = ({
+  showHint = true,
+  dataCy = '',
+  style = {},
+}: Props) => {
+  return (
+    <StyledMarkdownHint showHint={showHint} data-cy={dataCy} style={style}>
+      <b>**bold**</b>
+      <i>*italic*</i>
+      <Preformatted>`code`</Preformatted>
+      <Preformatted>```codeblock```</Preformatted>
+      <Preformatted>[name](link)</Preformatted>
+    </StyledMarkdownHint>
+  );
+};
diff --git a/src/components/markdownHint/style.js b/src/components/markdownHint/style.js
new file mode 100644
index 0000000000..f21078e93b
--- /dev/null
+++ b/src/components/markdownHint/style.js
@@ -0,0 +1,35 @@
+// @flow
+import styled from 'styled-components';
+import theme from 'shared/theme';
+
+export const StyledMarkdownHint = styled.div`
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-start;
+  margin-left: 56px;
+  font-size: 11px;
+  color: ${theme.text.alt};
+  line-height: 1;
+  padding: 6px 0;
+  opacity: ${({ showHint }) => (showHint ? 1 : 0)};
+  transition: opacity 200ms ease-in-out;
+  b {
+    font-weight: 600;
+  }
+  i,
+  b,
+  code {
+    margin-right: 3px;
+  }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+export const Preformatted = styled.code`
+  background-color: ${theme.bg.wash};
+  border: 1px solid ${theme.bg.border};
+  white-space: nowrap;
+  border-radius: 2px;
+`;
diff --git a/src/components/mentionsInput/index.js b/src/components/mentionsInput/index.js
index 75d1558a77..7f85425497 100644
--- a/src/components/mentionsInput/index.js
+++ b/src/components/mentionsInput/index.js
@@ -106,13 +106,15 @@ const SpectrumMentionsInput = (props: Props) => {
     return callback(uniqueResults.slice(0, 8));
   };
 
+  const { dataCy, ...rest } = props;
+
   return (
     <MentionsInput
-      style={MentionsInputStyle}
       displayTransform={username => `@${username}`}
       markup="@[__id__]"
       data-cy={props.dataCy}
-      {...props}
+      {...rest}
+      style={{ ...(props.style || {}), ...MentionsInputStyle }}
     >
       <Mention
         trigger="@"
diff --git a/src/components/mentionsInput/style.js b/src/components/mentionsInput/style.js
index 6e33c82f00..79fa23ab23 100644
--- a/src/components/mentionsInput/style.js
+++ b/src/components/mentionsInput/style.js
@@ -4,7 +4,9 @@ import theme from 'shared/theme';
 import { Truncate } from 'src/components/globals';
 
 export const MentionsInputStyle = {
+  overflow: 'visible',
   suggestions: {
+    zIndex: 99999,
     list: {
       backgroundColor: theme.bg.default,
       boxShadow: '1px 0 12px rgba(0,0,0,0.12)',
diff --git a/src/components/rich-text-editor/Image.js b/src/components/rich-text-editor/Image.js
index 7777788c66..35a2f38d69 100644
--- a/src/components/rich-text-editor/Image.js
+++ b/src/components/rich-text-editor/Image.js
@@ -22,26 +22,6 @@ export const ImageContainer = styled.div`
   position: relative;
   margin: 12px 0;
   pointer-events: none;
-  ${props =>
-    props.active &&
-    css`
-      border-radius: 8px;
-      overflow: hidden;
-      box-shadow: 0 4px 8px rgba(56, 24, 229, 0.2);
-    `} transition: all 0.1s ease-in-out;
-`;
-
-export const ActiveOverlay = styled.span`
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(56, 24, 229, 0.1);
-  border-radius: 8px;
-  border: 1px solid ${theme.brand.default};
-  opacity: ${props => (props.active ? 1 : 0)};
-  transition: opacity 0.1s ease-in-out;
 `;
 
 const Img = styled.img`
@@ -72,11 +52,10 @@ const Image = (props: ImageProps) => {
     ...elementProps
   } = props;
   const active = props.blockProps.isFocused;
-  const { src } = contentState.getEntity(block.getEntityAt(0)).getData();
+  const { src, alt } = contentState.getEntity(block.getEntityAt(0)).getData();
   return (
-    <ImageContainer active={active}>
-      <ActiveOverlay active={active} />
-      <Img src={src} active={active} {...elementProps} />
+    <ImageContainer>
+      <Img src={src} alt={alt} active={active} {...elementProps} />
     </ImageContainer>
   );
 };
diff --git a/src/components/rich-text-editor/container.js b/src/components/rich-text-editor/container.js
index aa70dc45a7..c61fc99162 100644
--- a/src/components/rich-text-editor/container.js
+++ b/src/components/rich-text-editor/container.js
@@ -26,6 +26,7 @@ import OutsideClickHandler from 'src/components/outsideClickHandler';
 import Icon from 'src/components/icons';
 import { IconButton } from 'src/components/buttons';
 import mentionsDecorator from 'shared/clients/draft-js/mentions-decorator/index.web.js';
+import linksDecorator from 'shared/clients/draft-js/links-decorator/index.web.js';
 import { isAndroid } from 'shared/draft-utils';
 import MediaInput from 'src/components/mediaInput';
 import Image from './Image';
@@ -40,6 +41,7 @@ import {
   Action,
   EmbedUI,
   customStyleMap,
+  customStyleFn,
 } from './style';
 
 type Props = {
@@ -52,6 +54,7 @@ type Props = {
   className?: string,
   style?: Object,
   version?: 2,
+  isOpen: boolean,
 };
 
 type State = {
@@ -201,118 +204,79 @@ class Editor extends React.Component<Props, State> {
       version,
       placeholder,
       readOnly,
+      isOpen,
       ...rest
     } = this.props;
     const { embedding, inserting } = this.state;
 
-    if (version === 2) {
-      return (
-        <ComposerBase
-          data-cy="rich-text-editor"
-          className={`markdown ${className || ''}`}
-          focus={focus}
-        >
-          <DraftEditor
-            data-cy="rich-text-editor"
-            editorState={state}
-            onChange={onChange}
-            plugins={this.state.plugins}
-            handleDroppedFiles={this.handleDroppedFiles}
-            editorRef={editor => {
-              this.editor = editor;
-              if (editorRef) editorRef(editor);
-            }}
-            readOnly={readOnly}
-            placeholder={!readOnly && placeholder}
-            spellCheck={true}
-            autoCapitalize="sentences"
-            autoComplete="on"
-            autoCorrect="on"
-            stripPastedStyles={true}
-            decorators={[mentionsDecorator]}
-            customStyleMap={customStyleMap}
-            {...rest}
-          />
-          {!readOnly &&
-            !isAndroid() && (
-              <OutsideClickHandler onOutsideClick={this.closeToolbar}>
-                <SideToolbar editorState={state} editorRef={this.editor}>
-                  <Expander inserting={inserting}>
-                    <IconButton
-                      glyph={'inserter'}
-                      onClick={this.toggleToolbarDisplayState}
-                    />
-                    <Action>
-                      <MediaInput
-                        onChange={this.addImage}
-                        multiple
-                        tipLocation={'right'}
+    return (
+      <ComposerBase
+        data-cy="rich-text-editor"
+        className={`markdown ${className || ''}`}
+        focus={focus}
+        isOpen={isOpen}
+      >
+        <DraftEditor
+          editorState={state}
+          onChange={onChange}
+          plugins={this.state.plugins}
+          handleDroppedFiles={this.handleDroppedFiles}
+          editorRef={editor => {
+            this.editor = editor;
+            if (editorRef) editorRef(editor);
+          }}
+          readOnly={readOnly}
+          placeholder={!readOnly && placeholder}
+          spellCheck={true}
+          autoCapitalize="sentences"
+          autoComplete="on"
+          autoCorrect="on"
+          stripPastedStyles={true}
+          decorators={[mentionsDecorator, linksDecorator]}
+          customStyleMap={customStyleMap}
+          customStyleFn={customStyleFn}
+          {...rest}
+        />
+        {!readOnly && !isAndroid() && (
+          <OutsideClickHandler onOutsideClick={this.closeToolbar}>
+            <SideToolbar editorState={state} editorRef={this.editor}>
+              <Expander inserting={inserting}>
+                <IconButton
+                  glyph={'inserter'}
+                  onClick={this.toggleToolbarDisplayState}
+                />
+                <Action>
+                  <MediaInput
+                    onChange={this.addImage}
+                    multiple
+                    tipLocation={'right'}
+                  />
+                </Action>
+                <Action embedding={embedding}>
+                  <EmbedUI onSubmit={this.addEmbed} embedding={embedding}>
+                    <label htmlFor="embed-input">
+                      <Icon
+                        glyph={'embed'}
+                        tipText={'Embed a URL'}
+                        onClick={this.toggleEmbedInputState}
                       />
-                    </Action>
-                    <Action embedding={embedding}>
-                      <EmbedUI onSubmit={this.addEmbed} embedding={embedding}>
-                        <label htmlFor="embed-input">
-                          <Icon
-                            glyph={'embed'}
-                            tipText={'Embed a URL'}
-                            onClick={this.toggleEmbedInputState}
-                          />
-                          <input
-                            id="embed-input"
-                            type="url"
-                            placeholder="Enter a URL to embed"
-                            value={this.state.embedUrl}
-                            onChange={this.changeEmbedUrl}
-                          />
-                        </label>
-                        <button onClick={this.addEmbed}>Embed</button>
-                      </EmbedUI>
-                    </Action>
-                  </Expander>
-                </SideToolbar>
-              </OutsideClickHandler>
-            )}
-        </ComposerBase>
-      );
-    } else {
-      return (
-        <div
-          className={className}
-          style={{ width: '100%', height: '100%', ...style }}
-        >
-          <Wrapper className="markdown" focus={focus}>
-            <DraftEditor
-              data-cy="rich-text-editor"
-              editorState={state}
-              onChange={onChange}
-              plugins={this.state.plugins}
-              handleDroppedFiles={this.handleDroppedFiles}
-              editorRef={editor => {
-                this.editor = editor;
-                if (editorRef) editorRef(editor);
-              }}
-              readOnly={readOnly}
-              placeholder={!readOnly && placeholder}
-              spellCheck={true}
-              autoCapitalize="sentences"
-              autoComplete="on"
-              autoCorrect="on"
-              stripPastedStyles={true}
-              decorators={[mentionsDecorator]}
-              customStyleMap={customStyleMap}
-              {...rest}
-            />
-          </Wrapper>
-          {!readOnly && (
-            <MediaRow>
-              <MediaInput onChange={this.addImage} multiple>
-                Add
-              </MediaInput>
-            </MediaRow>
-          )}
-        </div>
-      );
-    }
+                      <input
+                        id="embed-input"
+                        type="url"
+                        placeholder="Enter a URL to embed"
+                        value={this.state.embedUrl}
+                        onChange={this.changeEmbedUrl}
+                      />
+                    </label>
+                    <button onClick={this.addEmbed}>Embed</button>
+                  </EmbedUI>
+                </Action>
+              </Expander>
+            </SideToolbar>
+          </OutsideClickHandler>
+        )}
+      </ComposerBase>
+    );
   }
 }
 
diff --git a/src/components/rich-text-editor/style.js b/src/components/rich-text-editor/style.js
index a6233f11ce..89b0881c04 100644
--- a/src/components/rich-text-editor/style.js
+++ b/src/components/rich-text-editor/style.js
@@ -58,15 +58,20 @@ export const Mention = compose(
   connect()
 )(MentionWithCurrentUser);
 
+export const customStyleFn = (style: Object, block: Object) => {
+  if (style.first() === 'CODE' && block.getType() === 'unstyled')
+    return {
+      border: `1px solid ${theme.bg.border}`,
+      borderRadius: '4px',
+      backgroundColor: theme.bg.wash,
+      padding: '1px 4px',
+      fontFamily: 'monospace',
+      color: theme.warn.alt,
+    };
+  return style;
+};
+
 export const customStyleMap = {
-  CODE: {
-    border: `1px solid ${theme.bg.border}`,
-    borderRadius: '4px',
-    backgroundColor: theme.bg.wash,
-    padding: '1px 4px',
-    fontFamily: 'monospace',
-    color: theme.warn.alt,
-  },
   blockquote: {
     lineHeight: '1.5',
     borderLeft: `4px solid ${theme.bg.border}`,
@@ -103,9 +108,10 @@ export const MediaRow = styled.div`
 
 export const ComposerBase = styled.div`
   position: relative;
-  flex: none;
-  flex-direction: column;
-  display: flex;
+  flex: 1;
+  max-height: ${props => (props.isOpen ? 'calc(100vh - 160px)' : 'auto')};
+  overflow-y: ${props => (props.isOpen ? 'scroll' : 'auto')};
+  padding-left: ${props => (props.isOpen ? '25px' : '0')};
 
   > label {
     position: absolute;
@@ -147,9 +153,12 @@ export const Expander = styled.div`
   justify-content: flex-start;
   padding: 4px;
   border-radius: 12px;
+  margin-left: 5px;
 
   > button > div {
     color: ${theme.text.placeholder};
+    background-color: white;
+    border-radius: 12px;
   }
 
   > button:hover > div {
@@ -164,6 +173,7 @@ export const Expander = styled.div`
 
       > button > div {
         color: ${theme.brand.wash};
+        background-color: transparent;
       }
 
       > button:hover > div {
diff --git a/src/components/segmentedControl/index.js b/src/components/segmentedControl/index.js
index 53e0c26bc9..f3cd08e993 100644
--- a/src/components/segmentedControl/index.js
+++ b/src/components/segmentedControl/index.js
@@ -10,6 +10,7 @@ export const SegmentedControl = styled(FlexRow)`
   border-bottom: 2px solid ${theme.bg.border};
   align-items: stretch;
   min-height: 48px;
+  ${props => props.css};
 
   @media (max-width: 768px) {
     overflow-y: hidden;
@@ -54,7 +55,6 @@ export const Segment = styled(FlexRow)`
   @media (max-width: 768px) {
     flex: auto;
     justify-content: center;
-    margin-top: 32px;
     text-align: center;
 
     .icon {
diff --git a/src/components/threadComposer/components/composer.js b/src/components/threadComposer/components/composer.js
deleted file mode 100644
index 9f524e8b11..0000000000
--- a/src/components/threadComposer/components/composer.js
+++ /dev/null
@@ -1,719 +0,0 @@
-// @flow
-import * as React from 'react';
-import compose from 'recompose/compose';
-import Textarea from 'react-textarea-autosize';
-import { withRouter } from 'react-router';
-import { connect } from 'react-redux';
-import { closeComposer } from '../../../actions/composer';
-import { changeActiveThread } from '../../../actions/dashboardFeed';
-import { addToastWithTimeout } from '../../../actions/toasts';
-import Editor from '../../rich-text-editor';
-import {
-  toPlainText,
-  fromPlainText,
-  toJSON,
-  toState,
-  isAndroid,
-} from 'shared/draft-utils';
-import getComposerCommunitiesAndChannels from 'shared/graphql/queries/composer/getComposerCommunitiesAndChannels';
-import type { GetComposerType } from 'shared/graphql/queries/composer/getComposerCommunitiesAndChannels';
-import publishThread from 'shared/graphql/mutations/thread/publishThread';
-import { ESC } from 'src/helpers/keycodes';
-import { TextButton, Button } from '../../buttons';
-import { FlexRow } from '../../../components/globals';
-import { LoadingComposer } from '../../loading';
-import viewNetworkHandler from '../../viewNetworkHandler';
-import {
-  Container,
-  Composer,
-  Overlay,
-  ThreadDescription,
-  ThreadTitle,
-  ContentContainer,
-  Actions,
-  Dropdowns,
-  DisconnectedWarning,
-} from '../style';
-import { events, track } from 'src/helpers/analytics';
-import type { Dispatch } from 'redux';
-
-type Props = {
-  isOpen: boolean,
-  dispatch: Dispatch<Object>,
-  isLoading: boolean,
-  activeChannel?: string,
-  activeCommunity?: string,
-  isInbox: boolean,
-  mutate: Function,
-  history: Object,
-  publishThread: Function,
-  data: {
-    refetch: Function,
-    user: GetComposerType,
-  },
-  networkOnline: boolean,
-  websocketConnection: string,
-};
-
-type State = {
-  isMounted: boolean,
-  title: string,
-  body: Object,
-  availableCommunities: Array<any>,
-  availableChannels: Array<any>,
-  activeCommunity: ?string,
-  activeChannel: ?string,
-  isPublishing: boolean,
-  postWasPublished: boolean,
-};
-
-const LS_BODY_KEY = 'last-thread-composer-body';
-const LS_TITLE_KEY = 'last-thread-composer-title';
-const LS_COMPOSER_EXPIRE = 'last-thread-composer-expire';
-
-const ONE_DAY = (new Date().getTime() + 60 * 60 * 24 * 1000).toString();
-
-class ThreadComposerWithData extends React.Component<Props, State> {
-  bodyEditor: any;
-  titleTextarea: any;
-
-  constructor(props) {
-    super(props);
-
-    const { storedBody, storedTitle } = this.getStoredContent();
-
-    this.state = {
-      isMounted: true,
-      title: storedTitle || '',
-      body: storedBody || fromPlainText(''),
-      availableCommunities: [],
-      availableChannels: [],
-      activeCommunity: '',
-      activeChannel: '',
-      isPublishing: false,
-      postWasPublished: false,
-    };
-  }
-
-  removeStorage = () => {
-    localStorage.removeItem(LS_BODY_KEY);
-    localStorage.removeItem(LS_TITLE_KEY);
-    localStorage.removeItem(LS_COMPOSER_EXPIRE);
-  };
-
-  getStoredContent = () => {
-    // We persist the body and title to localStorage
-    // so in case the app crashes users don't loose content
-    let storedBody, storedTitle;
-
-    if (this.hasLocalStorage()) {
-      try {
-        const expireTime = localStorage.getItem(LS_COMPOSER_EXPIRE);
-        const currTime = new Date().getTime();
-        /////if current time is greater than valid till of text then please expire title/body back to ''
-        if (currTime > parseInt(expireTime, 10)) {
-          this.removeStorage();
-          return { storedBody, storedTitle };
-        } else {
-          storedBody = toState(
-            JSON.parse(localStorage.getItem(LS_BODY_KEY) || '')
-          );
-          storedTitle = localStorage.getItem(LS_TITLE_KEY);
-          return { storedBody, storedTitle };
-        }
-      } catch (err) {
-        this.removeStorage();
-        return { storedBody, storedTitle };
-      }
-    }
-
-    return { storedBody, storedTitle };
-  };
-
-  hasLocalStorage = () => !!localStorage;
-
-  persistTitle = title => {
-    if (this.hasLocalStorage()) {
-      localStorage.setItem(LS_TITLE_KEY, title);
-      localStorage.setItem(LS_COMPOSER_EXPIRE, ONE_DAY);
-    }
-  };
-
-  persistBody = body => {
-    if (this.hasLocalStorage()) {
-      localStorage.setItem(LS_BODY_KEY, JSON.stringify(toJSON(body)));
-      localStorage.setItem(LS_COMPOSER_EXPIRE, ONE_DAY);
-    }
-  };
-
-  handleIncomingProps = props => {
-    const { isMounted } = this.state;
-    if (!isMounted) return;
-    /*
-      Create a new array of communities only containing the `node` data from
-      graphQL. Then filter the resulting channel to remove any communities
-      that don't have any channels yet
-    */
-
-    // if the user doesn't exist, bust outta here
-    if (!props.data.user || props.data.user === undefined) return;
-
-    const availableCommunities = props.data.user.communityConnection.edges
-      .map(edge => edge && edge.node)
-      .filter(
-        community =>
-          community &&
-          (community.communityPermissions.isMember ||
-            community.communityPermissions.isOwner)
-      )
-      .sort((a, b) => {
-        const bc = b && parseInt(b.communityPermissions.reputation, 10);
-        const ac = a && parseInt(a.communityPermissions.reputation, 10);
-        return bc && ac && bc <= ac ? -1 : 1;
-      });
-
-    /*
-      Iterate through each of our community nodes to construct a new array
-      of possible channels
-
-      returns an array of array, where each parent array represents a community
-      and each child array represents the channels within that parent
-      community
-    */
-    const availableChannels = props.data.user.channelConnection.edges
-      .map(edge => edge && edge.node)
-      .filter(
-        channel =>
-          channel &&
-          (channel.channelPermissions.isMember ||
-            channel.channelPermissions.isOwner)
-      )
-      .filter(channel => {
-        if (!channel) return null;
-        if (!channel.isPrivate) return channel;
-        if (channel.isArchived) return null;
-        return channel;
-      })
-      .filter(channel => {
-        if (!channel) return null;
-        return !channel.isArchived;
-      });
-
-    /*
-      If a user is viewing a communit or channel, we use the url as a prop
-      to set a default activeCommunity and activeChannel
-
-      If no defaults are set, we use the first available community, and then
-      find the first available channel within that available community
-    */
-    const activeCommunityFromPropsOrState =
-      props.activeCommunity || this.state.activeCommunity;
-
-    let activeCommunity =
-      availableCommunities &&
-      (activeCommunityFromPropsOrState
-        ? availableCommunities.filter(community => {
-            if (!community) return null;
-            return (
-              community.slug.toLowerCase() ===
-              activeCommunityFromPropsOrState.toLowerCase()
-            );
-          })
-        : availableCommunities);
-
-    activeCommunity =
-      activeCommunity && activeCommunity.length > 0 && !!activeCommunity[0]
-        ? activeCommunity[0].id
-        : null;
-
-    if (!activeCommunity) {
-      return props.data.refetch();
-    } else {
-      this.setActiveStuff(
-        availableCommunities,
-        availableChannels,
-        activeCommunity
-      );
-    }
-  };
-
-  // prettier-ignore
-  setActiveStuff = (availableCommunities, availableChannels, activeCommunity) => {
-    const props = this.props;
-    const { isMounted } = this.state;
-    if (!isMounted) return;
-    // get the channels for the proper community
-    const activeCommunityChannels = availableChannels.filter(
-      channel => channel && channel.community.id === activeCommunity
-    );
-    let activeChannel = [];
-
-    // Get the active channel if there is one
-    if (props.activeChannel) {
-      activeChannel = activeCommunityChannels.filter(
-        channel =>
-          channel &&
-          props.activeChannel &&
-          // $FlowFixMe
-          channel.slug.toLowerCase() === props.activeChannel.toLowerCase()
-      );
-    } else {
-      // Try and get the default channel for the active community
-      activeChannel = activeCommunityChannels.filter(
-        channel => channel && channel.isDefault
-      );
-      // If there is no default channel capitulate and take the first one
-      if (activeChannel.length === 0) {
-        activeChannel = activeCommunityChannels;
-      } else if (activeChannel.length > 1) {
-        const generalChannel = activeChannel.filter(
-          channel => channel && channel.slug === 'general'
-        );
-        if (generalChannel.length > 0) activeChannel = generalChannel;
-      }
-    }
-
-    // ensure that if no items were found for some reason, we don't crash the app
-    // and instead just set null values on the composer
-    activeChannel = (activeChannel.length > 0 && !!activeChannel[0]) ? activeChannel[0].id : null;
-
-    const { storedTitle, storedBody } = this.getStoredContent()
-
-    this.setState({
-      title: storedTitle || '',
-      body: storedBody || fromPlainText(''),
-      availableCommunities,
-      availableChannels,
-      activeCommunity,
-      activeChannel,
-      isPublishing: false,
-    });
-  };
-
-  componentDidMount() {
-    track(events.THREAD_CREATED_INITED);
-    this.setState({ isMounted: true });
-    this.props.data
-      .refetch()
-      .then(result => {
-        // we have to rebuild a new props object to pass to `this.handleIncomingProps`
-        // in order to retain all the previous props passed in from the parent
-        // component and the initial data functions provided by apollo
-        const newProps = Object.assign({}, this.props, {
-          ...this.props,
-          data: {
-            ...this.props.data,
-            user: {
-              ...this.props.data.user,
-              ...result.data.user,
-            },
-          },
-        });
-        return this.handleIncomingProps(newProps);
-      })
-      .catch(err =>
-        this.props.dispatch(addToastWithTimeout('error', err.message))
-      );
-
-    if (this.titleTextarea && this.titleTextarea.focus)
-      this.titleTextarea.focus();
-  }
-
-  componentWillUpdate(nextProps) {
-    const { isOpen } = nextProps;
-    if (isOpen) {
-      // $FlowIssue
-      document.addEventListener('keydown', this.handleKeyPress, false);
-    } else {
-      // $FlowIssue
-      document.removeEventListener('keydown', this.handleKeyPress, false);
-    }
-  }
-
-  componentWillUnmount() {
-    this.setState({ isMounted: false });
-    // $FlowIssue
-    document.removeEventListener('keydown', this.handleKeyPress, false);
-    const { postWasPublished } = this.state;
-
-    // if a post was published, in this session, clear redux so that the next
-    // composer open will start fresh
-    if (postWasPublished) return this.closeComposer();
-
-    // otherwise, clear the composer normally and save the state
-    return this.closeComposer();
-  }
-
-  handleKeyPress = e => {
-    if (e.keyCode === ESC) {
-      this.closeComposer();
-    }
-  };
-
-  changeTitle = e => {
-    const title = e.target.value;
-    if (/\n$/g.test(title)) {
-      this.bodyEditor && this.bodyEditor.focus && this.bodyEditor.focus();
-      return;
-    }
-
-    this.persistTitle(title);
-    this.setState({ title });
-  };
-
-  changeBody = body => {
-    this.persistBody(body);
-    this.setState({ body });
-  };
-
-  componentDidUpdate(prevProps) {
-    const curr = this.props;
-    const { isMounted } = this.state;
-    if (!isMounted) return;
-    if (prevProps.isLoading && !curr.isLoading)
-      return this.handleIncomingProps(this.props);
-
-    const { availableCommunities, availableChannels } = this.state;
-    let activeCommunity;
-
-    if (prevProps.activeCommunity !== this.props.activeCommunity) {
-      activeCommunity = this.props.activeCommunity
-        ? availableCommunities.filter(community => {
-            return community.slug === this.props.activeCommunity;
-          })[0].id
-        : availableCommunities[0].id;
-
-      this.setState({
-        activeCommunity,
-      });
-    }
-
-    if (prevProps.activeChannel !== this.props.activeChannel) {
-      const activeCommunityChannels = availableChannels.filter(
-        channel => channel.community.id === activeCommunity
-      );
-      let activeChannel = [];
-
-      // Get the active channel if there is one
-      if (this.props.activeChannel) {
-        activeChannel = activeCommunityChannels.filter(
-          channel => channel.slug === this.props.activeChannel
-        );
-      } else {
-        // Try and get the default channel for the active community
-        activeChannel = activeCommunityChannels.filter(
-          channel => channel.isDefault
-        );
-        // If there is no default channel capitulate and take the first one
-        if (activeChannel.length === 0) {
-          activeChannel = activeCommunityChannels;
-          // If there are more than one default ones, try and choose the "General" one if it exists
-        } else if (activeChannel.length > 1) {
-          const generalChannel = activeChannel.filter(
-            channel => channel.slug === 'general'
-          );
-          if (generalChannel.length > 0) activeChannel = generalChannel;
-        }
-      }
-
-      // ensure that if no items were found for some reason, we don't crash the app
-      // and instead just set null values on the composer
-      activeChannel = activeChannel.length > 0 ? activeChannel[0].id : null;
-
-      this.setState({
-        activeChannel,
-      });
-    }
-  }
-
-  closeComposer = (clear?: string) => {
-    // we will clear the composer if it unmounts as a result of a post
-    // being published, that way the next composer open will start fresh
-    if (clear) return this.props.dispatch(closeComposer());
-
-    // otherwise, we will save the editor state to rehydrate the title and
-    // body if the user reopens the composer in the same session
-    this.props.dispatch(closeComposer());
-  };
-
-  setActiveCommunity = e => {
-    const newActiveCommunity = e.target.value;
-    const activeCommunityChannels = this.state.availableChannels.filter(
-      channel => channel && channel.community.id === newActiveCommunity
-    );
-    const newActiveCommunityData = this.state.availableCommunities.find(
-      community => community && community.id === newActiveCommunity
-    );
-    const newActiveChannel =
-      activeCommunityChannels.find(channel => {
-        if (!channel) return null;
-        // If there is an active channel and we're switching back to the currently open community
-        // select that channel
-        if (
-          this.props.activeChannel &&
-          newActiveCommunityData &&
-          this.props.activeCommunity === newActiveCommunityData.slug
-        ) {
-          return channel.slug === this.props.activeChannel;
-        }
-        // Otherwise select the default one
-        return channel.isDefault;
-        // Default to the first channel if no default one can be found
-      }) || activeCommunityChannels[0];
-
-    this.setState({
-      activeCommunity: newActiveCommunity,
-      activeChannel: newActiveChannel.id,
-    });
-  };
-
-  setActiveChannel = e => {
-    const activeChannel = e.target.value;
-
-    this.setState({
-      activeChannel,
-    });
-  };
-
-  publishThread = () => {
-    // if no title and no channel is set, don't allow a thread to be published
-    if (!this.state.title || !this.state.activeChannel) {
-      return;
-    }
-
-    // isPublishing will change the publish button to a loading spinner
-    this.setState({
-      isPublishing: true,
-    });
-
-    const { dispatch, networkOnline, websocketConnection } = this.props;
-
-    if (!networkOnline) {
-      return dispatch(
-        addToastWithTimeout(
-          'error',
-          'Not connected to the internet - check your internet connection or try again'
-        )
-      );
-    }
-
-    if (
-      websocketConnection !== 'connected' &&
-      websocketConnection !== 'reconnected'
-    ) {
-      return dispatch(
-        addToastWithTimeout(
-          'error',
-          'Error connecting to the server - hang tight while we try to reconnect'
-        )
-      );
-    }
-
-    // define new constants in order to construct the proper shape of the
-    // input for the publishThread mutation
-    const { activeChannel, activeCommunity, title, body } = this.state;
-    const channelId = activeChannel;
-    const communityId = activeCommunity;
-    const jsonBody = toJSON(body);
-
-    const content = {
-      title,
-      // NOTE(@mxstbr): On Android we send the text as plain text and parse the raw
-      // markdown on the server
-      body: isAndroid() ? toPlainText(body) : JSON.stringify(jsonBody),
-    };
-
-    // Get the images
-    const filesToUpload = Object.keys(jsonBody.entityMap)
-      .filter(
-        key =>
-          jsonBody.entityMap[key].type.toLowerCase() === 'image' &&
-          jsonBody.entityMap[key].data.file &&
-          jsonBody.entityMap[key].data.file.constructor === File
-      )
-      .map(key => jsonBody.entityMap[key].data.file);
-
-    // this.props.mutate comes from a higher order component defined at the
-    // bottom of this file
-    const thread = {
-      channelId,
-      communityId,
-      type: isAndroid() ? 'TEXT' : 'DRAFTJS',
-      content,
-      filesToUpload,
-    };
-
-    this.props
-      .publishThread(thread)
-      // after the mutation occurs, it will either return an error or the new
-      // thread that was published
-      .then(({ data }) => {
-        // get the thread id to redirect the user
-        const id = data.publishThread.id;
-
-        this.removeStorage();
-
-        // stop the loading spinner on the publish button
-        this.setState({
-          postWasPublished: true,
-          isPublishing: false,
-        });
-
-        // redirect the user to the thread
-        // if they are in the inbox, select it
-        this.props.isInbox
-          ? this.props.dispatch(changeActiveThread(id))
-          : this.props.history.push(`?thread=${id}`);
-
-        this.props.dispatch(
-          addToastWithTimeout('success', 'Thread published!')
-        );
-
-        this.props.dispatch(closeComposer());
-
-        return;
-      })
-      .catch(err => {
-        this.setState({
-          isPublishing: false,
-        });
-        this.props.dispatch(addToastWithTimeout('error', err.message));
-      });
-  };
-
-  render() {
-    const {
-      title,
-      availableChannels,
-      availableCommunities,
-      activeCommunity,
-      activeChannel,
-      isPublishing,
-    } = this.state;
-
-    const {
-      isOpen,
-      isLoading,
-      isInbox,
-      networkOnline,
-      websocketConnection,
-    } = this.props;
-
-    const networkDisabled =
-      !networkOnline ||
-      (websocketConnection !== 'connected' &&
-        websocketConnection !== 'reconnected');
-
-    if (availableCommunities && availableChannels) {
-      return (
-        <Container isOpen={isOpen} isInbox={isInbox} data-cy="thread-composer">
-          <Overlay
-            isOpen={isOpen}
-            onClick={this.closeComposer}
-            isInbox={isInbox}
-            data-cy="thread-composer-overlay"
-          />
-          <Composer isOpen={isOpen} isInbox={isInbox}>
-            <ContentContainer isOpen={isOpen}>
-              {networkDisabled && (
-                <DisconnectedWarning>
-                  Lost connection to internet or server...
-                </DisconnectedWarning>
-              )}
-
-              <Textarea
-                onChange={this.changeTitle}
-                style={ThreadTitle}
-                value={this.state.title}
-                placeholder={'What do you want to talk about?'}
-                innerRef={ref => (this.titleTextarea = ref)}
-                autoFocus
-              />
-
-              <Editor
-                onChange={this.changeBody}
-                state={this.state.body}
-                style={ThreadDescription}
-                editorRef={editor => (this.bodyEditor = editor)}
-                editorKey="thread-composer"
-                placeholder="Put your text, photos, code, or embeds here..."
-                className={'threadComposer'}
-              />
-
-              <Actions>
-                <FlexRow>
-                  <Dropdowns>
-                    <select
-                      onChange={this.setActiveCommunity}
-                      value={activeCommunity}
-                    >
-                      {availableCommunities.map(community => {
-                        return (
-                          <option key={community.id} value={community.id}>
-                            {community.name}
-                          </option>
-                        );
-                      })}
-                    </select>
-                    <select
-                      onChange={this.setActiveChannel}
-                      value={activeChannel}
-                    >
-                      {availableChannels
-                        .filter(
-                          channel => channel.community.id === activeCommunity
-                        )
-                        .map((channel, i) => {
-                          return (
-                            <option key={channel.id} value={channel.id}>
-                              {channel.name}
-                            </option>
-                          );
-                        })}
-                    </select>
-                  </Dropdowns>
-                </FlexRow>
-                <FlexRow>
-                  <TextButton
-                    hoverColor="warn.alt"
-                    onClick={this.closeComposer}
-                  >
-                    Cancel
-                  </TextButton>
-                  <Button
-                    onClick={this.publishThread}
-                    loading={isPublishing}
-                    disabled={!title || isPublishing || networkDisabled}
-                    color={'brand'}
-                  >
-                    Publish
-                  </Button>
-                </FlexRow>
-              </Actions>
-            </ContentContainer>
-          </Composer>
-        </Container>
-      );
-    }
-
-    if (isLoading) {
-      return <LoadingComposer />;
-    }
-
-    return null;
-  }
-}
-
-const map = state => ({
-  isOpen: state.composer.isOpen,
-  websocketConnection: state.connectionStatus.websocketConnection,
-  networkOnline: state.connectionStatus.networkOnline,
-});
-export default compose(
-  // $FlowIssue
-  connect(map),
-  getComposerCommunitiesAndChannels,
-  publishThread,
-  viewNetworkHandler,
-  withRouter
-)(ThreadComposerWithData);
diff --git a/src/components/threadComposer/index.js b/src/components/threadComposer/index.js
index 7584617ffa..77578eea75 100644
--- a/src/components/threadComposer/index.js
+++ b/src/components/threadComposer/index.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import ComposerPlaceholder from './components/placeholder';
 import ComposerEditor from './components/composer';
 
 class ThreadComposerWithData extends Component {
@@ -19,13 +18,7 @@ class ThreadComposerWithData extends Component {
         activeCommunity={activeCommunity}
         activeChannel={activeChannel}
       />
-    ) : (
-      <ComposerPlaceholder
-        isInbox={isInbox}
-        isOpen={isOpen}
-        showCommunityOwnerUpsell={showCommunityOwnerUpsell}
-      />
-    );
+    ) : null;
   }
 }
 
diff --git a/src/components/threadComposer/style.js b/src/components/threadComposer/style.js
index cce60900c7..cd834274bc 100644
--- a/src/components/threadComposer/style.js
+++ b/src/components/threadComposer/style.js
@@ -1,4 +1,4 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import theme from 'shared/theme';
 import { hexa, Transition, FlexRow, FlexCol, zIndex } from '../globals';
 
@@ -20,13 +20,18 @@ export const Container = styled(FlexRow)`
 `;
 
 export const Composer = styled.div`
-  position: relative;
-  z-index: ${props => (props.isInbox ? '3001' : zIndex.composer)};
-  width: 100%;
-  display: block;
-  min-height: 64px;
   transition: ${Transition.hover.off};
   background-color: ${theme.bg.default};
+  position: ${props => (props.isOpen ? 'fixed' : 'relative')};
+  min-height: ${props => (props.isOpen ? '100vh' : '64px')};
+  width: ${props => (props.isOpen ? '50%' : '100%')};
+  ${props =>
+    props.isOpen &&
+    css`
+      top: 0;
+      right: 0;
+      z-index: ${zIndex.composer};
+    `}
 
   &:hover {
     transition: none;
@@ -52,7 +57,7 @@ export const Overlay = styled.div`
       bottom: 0;
       width: 100%;
       height: 100%;
-      z-index: ${props.isInbox ? '3000' : zIndex.composer - 1};
+      z-index: ${zIndex.slider + 2};
       background: #000;
       pointer-events: auto;
       opacity: 0.4;
@@ -94,7 +99,9 @@ export const PlaceholderLabel = styled.h3`
 `;
 
 export const ContentContainer = styled.div`
-  display: ${props => (props.isOpen ? 'block' : 'none')};
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 
   @media (max-width: 768px) {
     width: 100%;
diff --git a/src/views/channel/index.js b/src/views/channel/index.js
index a1a59e80be..d2c3531e31 100644
--- a/src/views/channel/index.js
+++ b/src/views/channel/index.js
@@ -5,7 +5,8 @@ import { connect } from 'react-redux';
 import generateMetaInfo from 'shared/generate-meta-info';
 import { CommunityAvatar } from 'src/components/avatar';
 import { addCommunityToOnboarding } from 'src/actions/newUserOnboarding';
-import ThreadComposer from 'src/components/threadComposer';
+import Composer from 'src/components/composer';
+import ComposerPlaceholder from 'src/components/threadComposer/components/placeholder';
 import Head from 'src/components/head';
 import AppViewWrapper from 'src/components/appViewWrapper';
 import viewNetworkHandler from 'src/components/viewNetworkHandler';
@@ -499,7 +500,14 @@ class ChannelView extends React.Component<Props, State> {
                 ((channel.isPrivate && !channel.isArchived) ||
                   !channel.isPrivate) && (
                   <ErrorBoundary fallbackComponent={null}>
-                    <ThreadComposer
+                    <ComposerPlaceholder
+                      isInbox={false}
+                      showCommunityOwnerUpsell={false}
+                      isOpen={false}
+                    />
+
+                    <Composer
+                      isSlider={true}
                       activeCommunity={communitySlug}
                       activeChannel={channelSlug}
                     />
diff --git a/src/views/community/index.js b/src/views/community/index.js
index e6647b476a..92e7bffaab 100644
--- a/src/views/community/index.js
+++ b/src/views/community/index.js
@@ -5,7 +5,8 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Button } from 'src/components/buttons';
 import generateMetaInfo from 'shared/generate-meta-info';
-import ThreadComposer from 'src/components/threadComposer';
+import Composer from 'src/components/composer';
+import ComposerPlaceholder from 'src/components/threadComposer/components/placeholder';
 import Head from 'src/components/head';
 import Icon from 'src/components/icons';
 import AppViewWrapper from 'src/components/appViewWrapper';
@@ -391,10 +392,12 @@ class CommunityView extends React.Component<Props, State> {
                   selectedView === 'trending-threads') &&
                 userHasPermissions && (
                   <ErrorBoundary fallbackComponent={null}>
-                    <ThreadComposer
-                      activeCommunity={communitySlug}
-                      showComposerUpsell={showComposerUpsell}
+                    <ComposerPlaceholder
+                      isInbox={false}
+                      showCommunityOwnerUpsell={showComposerUpsell}
+                      isOpen={false}
                     />
+                    <Composer isSlider={true} activeCommunity={communitySlug} />
                   </ErrorBoundary>
                 )}
 
diff --git a/src/views/dashboard/components/emptyThreadFeed.js b/src/views/dashboard/components/emptyThreadFeed.js
index c01b72daf2..59b1267a85 100644
--- a/src/views/dashboard/components/emptyThreadFeed.js
+++ b/src/views/dashboard/components/emptyThreadFeed.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { changeActiveThread } from '../../../actions/dashboardFeed';
+import { openComposer } from '../../../actions/composer';
 import Icon from '../../../components/icons';
 import { Button } from '../../../components/buttons';
 import { NullThreadFeed, NullHeading, OutlineButton, Hint } from '../style';
@@ -15,7 +16,8 @@ const EmptyThreadFeed = ({ dispatch }) => (
     </NullHeading>
     <NullHeading>We've got recommendations!</NullHeading>
     <Hint>Kick your community off right!</Hint>
-    <Button icon={'post'} onClick={() => dispatch(changeActiveThread('new'))}>
+    {/* dispatch activethread to 'new'? */}
+    <Button icon={'post'} onClick={() => dispatch(openComposer())}>
       Post your first thread
     </Button>
     <Hint>Find new friends and great conversations!</Hint>
diff --git a/src/views/dashboard/components/threadSelectorHeader.js b/src/views/dashboard/components/threadSelectorHeader.js
index f75c7896b5..7356272f83 100644
--- a/src/views/dashboard/components/threadSelectorHeader.js
+++ b/src/views/dashboard/components/threadSelectorHeader.js
@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { changeActiveThread } from '../../../actions/dashboardFeed';
+import { openComposer } from '../../../actions/composer';
 import {
   HeaderWrapper,
   NarrowOnly,
@@ -101,7 +102,7 @@ class Header extends React.Component<Props> {
           <IconButton
             data-e2e-id="inbox-view-post-button"
             glyph={'post'}
-            onClick={() => dispatch(changeActiveThread('new'))}
+            onClick={() => dispatch(openComposer())}
             tipText={'New conversation'}
             tipLocation={'bottom-left'}
           />
diff --git a/src/views/dashboard/index.js b/src/views/dashboard/index.js
index 1a51b46002..e7a4f21eb5 100644
--- a/src/views/dashboard/index.js
+++ b/src/views/dashboard/index.js
@@ -10,6 +10,7 @@ import getChannelThreadConnection from 'shared/graphql/queries/channel/getChanne
 import { getCurrentUserCommunityConnection } from 'shared/graphql/queries/user/getUserCommunityConnection';
 import type { GetUserCommunityConnectionType } from 'shared/graphql/queries/user/getUserCommunityConnection';
 import searchThreadsQuery from 'shared/graphql/queries/search/searchThreads';
+import Composer from 'src/components/composer';
 import Titlebar from '../../views/titlebar';
 import NewUserOnboarding from '../../views/newUserOnboarding';
 import DashboardThreadFeed from './components/threadFeed';
@@ -130,6 +131,7 @@ class Dashboard extends React.Component<Props, State> {
 
       return (
         <DashboardWrapper data-cy="inbox-view" id="main">
+          <Composer isSlider={true} activeCommunity={activeCommunity} />
           <Head title={title} description={description} />
           <Titlebar hasChildren hasSearch filter={searchFilter}>
             <Menu darkContext hasTabBar>
@@ -171,12 +173,11 @@ class Dashboard extends React.Component<Props, State> {
             {newActivityIndicator && (
               <NewActivityIndicator elem="scroller-for-inbox" />
             )}
-            {searchQueryString &&
-              searchQueryString.length > 0 && (
-                <SearchStringHeader>
-                  Search results for “{searchQueryString}”
-                </SearchStringHeader>
-              )}
+            {searchQueryString && searchQueryString.length > 0 && (
+              <SearchStringHeader>
+                Search results for “{searchQueryString}”
+              </SearchStringHeader>
+            )}
             <InboxScroller id="scroller-for-inbox">
               {searchQueryString &&
                 searchQueryString.length > 0 &&
@@ -191,50 +192,45 @@ class Dashboard extends React.Component<Props, State> {
                 )}
 
               {// no community, no search results
-              !activeCommunity &&
-                !searchQueryString && (
-                  <ErrorBoundary>
-                    <EverythingThreadFeed selectedId={activeThread} />
-                  </ErrorBoundary>
-                )}
+              !activeCommunity && !searchQueryString && (
+                <ErrorBoundary>
+                  <EverythingThreadFeed selectedId={activeThread} />
+                </ErrorBoundary>
+              )}
 
               {// community, no channel, no search results
-              activeCommunity &&
-                !activeChannel &&
-                !searchQueryString && (
-                  <ErrorBoundary>
-                    <CommunityThreadFeed
-                      id={activeCommunity}
-                      selectedId={activeThread}
-                      hasActiveCommunity={activeCommunity}
-                      community={activeCommunityObject}
-                      pinnedThreadId={
-                        activeCommunityObject &&
-                        activeCommunityObject.pinnedThreadId
-                      }
-                    />
-                  </ErrorBoundary>
-                )}
+              activeCommunity && !activeChannel && !searchQueryString && (
+                <ErrorBoundary>
+                  <CommunityThreadFeed
+                    id={activeCommunity}
+                    selectedId={activeThread}
+                    hasActiveCommunity={activeCommunity}
+                    community={activeCommunityObject}
+                    pinnedThreadId={
+                      activeCommunityObject &&
+                      activeCommunityObject.pinnedThreadId
+                    }
+                  />
+                </ErrorBoundary>
+              )}
 
               {// channel and community, no search results
-              activeChannel &&
-                activeCommunity &&
-                !searchQueryString && (
-                  <ErrorBoundary>
-                    <ChannelThreadFeed
-                      id={activeChannel}
-                      selectedId={activeThread}
-                      hasActiveCommunity={activeCommunity}
-                      hasActiveChannel={activeChannel}
-                      community={activeCommunityObject}
-                      pinnedThreadId={
-                        activeCommunityObject &&
-                        activeCommunityObject.pinnedThreadId
-                      }
-                      channelId={activeChannel}
-                    />
-                  </ErrorBoundary>
-                )}
+              activeChannel && activeCommunity && !searchQueryString && (
+                <ErrorBoundary>
+                  <ChannelThreadFeed
+                    id={activeChannel}
+                    selectedId={activeThread}
+                    hasActiveCommunity={activeCommunity}
+                    hasActiveChannel={activeChannel}
+                    community={activeCommunityObject}
+                    pinnedThreadId={
+                      activeCommunityObject &&
+                      activeCommunityObject.pinnedThreadId
+                    }
+                    channelId={activeChannel}
+                  />
+                </ErrorBoundary>
+              )}
             </InboxScroller>
           </InboxWrapper>
 
diff --git a/src/views/thread/index.js b/src/views/thread/index.js
index 41b868f14e..0bdd270b6f 100644
--- a/src/views/thread/index.js
+++ b/src/views/thread/index.js
@@ -12,6 +12,7 @@ const getLoading = (threadViewContext: 'fullscreen' | 'inbox' | 'slider') => ({
   pastDelay,
 }) => {
   if (error) {
+    console.error(error);
     return (
       <ViewError
         heading={'We had trouble loading the application, please try again.'}
diff --git a/src/views/thread/style.js b/src/views/thread/style.js
index c5be0235bd..da74186c57 100644
--- a/src/views/thread/style.js
+++ b/src/views/thread/style.js
@@ -157,10 +157,6 @@ export const ThreadContent = styled.div`
 export const ThreadHeading = styled(H1)`
   font-size: 28px;
   font-weight: 600;
-
-  @media (max-width: 768px) {
-    margin-top: 8px;
-  }
 `;
 
 export const A = styled.a`
diff --git a/yarn.lock b/yarn.lock
index 650396c125..5e6973a3f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1960,6 +1960,13 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-1.1.3.tgz#48230c79f93790ef2775fcec4f0db0f5db41ca52"
+  integrity sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==
+  dependencies:
+    core-js "^2.5.0"
+
 autoprefixer@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.6.tgz#fb933039f74af74a83e71225ce78d9fd58ba84d7"
@@ -5432,10 +5439,10 @@ draft-js-import-element@^1.3.0:
     draft-js-utils "^1.3.0"
     synthetic-dom "^1.2.0"
 
-draft-js-import-markdown@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/draft-js-import-markdown/-/draft-js-import-markdown-1.3.0.tgz#0f939ecb72c342345e685b37cb43c701c167dc36"
-  integrity sha512-V8JQflHOGYMmHOlrodY/l7zce00juHJ3uhSeL63x7x26sqKgTa75hdAAo7M1Z6ayuL7/AJkTQHP/NKsR4/vujA==
+draft-js-import-markdown@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/draft-js-import-markdown/-/draft-js-import-markdown-1.3.1.tgz#7ed4f95c7f16acdd4703a5d608497857ed4a4ffa"
+  integrity sha512-TTV+X7X5ixPeNWqpGk6CFLYO+5ORCrUENaJPGDOzps7gyT/SMfuILM8DP2FwWjFt3ys2WmFZMlMGKk/M4l/N/Q==
   dependencies:
     draft-js-import-element "^1.3.0"
     synthetic-dom "^1.2.0"
@@ -11889,6 +11896,14 @@ react-dom@^16.7.0-alpha.2:
     prop-types "^15.6.2"
     scheduler "^0.12.0-alpha.2"
 
+react-dropzone@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-8.0.3.tgz#1fe14a5ce58c390327273c6e766fb0429d51300e"
+  integrity sha512-3zvEH4szxTHjpNIbuSXY3aIByv6fUao8ZYOqtYucmgduRR+r0c94xMJvrPKyAj9hgWZTJ/0I//PMq+SDZp3MCw==
+  dependencies:
+    attr-accept "^1.1.3"
+    prop-types "^15.6.2"
+
 react-error-overlay@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"