diff --git a/packages/rocketchat-emojione/emojiPicker.html b/packages/rocketchat-emojione/emojiPicker.html
index c6ae0544f43c..5854e69a2cca 100644
--- a/packages/rocketchat-emojione/emojiPicker.html
+++ b/packages/rocketchat-emojione/emojiPicker.html
@@ -2,31 +2,31 @@
 	<div class="emoji-picker">
 		<div class="filter">
 			<ul>
-				<li class="{{activeCategory 'recent'}}" title="{{_ "Frequently_Used" }}">
+				<li class="{{activeCategory 'recent'}}" title="{{categoryName 'recent' }}">
 					<a href="#recent" class="category-link"><i class="icon-recent"></i></a>
 				</li>
-				<li class="{{activeCategory 'people'}}" title="{{_ "Smileys_and_People" }}">
+				<li class="{{activeCategory 'people'}}" title="{{categoryName 'people' }}">
 					<a href="#people" class="category-link"><i class="icon-people"></i></a>
 				</li>
-				<li class="{{activeCategory 'nature'}}" title="{{_ "Animals_and_Nature" }}">
+				<li class="{{activeCategory 'nature'}}" title="{{categoryName 'nature' }}">
 					<a href="#nature" class="category-link"><i class="icon-nature"></i></a>
 				</li>
-				<li class="{{activeCategory 'food'}}" title="{{_ "Food_and_Drink" }}">
+				<li class="{{activeCategory 'food'}}" title="{{categoryName 'food' }}">
 					<a href="#food" class="category-link"><i class="icon-foods"></i></a>
 				</li>
-				<li class="{{activeCategory 'activity'}}" title="{{_ "Activity" }}">
+				<li class="{{activeCategory 'activity'}}" title="{{categoryName 'activity' }}">
 					<a href="#activity" class="category-link"><i class="icon-activity"></i></a>
 				</li>
-				<li class="{{activeCategory 'travel'}}" title="{{_ "Travel_and_Places" }}">
+				<li class="{{activeCategory 'travel'}}" title="{{categoryName 'travel' }}">
 					<a href="#travel" class="category-link"><i class="icon-travel"></i></a>
 				</li>
-				<li class="{{activeCategory 'objects'}}" title="{{_ "Objects" }}">
+				<li class="{{activeCategory 'objects'}}" title="{{categoryName 'objects' }}">
 					<a href="#objects" class="category-link"><i class="icon-objects"></i></a>
 				</li>
-				<li class="{{activeCategory 'symbols'}}" title="{{_ "Symbols" }}">
+				<li class="{{activeCategory 'symbols'}}" title="{{categoryName 'symbols' }}">
 					<a href="#symbols" class="category-link"><i class="icon-symbols"></i></a>
 				</li>
-				<li class="{{activeCategory 'flags'}}" title="{{_ "Flags" }}">
+				<li class="{{activeCategory 'flags'}}" title="{{categoryName 'flags' }}">
 					<a href="#flags" class="category-link"><i class="icon-flags"></i></a>
 				</li>
 				<li class="change-tone">
@@ -42,6 +42,9 @@
 				</li>
 			</ul>
 		</div>
