diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx
index 44346fabc2..dd11d3a01c 100644
--- a/app/assets/javascripts/components/components/status_content.jsx
+++ b/app/assets/javascripts/components/components/status_content.jsx
@@ -3,6 +3,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import escapeTextContentForBrowser from 'react/lib/escapeTextContentForBrowser';
 import emojify from '../emoji';
 import { FormattedMessage } from 'react-intl';
+import Permalink from './permalink';
 
 const spoilerStyle = {
   display: 'inline-block',
@@ -96,16 +97,18 @@ const StatusContent = React.createClass({
     const { status } = this.props;
     const { hidden } = this.state;
 
+
     const content = { __html: emojify(status.get('content')) };
     const spoilerContent = { __html: emojify(escapeTextContentForBrowser(status.get('spoiler_text', ''))) };
 
     if (status.get('spoiler_text').length > 0) {
+      const mentionLinks = status.get('mentions').map(item => <Permalink to={`/accounts/${item.get('id')}`} href={item.get('url')} key={item.get('id') className='mention'>@<span>{item.get('username')}</span></Permalink>}</span>) };
       const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />;
-
       return (
         <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
           <p style={{ marginBottom: hidden ? '0px' : '' }} >
-            <span dangerouslySetInnerHTML={spoilerContent} /> <a className='status__content__spoiler-link' style={spoilerStyle} onClick={this.handleSpoilerClick}>{toggleText}</a>
+            {mentionLinks}
+            <span dangerouslySetInnerHTML={spoilerContent} />  <a className='status__content__spoiler-link' style={spoilerStyle} onClick={this.handleSpoilerClick}>{toggleText}</a>
           </p>
 
           <div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} />
diff --git a/app/views/api/v1/statuses/_mention.rabl b/app/views/api/v1/statuses/_mention.rabl
index 07b3d1f616..498cca2757 100644
--- a/app/views/api/v1/statuses/_mention.rabl
+++ b/app/views/api/v1/statuses/_mention.rabl
@@ -1,3 +1,4 @@
-node(:url)  { |mention| TagManager.instance.url_for(mention.account) }
-node(:acct) { |mention| mention.account.acct }
-node(:id)   { |mention| mention.account_id }
+node(:url)      { |mention| TagManager.instance.url_for(mention.account) }
+node(:acct)     { |mention| mention.account.acct }
+node(:id)       { |mention| mention.account_id }
+node(:username) { |mention| mention.account.username }