diff --git a/app/controllers/xrd_controller.rb b/app/controllers/xrd_controller.rb
index 9201eb6c116..e00485f5e89 100644
--- a/app/controllers/xrd_controller.rb
+++ b/app/controllers/xrd_controller.rb
@@ -1,27 +1,29 @@
 class XrdController < ApplicationController
-  before_action :set_format
-
   def host_meta
     @webfinger_template = "#{webfinger_url}?resource={uri}"
+
+    respond_to do |format|
+      format.xml { render content_type: 'application/xrd+xml' }
+    end
   end
 
   def webfinger
     @account = Account.find_local!(username_from_resource)
     @canonical_account_uri = "acct:#{@account.username}@#{Rails.configuration.x.local_domain}"
     @magic_key = pem_to_magic_key(@account.keypair.public_key)
+
+    respond_to do |format|
+      format.xml  { render content_type: 'application/xrd+xml' }
+      format.json { render content_type: 'application/jrd+json' }
+    end
   rescue ActiveRecord::RecordNotFound
     head 404
   end
 
   private
 
-  def set_format
-    request.format = 'xml'
-    response.headers['Content-Type'] = 'application/xrd+xml'
-  end
-
   def username_from_resource
-    if resource_param.start_with?('acct:')
+    if resource_param.start_with?('acct:') || resource_param.include?('@')
       resource_param.split('@').first.gsub('acct:', '')
     else
       url = Addressable::URI.parse(resource_param)
diff --git a/app/views/xrd/webfinger.json.rabl b/app/views/xrd/webfinger.json.rabl
new file mode 100644
index 00000000000..0de17ac195e
--- /dev/null
+++ b/app/views/xrd/webfinger.json.rabl
@@ -0,0 +1,16 @@
+object @account
+
+node(:subject) { @canonical_account_uri }
+
+node(:aliases) do
+  [TagManager.instance.url_for(@account)]
+end
+
+node(:links) do
+  [
+    { rel: 'http://webfinger.net/rel/profile-page', type: 'text/html', href: TagManager.instance.url_for(@account) },
+    { rel: 'http://schemas.google.com/g/2010#updates-from', type: 'application/atom+xml', href: account_url(@account, format: 'atom') },
+    { rel: 'salmon', href: api_salmon_url(@account.id) },
+    { rel: 'magic-public-key', href: "data:application/magic-public-key,#{@magic_key}" }
+  ]
+end
diff --git a/config/initializers/mime_types.rb b/config/initializers/mime_types.rb
index dc1899682b0..5a16a14e8e4 100644
--- a/config/initializers/mime_types.rb
+++ b/config/initializers/mime_types.rb
@@ -1,4 +1,4 @@
 # Be sure to restart your server when you modify this file.
 
-# Add new mime types for use in respond_to blocks:
-# Mime::Type.register "text/richtext", :rtf
+Mime::Type.register "application/json", :json, %w( text/x-json application/jsonrequest application/jrd+json )
+Mime::Type.register "text/xml",         :xml,  %w( application/xml application/atom+xml application/xrd+xml )
diff --git a/spec/javascript/components/display_name.test.jsx b/spec/javascript/components/display_name.test.jsx
new file mode 100644
index 00000000000..c25eb853010
--- /dev/null
+++ b/spec/javascript/components/display_name.test.jsx
@@ -0,0 +1,19 @@
+import { expect } from 'chai';
+import { render } from 'enzyme';
+import Immutable  from 'immutable';
+
+import DisplayName from '../../../app/assets/javascripts/components/components/display_name'
+
+describe('<DisplayName />', () => {
+  const account = Immutable.fromJS({
+    username: 'bar',
+    acct: 'bar@baz',
+    display_name: 'Foo'
+  });
+
+  const wrapper = render(<DisplayName account={account} />);
+
+  it('renders display name', () => {
+    expect(wrapper.text()).to.match(/Foo @bar@baz/);
+  });
+});
diff --git a/storybook/config.js b/storybook/config.js
index 98dde07de95..d9fde833cf7 100644
--- a/storybook/config.js
+++ b/storybook/config.js
@@ -11,6 +11,7 @@ window.React     = React;
 function loadStories () {
   require('./stories/loading_indicator.story.jsx');
   require('./stories/button.story.jsx');
+  require('./stories/tabs_bar.story.jsx');
 }
 
 configure(loadStories, module);
diff --git a/storybook/stories/tabs_bar.story.jsx b/storybook/stories/tabs_bar.story.jsx
new file mode 100644
index 00000000000..daaedca5ae4
--- /dev/null
+++ b/storybook/stories/tabs_bar.story.jsx
@@ -0,0 +1,6 @@
+import TabsBar from '../../app/assets/javascripts/components/features/ui/components/tabs_bar.jsx'
+
+storiesOf('TabsBar', module)
+  .add('default state', () => (
+    <TabsBar />
+  ));