+		<h2 class="current-category-header">
+			{{ currentCategory }}
+		</h2>
 		<div class="emojis">
 			{{#each category}}
 				<ul class="{{.}} emoji-list {{isVisible .}}">
diff --git a/packages/rocketchat-emojione/emojiPicker.js b/packages/rocketchat-emojione/emojiPicker.js
index 22f76ac56104..9c90e8b0f140 100644
--- a/packages/rocketchat-emojione/emojiPicker.js
+++ b/packages/rocketchat-emojione/emojiPicker.js
@@ -3,6 +3,34 @@
 var emojisByCategory;
 var toneList;
 
+/*
+ * Mapping category hashes into human readable and translated names
+ */
+var emojiCategories = {
+	recent: TAPi18n.__('Frequently_Used'),
+	people: TAPi18n.__('Smileys_and_People'),
+	nature: TAPi18n.__('Animals_and_Nature'),
+	food: TAPi18n.__('Food_and_Drink'),
+	activity: TAPi18n.__('Activity'),
+	travel: TAPi18n.__('Travel_and_Places'),
+	objects: TAPi18n.__('Objects'),
+	symbols: TAPi18n.__('Symbols'),
+	flags: TAPi18n.__('Flags')
+};
+
+/**
+ * Turns category hash to a nice readable translated name
+ * @param {string} category hash
+ * @return {string} readable and translated
+ */
+function categoryName(category) {
+	if (emojiCategories[category]) {
+		return emojiCategories[category];
+	}
+	// unknown category; better hash than nothing
+	return category;
+}
+
 Template.emojiPicker.helpers({
 	category() {
 		return Object.keys(emojisByCategory);
@@ -35,8 +63,24 @@ Template.emojiPicker.helpers({
 	currentTone() {
 		return 'tone-' + Template.instance().tone;
 	},
+	/**
+	 * Returns true if a given emoji category is active
+	 *
+	 * @param {string} category hash
+	 * @return {boolean} true if active, false otherwise
+	 */
 	activeCategory(category) {
 		return Template.instance().currentCategory.get() === category ? 'active' : '';
+	},
+	categoryName: categoryName,
+	/**
+	 * Returns currently active emoji category hash
+	 *
+	 * @return {string} category hash
+	 */
+	currentCategory() {
+		var hash = Template.instance().currentCategory.get();
+		return categoryName(hash);
 	}
 });
 
diff --git a/packages/rocketchat-emojione/emojiPicker.less b/packages/rocketchat-emojione/emojiPicker.less
index 836b5a649722..b4778dede107 100644
--- a/packages/rocketchat-emojione/emojiPicker.less
+++ b/packages/rocketchat-emojione/emojiPicker.less
@@ -147,6 +147,10 @@
 		}
 	}
 
+	.current-category-header {
+		padding: 3px 6px 2px 6px;
+	}
+
 	.emojis {
 		height: 160px;
 		overflow-y: auto;
diff --git a/packages/rocketchat-iframe-login/iframe_client.js b/packages/rocketchat-iframe-login/iframe_client.js
index dd5c178bc185..212a734bbd89 100644
--- a/packages/rocketchat-iframe-login/iframe_client.js
+++ b/packages/rocketchat-iframe-login/iframe_client.js
@@ -1,4 +1,4 @@
-/* globals Accounts, Tracker, ReactiveVar, FlowRouter, Accounts, HTTP, facebookConnectPlugin, TwitterConnect */
+/* globals Accounts, Tracker, ReactiveVar, FlowRouter, Accounts, HTTP, facebookConnectPlugin, TwitterConnect, OAuth */
 
 const _unstoreLoginToken = Accounts._unstoreLoginToken;
 Accounts._unstoreLoginToken = function() {
@@ -68,7 +68,7 @@ class IframeLogin {
 			console.log(error, result);
 			if (result && result.data && result.data.token) {
 				// TODO get from api
-				result.data.token = 'yaMadZ1RMBdMzs6kGycKybrHVptoDl7nokxtorz1me0';
+				// result.data.token = 'yaMadZ1RMBdMzs6kGycKybrHVptoDl7nokxtorz1me0';
 				this.loginWithToken(result.data.token, (error, result) => {
 					if (error) {
 						this.reactiveIframeUrl.set(iframeUrl);
@@ -106,6 +106,28 @@ class IframeLogin {
 
 RocketChat.iframeLogin = new IframeLogin();
 
+const requestCredential = (serviceName, options = {}, callback) => {
+	window[serviceName].requestCredential(options, (tokenOrError) => {
+		if (tokenOrError && tokenOrError instanceof Error) {
+			return callback(tokenOrError);
+		}
+
+		const secret = OAuth._retrieveCredentialSecret(tokenOrError);
+
+		if (!secret) {
+			return callback(new Error('Invalid secret'));
+		}
+
+		Meteor.call('OAuth.retrieveCredential', tokenOrError, secret, (error, credential) => {
+			if (!credential) {
+				return callback(new Error('Credential not found'));
+			}
+
+			callback(credential.serviceData, tokenOrError, secret);
+		});
+	});
+};
+
 window.addEventListener('message', (e) => {
 	if (! _.isObject(e.data)) {
 		return;
@@ -138,13 +160,23 @@ window.addEventListener('message', (e) => {
 
 		case 'call-facebook-login':
 			const fbLoginSuccess = (response) => {
+				console.log('facebook-login-success', response);
 				e.source.postMessage({
 					event: 'facebook-login-success',
 					response: response
+					// authResponse: Object
+					// 	accessToken: "a7s6d8a76s8d7..."
+					// 	expiresIn: "5172793"
+					// 	secret: "..."
+					// 	session_key: true
+					// 	sig: "..."
+					// userID: "675676576"
+					// status: "connected"
 				}, e.origin);
 			};
 
 			const fbLoginError = (error, response) => {
+				console.log('facebook-login-error', error, response);
 				e.source.postMessage({
 					event: 'facebook-login-error',
 					error: error,
@@ -152,8 +184,22 @@ window.addEventListener('message', (e) => {
 				}, e.origin);
 			};
 
-			if (typeof facebookConnectPlugin === 'undefined') {
-				return fbLoginError('no-native-plugin');
+			if (typeof window.facebookConnectPlugin === 'undefined') {
+				requestCredential('Facebook', {}, (serviceData, token, secret) => {
+					if (serviceData && serviceData instanceof Error) {
+						return fbLoginError('poup-login-error', serviceData);
+					} else {
+						fbLoginSuccess({
+							authResponse: {
+								accessToken: serviceData.accessToken,
+								expiresIn: serviceData.expiresAt,
+								secret: secret
+							},
+							userID: serviceData.id
+						});
+					}
+				});
+				break;
 			}
 
 			facebookConnectPlugin.getLoginStatus((response) => {
@@ -171,6 +217,7 @@ window.addEventListener('message', (e) => {
 
 		case 'call-twitter-login':
 			const twitterLoginSuccess = (response) => {
+				console.log('twitter-login-success', response);
 				e.source.postMessage({
 					event: 'twitter-login-success',
 					response: response
@@ -184,14 +231,27 @@ window.addEventListener('message', (e) => {
 			};
 
 			const twitterLoginFailure = (error) => {
+				console.log('twitter-login-error', error);
 				e.source.postMessage({
 					event: 'twitter-login-error',
 					error: error
 				}, e.origin);
 			};
 
-			if (typeof TwitterConnect === 'undefined') {
-				return twitterLoginFailure('no-native-plugin');
+			if (typeof window.TwitterConnect === 'undefined') {
+				requestCredential('Twitter', {}, (serviceData) => {
+					if (serviceData && serviceData instanceof Error) {
+						return twitterLoginFailure('poup-login-error', serviceData);
+					} else {
+						twitterLoginSuccess({
+							userName: serviceData.screenName,
+							userId: serviceData.id,
+							secret: serviceData.accessTokenSecret,
+							token: serviceData.accessToken
+						});
+					}
+				});
+				break;
 			}
 
 			TwitterConnect.login(twitterLoginSuccess, twitterLoginFailure);
@@ -199,6 +259,7 @@ window.addEventListener('message', (e) => {
 
 		case 'call-google-login':
 			const googleLoginSuccess = (response) => {
+				console.log('google-login-success', response);
 				e.source.postMessage({
 					event: 'google-login-success',
 					response: response
@@ -217,6 +278,7 @@ window.addEventListener('message', (e) => {
 			};
 
 			const googleLoginFailure = (error) => {
+				console.log('google-login-error', error);
 				e.source.postMessage({
 					event: 'google-login-error',
 					error: error
@@ -224,7 +286,23 @@ window.addEventListener('message', (e) => {
 			};
 
 			if (typeof window.plugins.googleplus === 'undefined') {
-				return googleLoginFailure('no-native-plugin');
+				requestCredential('Google', {}, (serviceData) => {
+					if (serviceData && serviceData instanceof Error) {
+						return googleLoginFailure('poup-login-error', serviceData);
+					} else {
+						googleLoginSuccess({
+							email: serviceData.email,
+							userId: serviceData.id,
+							displayName: serviceData.name,
+							gender: serviceData.gender,
+							imageUrl: serviceData.picture,
+							givenName: serviceData.given_name,
+							familyName: serviceData.family_name,
+							oauthToken: serviceData.accessToken
+						});
+					}
+				});
+				break;
 			}
 
 			const options = {
diff --git a/packages/rocketchat-iframe-login/iframe_server.js b/packages/rocketchat-iframe-login/iframe_server.js
index 3e80a5a22164..ea4d7d968d91 100644
--- a/packages/rocketchat-iframe-login/iframe_server.js
+++ b/packages/rocketchat-iframe-login/iframe_server.js
@@ -1,4 +1,4 @@
-/* globals Accounts */
+/* globals Accounts, OAuth */
 
 Accounts.registerLoginHandler('iframe', function(result) {
 	if (!result.iframe) {
@@ -17,3 +17,10 @@ Accounts.registerLoginHandler('iframe', function(result) {
 		};
 	}
 });
+
+
+Meteor.methods({
+	'OAuth.retrieveCredential'(credentialToken, credentialSecret) {
+		return OAuth.retrieveCredential(credentialToken, credentialSecret);
+	}
+});
diff --git a/packages/rocketchat-iframe-login/package.js b/packages/rocketchat-iframe-login/package.js
index d68b748bed31..f40180016455 100644
--- a/packages/rocketchat-iframe-login/package.js
+++ b/packages/rocketchat-iframe-login/package.js
@@ -21,6 +21,11 @@ Package.onUse(function(api) {
 	api.use('http');
 	api.use('tracker');
 
+	api.imply('facebook');
+	api.imply('twitter');
+	api.imply('google');
+	api.imply('oauth');
+
 	// Server files
 	api.addFiles('iframe_rocketchat.js', 'server');
 	api.addFiles('iframe_server.js', 'server');