diff --git a/hydro/handler/user.js b/hydro/handler/user.js
index 24ea3862..34fc5917 100644
--- a/hydro/handler/user.js
+++ b/hydro/handler/user.js
@@ -13,6 +13,12 @@ const {
 
 class UserLoginHandler extends Handler {
     async get() {
+        const [loginWithGithub, loginWithGoogle] = await system.getMany(
+            ['oauth.githubappid', 'oauth.googleappid'],
+        );
+        this.response.body = {
+            loginWithGithub, loginWithGoogle,
+        };
         this.response.template = 'user_login.html';
     }
 
@@ -187,13 +193,15 @@ class OauthHandler extends Handler {
 
 class OauthCallbackHandler extends Handler {
     async github({ state, code }) {
-        const [appid, secret, url, s] = await Promise.all([
+        const [appid, secret, url, proxy, s] = await Promise.all([
             system.get('oauth.githubappid'),
             system.get('oauth.githubsecret'),
             system.get('server.url'),
+            system.get('proxy'),
             token.get(state, token.TYPE_OAUTH),
         ]);
         const res = await superagent.post('https://github.com/login/oauth/access_token')
+            .proxy(proxy)
             .send({
                 client_id: appid,
                 client_secret: secret,
@@ -209,9 +217,11 @@ class OauthCallbackHandler extends Handler {
         }
         const t = res.body.access_token;
         const userInfo = await superagent.get('https://api.github.com/user')
+            .proxy(proxy)
+            .set('User-Agent', 'Hydro-OAuth')
             .set('Authorization', `token ${t}`);
         const ret = {
-            email: userInfo.body.mail,
+            email: userInfo.body.email,
             bio: userInfo.body.bio,
             uname: [userInfo.body.name, userInfo.body.login],
         };
diff --git a/hydro/model/setting.js b/hydro/model/setting.js
index bc3d8d32..084bc357 100644
--- a/hydro/model/setting.js
+++ b/hydro/model/setting.js
@@ -78,7 +78,7 @@ AccountSetting(
     Setting('setting_info', 'bio', null,
         null, 'markdown', 'Bio'),
     Setting('setting_customize', 'backgroundImage', null,
-        '/components/background/profile/backgrounds/1.jpg', 'text', 'Profile Background Image',
+        '/components/profile/backgrounds/1.jpg', 'text', 'Profile Background Image',
         'Choose the background image in your profile page.'),
 );
 
diff --git a/hydro/service/server.js b/hydro/service/server.js
index f3a2cd78..97f43331 100644
--- a/hydro/service/server.js
+++ b/hydro/service/server.js
@@ -210,23 +210,24 @@ class Handler {
         this.response.disposition = `attachment; filename="${name}"`;
     }
 
-    url(name, kwargs = {}) { // eslint-disable-line class-methods-use-this
+    url(name, kwargs = {}) {
         let res = '#';
+        const args = { ...kwargs };
         try {
-            delete kwargs.__keywords;
+            delete args.__keywords;
             if (this.args.domainId !== 'system') {
                 name += '_with_domainId';
-                kwargs.domainId = kwargs.domainId || this.args.domainId;
+                args.domainId = args.domainId || this.args.domainId;
             }
-            const { anchor, query } = kwargs;
-            delete kwargs.anchor;
-            delete kwargs.query;
-            if (query) res = router.url(name, kwargs, { query });
-            else res = router.url(name, kwargs);
+            const { anchor, query } = args;
+            delete args.anchor;
+            delete args.query;
+            if (query) res = router.url(name, args, { query });
+            else res = router.url(name, args);
             if (anchor) return `${res}#${anchor}`;
         } catch (e) {
             console.error(e.message);
-            console.log(name, kwargs);
+            console.log(name, args);
         }
         return res;
     }
@@ -417,19 +418,20 @@ class ConnectionHandler {
         for (const i in p) this.request.params[p[i][0]] = decodeURIComponent(p[i][1]);
     }
 
-    url(name, kwargs = {}) { // eslint-disable-line class-methods-use-this
+    url(name, kwargs = {}) {
         let res = '#';
+        const args = { ...kwargs };
         try {
-            delete kwargs.__keywords;
+            delete args.__keywords;
             if (this.args.domainId !== 'system') {
                 name += '_with_domainId';
-                kwargs.domainId = kwargs.domainId || this.args.domainId;
+                args.domainId = args.domainId || this.args.domainId;
             }
-            const { anchor, query } = kwargs;
-            delete kwargs.anchor;
-            delete kwargs.query;
-            if (query) res = router.url(name, kwargs, { query });
-            else res = router.url(name, kwargs);
+            const { anchor, query } = args;
+            delete args.anchor;
+            delete args.query;
+            if (query) res = router.url(name, args, { query });
+            else res = router.url(name, args);
             if (anchor) return `${res}#${anchor}`;
         } catch (e) {
             console.error(e.message);
diff --git a/templates/partials/login_dialog.html b/templates/partials/login_dialog.html
index 5d4bc18e..ceb104cc 100644
--- a/templates/partials/login_dialog.html
+++ b/templates/partials/login_dialog.html
@@ -1,9 +1,8 @@
-{# No Compression #}
 <div class="dialog dialog--signin" style="display:none">
   <div class="dialog__content">
     <div class="dialog--signin__bg">
       <div class="dialog--signin__side">
-        <h1>{{ _("Don\'t have an account?") }}</h1>
+        <h1>{{ _("Don't have an account?") }}</h1>
         <p>{{ _('By signing up a Hydro universal account, you can submit code and join discussions in all online judging services provided by us.') }}</p>
         <div><a href="{{ url('user_register') }}" class="inverse rounded button">{{ _('Sign Up Now') }}</a></div>
       </div>
@@ -32,6 +31,12 @@
             <input type="checkbox" name="rememberme">{{ _('Remember me') }}
           </label>
         </div></div>
+        <div class="row"><div class="columns">
+          <a href="{{ url('user_oauth', type='github') }}" class="expanded rounded button">{{ _('Login with Github') }}</a>
+        </div></div>
+        <div class="row"><div class="columns">
+          <a href="{{ url('user_oauth', type='google') }}" class="expanded rounded button">{{ _('Login with Google') }}</a>
+        </div></div>
         <div class="row"><div class="columns">
           <input type="submit" value="{{ _('Sign In') }}" class="expanded rounded primary button">
         </div></div>
diff --git a/templates/user_detail.html b/templates/user_detail.html
index 1e8d2293..24eeca52 100644
--- a/templates/user_detail.html
+++ b/templates/user_detail.html
@@ -3,7 +3,7 @@
 {% block content %}
 <style>
   .user-profile-bg {
-    background-image : "{{ udoc.backgroundImage }}";
+    background-image : url("{{ udoc.backgroundImage }}");
   }
 </style>
 <div class="row">
@@ -31,7 +31,7 @@
               </p>
               <p>{{ _('Solved {0} problems, RP: {1} (No. {2})').format(udoc.nAccept|default(0), udoc['rp']|default(0.0)|round(2), udoc['rank']|default('?')) }}</p>
               <div class="profile-header__contact-bar">
-              {% if is_self_profile %}
+              {% if isSelfProfile %}
                 <a class="profile-header__contact-item" href="{{ url('home_settings', category='account') }}" data-tooltip="{{ _('Edit Profile') }}">
                   <span class="icon icon-edit"></span>
                 </a>
diff --git a/templates/user_login.html b/templates/user_login.html
index f18b2227..3a001b3d 100644
--- a/templates/user_login.html
+++ b/templates/user_login.html
@@ -17,10 +17,20 @@
         </label>
       </div></div>
       <div class="row"><div class="columns">
-          <label class="inverse material checkbox">
-            <input type="checkbox" name="rememberme">{{ _('Remember me') }}
-          </label>
-        </div></div>
+        <label class="inverse material checkbox">
+          <input type="checkbox" name="rememberme">{{ _('Remember me') }}
+        </label>
+      </div></div>
+      {% if loginWithGithub %}
+      <div class="row"><div class="columns">
+        <a href="{{ url('user_oauth', type='github') }}" class="expanded rounded button inverse">{{ _('Login with Github') }}</a>
+      </div></div>
+      {% endif %}
+      {% if loginWithGoogle %}
+      <div class="row"><div class="columns">
+        <a href="{{ url('user_oauth', type='google') }}" class="expanded rounded button inverse">{{ _('Login with Google') }}</a>
+      </div></div>
+      {% endif %}
       <div class="row"><div class="columns">
         <div class="text-center">
           <input type="submit" value="{{ _('Login') }}" class="inverse expanded rounded primary button">