diff --git a/chat_box/views.py b/chat_box/views.py
index c9f9beb..703d8a1 100644
--- a/chat_box/views.py
+++ b/chat_box/views.py
@@ -355,9 +355,14 @@ def get_room(user_one, user_two):
 
 @login_required
 def get_or_create_room(request):
-    decrypted_other_id = request.GET.get('other')
-    request_id, other_id = decrypt_url(decrypted_other_id)
+    if request.method == 'GET':
+        decrypted_other_id = request.GET.get('other')
+    elif request.method == 'POST':
+        decrypted_other_id = request.POST.get('other')
+    else:
+        return HttpResponseBadRequest()
 
+    request_id, other_id = decrypt_url(decrypted_other_id)
     if not other_id or not request_id or request_id != request.profile.id:
         return HttpResponseBadRequest()
 
@@ -372,7 +377,9 @@ def get_or_create_room(request):
         return HttpResponseBadRequest()
     # TODO: each user can only create <= 300 rooms
     room = get_room(other_user, user)
-    return JsonResponse({'room': room.id, 'other_user_id': other_user.id})
+    if request.method == 'GET':
+        return JsonResponse({'room': room.id, 'other_user_id': other_user.id})
+    return HttpResponseRedirect(reverse('chat', kwargs={'room_id': room.id}))
 
 
 def get_unread_count(rooms, user):
diff --git a/templates/chat/chat.html b/templates/chat/chat.html
index 804bfda..8c747c8 100644
--- a/templates/chat/chat.html
+++ b/templates/chat/chat.html
@@ -295,7 +295,7 @@ let message_template = `
         }
     }
 
-    function register_click_space() {
+    function load_room(encrypted_user) {
         function callback() {
             history.replaceState(null, '', "{{url('chat', '')}}" + window.room_id);
             load_page(window.currentPage, true, refresh_status);
@@ -303,12 +303,8 @@ let message_template = `
             refresh_status();
             $('#chat-input').focus();
         }
-        $('.click_space').on('click', function(e) {
-            if ($(this).attr('id') == 'click_space_' + window.other_user_id) {
-                return;
-            }
-            var other_user = $(this).attr('value');
-            $.get("{{url('get_or_create_room')}}" + `?other=${other_user}`)
+        if (encrypted_user) {
+            $.get("{{url('get_or_create_room')}}" + `?other=${encrypted_user}`)
                 .done(function(data) {
                     window.currentPage = 1;
                     window.room_id = data.room;
@@ -318,13 +314,26 @@ let message_template = `
                 .fail(function() {
                     console.log('Fail to get_or_create_room');
                 })
+        }
+        else {
+            window.currentPage = 1;
+            window.room_id = '';
+            window.other_user_id = '';
+            callback();
+        }
+    }
+
+    function register_click_space() {
+        $('.click_space').on('click', function(e) {
+            if ($(this).attr('id') == 'click_space_' + window.other_user_id) {
+                return;
+            }
+            var other_user = $(this).attr('value');
+            load_room(other_user);
         });
         $('#lobby_row').on('click', function(e) {
             if (window.room_id) {
-                window.currentPage = 1;
-                window.room_id = '';
-                window.other_user_id = '';
-                callback();
+                load_room(null);
             }
         });
     }
@@ -477,6 +486,7 @@ let message_template = `
             name: 'other',
             onchange: 'form.submit()'
         }));
+
         var in_user_redirect = false;
         $('#search-handle').select2({
             placeholder: '{{ _('Search by handle...') }}',
@@ -557,7 +567,8 @@ let message_template = `
             <div id="chat-online-content">
                 <div id="search-container">
                     <center>
-                        <form id="search-form" name="form" action="{{ url('get_or_create_room') }}" method="get">
+                        <form id="search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
+                            {% csrf_token %}
                             <input id="search-handle" type="text" name="search"
                                    placeholder="{{ _('Search by handle...') }}">
                         </form>