diff --git a/app/Http/Controllers/ClosetController.php b/app/Http/Controllers/ClosetController.php
index 5f07b80b..7e35742c 100644
--- a/app/Http/Controllers/ClosetController.php
+++ b/app/Http/Controllers/ClosetController.php
@@ -25,43 +25,40 @@ class ClosetController extends Controller
         $this->closet = new Closet(session('uid'));
     }
 
-    public function index(Request $request)
+    public function index()
+    {
+        return view('user.closet')->with('user', app('user.current'));
+    }
+
+    public function getClosetData(Request $request)
     {
         $category = $request->input('category', 'skin');
-        $page     = $request->input('page', 1);
-        $page     = $page <= 0 ? 1 : $page;
+        $page     = abs($request->input('page', 1));
         $q        = $request->input('q', null);
 
         $items = [];
 
         if ($q) {
-            foreach (['skin', 'cape'] as $category) {
-                // do search
-                foreach ($this->closet->getItems($category) as $item) {
-                    if (strstr($item->name, $q)) {
-                        $items[$category][] = $item;
-                    }
+            // do search
+            foreach ($this->closet->getItems($category) as $item) {
+                if (stristr($item->name, $q)) {
+                    $items[] = $item;
                 }
             }
         } else {
-            $items['skin'] = $this->closet->getItems('skin');
-            $items['cape'] = $this->closet->getItems('cape');
+            $items = $this->closet->getItems($category);
         }
 
         // pagination
-        $total_pages = [];
+        $total_pages = ceil(count($items) / 6);
 
-        foreach ($items as $key => $value) {
-            $total_pages[] = ceil(count($items[$key]) / 6);
-            $items[$key] = array_slice($value, ($page-1)*6, 6);
-        }
+        $items = array_slice($items, ($page - 1) * 6, 6);
 
-        return view('user.closet')->with('items', $items)
-                                  ->with('page', $page)
-                                  ->with('q', $q)
-                                  ->with('category', $category)
-                                  ->with('total_pages', $total_pages ? max($total_pages) : 0)
-                                  ->with('user', app('user.current'));
+        return response()->json([
+            'category'    => $category,
+            'items'       => $items,
+            'total_pages' => $total_pages
+        ]);
     }
 
     public function info()
diff --git a/app/Http/Routes/web.php b/app/Http/Routes/web.php
index b512ae65..d2b2dad1 100644
--- a/app/Http/Routes/web.php
+++ b/app/Http/Routes/web.php
@@ -65,6 +65,7 @@ Route::group(['middleware' => 'auth', 'prefix' => 'user'], function ()
 
     // Closet
     Route::get ('/closet',               'ClosetController@index');
+    Route::get ('/closet-data',          'ClosetController@getClosetData');
     Route::post('/closet/add',           'ClosetController@add');
     Route::post('/closet/remove',        'ClosetController@remove');
     Route::post('/closet/rename',        'ClosetController@rename');
diff --git a/bower.json b/bower.json
index 867479f8..c4771d4e 100644
--- a/bower.json
+++ b/bower.json
@@ -24,6 +24,11 @@
     "font-awesome": "Font-Awesome#^4.6.3",
     "bootstrap-fileinput": "^4.3.3",
     "bootstrap": "^3.3.6",
-    "sweetalert2": "^4.1.6"
+    "sweetalert2": "^4.1.6",
+    "jqPaginator": "^1.2.0",
+    "lodash": "^4.17.4"
+  },
+  "resolutions": {
+    "jquery": "1.9.1 - 3"
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
index d1a8c8af..836178e9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -25,6 +25,7 @@ var srcPath  = 'resources/assets/src/';
 var distPath = 'resources/assets/dist/';
 
 var vendorScripts = [
+    'lodash/dist/lodash.min.js',
     'jquery/dist/jquery.min.js',
     'bootstrap/dist/js/bootstrap.min.js',
     'AdminLTE/dist/js/app.min.js',
@@ -35,6 +36,7 @@ var vendorScripts = [
     'toastr/toastr.min.js',
     'es6-promise/es6-promise.auto.min.js',
     'sweetalert2/dist/sweetalert2.min.js',
+    'jqPaginator/dist/jqPaginator.min.js',
     'resources/assets/dist/scripts/general.js',
 ];
 
diff --git a/resources/assets/src/scripts/user.js b/resources/assets/src/scripts/user.js
index 9ed9685e..545873d2 100644
--- a/resources/assets/src/scripts/user.js
+++ b/resources/assets/src/scripts/user.js
@@ -18,13 +18,13 @@ $('body').on('click', '#preview-switch', () => {
     TexturePreview.previewType == '3D' ? TexturePreview.show2dPreview() : TexturePreview.show3dPreview();
 });
 
-var selected = [];
+let skinSelected = false, capeSelected = false;
 
 $('body').on('click', '.item-body', function () {
     $('.item-selected').parent().removeClass('item-selected');
     $(this).parent().addClass('item-selected');
 
-    let tid = $(this).parent().attr('tid');
+    const tid = $(this).parent().attr('tid');
 
     $.ajax({
         type: "POST",
@@ -33,24 +33,95 @@ $('body').on('click', '.item-body', function () {
         success: (json) => {
             if (json.type == "cape") {
                 MSP.changeCape('../textures/' + json.hash);
-                selected['cape'] = tid;
+                capeSelected = true;
             } else {
                 MSP.changeSkin('../textures/' + json.hash);
-                selected['skin'] = tid;
+                skinSelected = true;
             }
 
-            selected.length = 0;
-
-            ['skin', 'cape'].forEach((key) => {
-                if (selected[key] !== undefined) selected.length++;
-
-                $('#textures-indicator').html(selected.length);
-            });
+            if (skinSelected && capeSelected)
+                $('#textures-indicator').text(`${trans('general.skin')} & ${trans('general.cape')}`);
+            else if (skinSelected)
+                $('#textures-indicator').text(trans('general.skin'));
+            else if (capeSelected)
+                $('#textures-indicator').text(trans('general.cape'));
         },
         error: showAjaxError
     });
 });
 
+$('body').on('click', '.category-switch', () => {
+    const category = $('a[href="#skin-category"]').parent().hasClass('active') ? 'cape' : 'skin';
+    const page = parseInt($('#closet-paginator').attr(`last-${category}-page`));
+    const search = $('input[name=q]').val();
+    reloadCloset(category, page, search);
+});
+
+function renderClosetItemComponent(item, rootPath) {
+    return `
+    <div class="item" tid="${item.tid}">
+    <div class="item-body">
+        <img src="${rootPath}/preview/${item.tid}.png">
+    </div>
+    <div class="item-footer">
+        <p class="texture-name">
+            <span title="${item.name}">${item.name} <small>(${item.type})</small></span>
+        </p>
+
+        <a href="${rootPath}/skinlib/show/${item.tid}" title="${trans('user.viewInSkinlib')}" class="more" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-share"></i></a>
+        <span title="${trans('general.more')}" class="more" data-toggle="dropdown" aria-haspopup="true" id="more-button"><i class="fa fa-cog"></i></span>
+
+        <ul class="dropup dropdown-menu" aria-labelledby="more-button">
+            <li><a href="javascript:renameClosetItem(${item.tid}, '${item.name}');">${trans('user.renameItem')}</a></li>
+            <li><a href="javascript:removeFromCloset(${item.tid});">${trans('user.removeItem')}</a></li>
+            <li><a href="javascript:setAsAvatar(${item.tid});">${trans('user.setAsAvatar')}</a></li>
+        </ul>
+    </div>
+</div>`;
+}
+
+function renderCloset(items, category) {
+    const rootPath = /(^https?.*)\/user\/closet/.exec(window.location.href)[1];
+    const search = $('input[name=q]').val();
+    let container = $(`#${category}-category`);
+    container.html('');
+    if (items.length === 0) {
+        $('#closet-paginator').hide();
+        if (search === '') {
+            container.html(`<div class="empty-msg">
+            ${trans('user.emptyClosetMsg', { url: rootPath + '/skinlib?filter=' + category })}</div>`);
+        } else {
+            container.html(`<div class="empty-msg">${trans('general.noResult')}</div>`);
+        }
+    } else {
+        $('#closet-paginator').show();
+        for (const item of items) {
+            container.append(renderClosetItemComponent(item, rootPath));
+        }
+    }
+}
+
+function reloadCloset(category, page, search) {
+    Promise.resolve($.ajax({
+        type: 'GET',
+        url: /(^https?.*)\/user\/closet/.exec(window.location.href)[1] + '/user/closet-data',
+        dataType: 'json',
+        data: {
+            category: category,
+            page: page,
+            q: search
+        }
+    })).then(result => {
+        renderCloset(result.items, result.category);
+        let paginator = $('#closet-paginator');
+        paginator.attr(`last-${result.category}-page`, page);
+        paginator.jqPaginator('option', {
+            currentPage: page,
+            totalPages: result.total_pages
+        });
+    }).catch(error => showAjaxError);
+}
+
 function showPlayerTexturePreview(pid) {
     $.ajax({
         type: "POST",
@@ -179,6 +250,43 @@ $(document).ready(function() {
         confirmButtonText: trans('general.confirm'),
         cancelButtonText: trans('general.cancel')
     });
+
+    if (window.location.pathname.includes('/user/closet')) {
+        Promise.resolve($.ajax({
+            type: 'GET',
+            url: /(^https?.*)\/user\/closet/.exec(window.location.href)[1] + '/user/closet-data',
+            dataType: 'json'
+        })).then(result => {
+            renderCloset(result.items, result.category);
+            $('#closet-paginator').jqPaginator({
+                totalPages: result.total_pages,
+                visiblePages: 5,
+                currentPage: 1,
+                first: '<li><a style="cursor: pointer;">«</a></li>',
+                prev: '<li><a style="cursor: pointer;">‹</a></li>',
+                next: '<li><a style="cursor: pointer;">›</a></li>',
+                last: '<li><a style="cursor: pointer;">»</a></li>',
+                page: '<li><a style="cursor: pointer;">{{page}}</a></li>',
+                wrapper: '<ul class="pagination pagination-sm no-margin"></ul>',
+                onPageChange: page => {
+                    reloadCloset(
+                        $('#skin-category').hasClass('active') ? 'skin' : 'cape',
+                        page,
+                        $('input[name=q]').val()
+                    );
+                }
+            });
+        }).catch(error => showAjaxError);
+
+        $('input[name=q]').on('input', _.debounce(() => {
+            const category = $('#skin-category').hasClass('active') ? 'skin' : 'cape';
+            reloadCloset(
+                category,
+                1,
+                $('input[name=q]').val()
+            );
+        }, 350));
+    }
 });
 
 function setTexture() {
diff --git a/resources/lang/en/locale.js b/resources/lang/en/locale.js
index ae4d7f62..80fe4ac5 100644
--- a/resources/lang/en/locale.js
+++ b/resources/lang/en/locale.js
@@ -68,6 +68,11 @@
             signInRemainingTime: 'Available after :time hours',
 
             // Closet
+            emptyClosetMsg: '<p>Nothing in your closet...</p><p>Why not explore the <a href=":url">Skin Library</a> for a while?</p>',
+            renameItem: 'Rename item',
+            removeItem: 'Remove from closet',
+            setAsAvatar: 'Set as avatar',
+            viewInSkinlib: 'View in skin library',
             switch2dPreview: 'Switch to 2D Preview',
             switch3dPreview: 'Switch to 3D Preview',
             removeFromClosetNotice: 'Sure to remove this texture from your closet?',
@@ -153,10 +158,14 @@
             extracting: 'Extracting update package..'
         },
         general: {
+            skin: 'Skin',
+            cape: 'Cape',
             fatalError: 'Fatal Error (Please contact the author)',
             confirmLogout: 'Sure to log out?',
             confirm: 'OK',
-            cancel: 'Cancel'
+            cancel: 'Cancel',
+            more: 'More',
+            noResult: 'No result.'
         }
     };
 })(window.jQuery);
diff --git a/resources/lang/en/user.yml b/resources/lang/en/user.yml
index a9b019df..761d28e6 100644
--- a/resources/lang/en/user.yml
+++ b/resources/lang/en/user.yml
@@ -28,13 +28,11 @@ score-intro:
 closet:
   upload: Upload Texture
   search: Search Texture
+  type-to-search: Type to search
   switch-category: Switch Category
   view: View in skin library
   more: More
   set-avatar: Set as avatar
-  empty-msg: |
-    <p>Nothing in your closet...</p>
-    <p>Why not explore the <a href=":url">Skin Library</a> for a while?</p>
 
   use-as:
     button: Apply...
diff --git a/resources/lang/zh_CN/locale.js b/resources/lang/zh_CN/locale.js
index d68cb06b..4a9fa546 100644
--- a/resources/lang/zh_CN/locale.js
+++ b/resources/lang/zh_CN/locale.js
@@ -68,6 +68,11 @@
             signInRemainingTime: ':time 小时后可签到',
 
             // Closet
+            emptyClosetMsg: '<p>衣柜里啥都没有哦~</p><p>去<a href=":url">皮肤库</a>看看吧~</p>',
+            renameItem: '重命名物品',
+            removeItem: '从衣柜中移除',
+            setAsAvatar: '设为头像',
+            viewInSkinlib: '在皮肤库中查看',
             switch2dPreview: '切换 2D 预览',
             switch3dPreview: '切换 3D 预览',
             removeFromClosetNotice: '确定要从衣柜中移除此材质吗？',
@@ -153,10 +158,14 @@
             extracting: '正在解压更新包'
         },
         general: {
+            skin: '皮肤',
+            cape: '披风',
             fatalError: '严重错误（请联系作者）',
             confirmLogout: '确定要登出吗？',
             confirm: '确定',
-            cancel:  '取消'
+            cancel: '取消',
+            more: '更多',
+            noResult: '无结果'
         },
         vendor: {
             datatables: {
diff --git a/resources/lang/zh_CN/user.yml b/resources/lang/zh_CN/user.yml
index ad7b9861..19e8ffc7 100644
--- a/resources/lang/zh_CN/user.yml
+++ b/resources/lang/zh_CN/user.yml
@@ -35,13 +35,11 @@ score-intro:
 closet:
   upload: 上传材质
   search: 搜索材质
+  type-to-search: 输入即搜索
   switch-category: 切换分类
   view: 在皮肤库中查看
   more: 更多
   set-avatar: 设为头像
-  empty-msg: |
-    <p>衣柜里啥都没有哦~</p>
-    <p>去<a href=":url">皮肤库</a>看看吧~</p>
 
   use-as:
     button: 使用...
diff --git a/resources/views/user/closet.tpl b/resources/views/user/closet.tpl
index 219e1426..993fbaa6 100644
--- a/resources/views/user/closet.tpl
+++ b/resources/views/user/closet.tpl
@@ -26,51 +26,30 @@
                 <div class="nav-tabs-custom">
                     <!-- Tabs within a box -->
                     <ul class="nav nav-tabs">
-                        <li class="active"><a href="#skin-category" data-toggle="tab">{{ trans('general.skin') }}</a></li>
-                        <li><a href="#cape-category" data-toggle="tab">{{ trans('general.cape') }}</a></li>
+                        <li class="active"><a href="#skin-category" class="category-switch" data-toggle="tab">{{ trans('general.skin') }}</a></li>
+                        <li><a href="#cape-category" class="category-switch" data-toggle="tab">{{ trans('general.cape') }}</a></li>
 
-                        <div style="padding: 7px;">
+                        <li class="pull-right" style="padding: 7px;">
                             <div class="has-feedback pull-right">
-                                <form method="get" action="" class="user-search-form">
-                                    <input type="text" name="q" class="form-control input-sm" placeholder="输入，回车搜索" value="{{ $q }}">
+                                <div class="user-search-form">
+                                    <input type="text" name="q" class="form-control input-sm" placeholder="{{ trans('user.closet.type-to-search') }}">
                                     <span class="glyphicon glyphicon-search form-control-feedback"></span>
-                                </form>
+                                </div>
                             </div>
-                        </div>
+                        </li>
                     </ul>
                     <div class="tab-content no-padding">
-                        <div class="tab-pane active box-body" id="skin-category">
-                            @include('vendor.closet-items', ['items' => (array)array_get($items, 'skin')])
-                        </div>
-
-                        <div class="tab-pane box-body" id="cape-category">
-                            @include('vendor.closet-items', ['items' => (array)array_get($items, 'cape')])
-                        </div>
+                        <div class="tab-pane active box-body" id="skin-category"></div>
+                        <div class="tab-pane box-body" id="cape-category"></div>
                     </div>
                     <div class="box-footer">
-                        <ul class="pagination pagination-sm no-margin pull-right">
-                            <?php $base_url = $q ? "?q=$q&" : "?"; ?>
-
-                            <li><a href="{{ $base_url }}page=1">«</a></li>
-                            @if ($page != 1)
-                            <li><a href="{{ $base_url }}page={{ $page-1 }}">{{ $page - 1 }}</a></li>
-                            @endif
-
-                            <li><a href="{{ $base_url }}page={{ $page }}" class="active">{{ $page }}</a></li>
-
-                            @if ($total_pages > $page)
-                            <li><a href="{{ $base_url }}page={{ $page+1 }}">{{ $page+1 }}</a></li>
-                            @endif
-
-                            <li><a href="{{ $base_url }}page={{ $total_pages }}">»</a></li>
-                        </ul>
-                        <p class="pull-right">{{ trans('general.pagination', ['page' => $page, 'total' => $total_pages]) }}</p>
+                        <div class="pull-right" id="closet-paginator" last-skin-page="1" last-cape-page="1"></div>
                     </div>
                 </div><!-- /.nav-tabs-custom -->
 
             </div>
 
-            <!-- Left col -->
+            <!-- Right col -->
             <div class="col-md-4">
 
                 <div class="box box-default">
diff --git a/resources/views/vendor/closet-items.tpl b/resources/views/vendor/closet-items.tpl
deleted file mode 100644
index 6f0f4bf4..00000000
--- a/resources/views/vendor/closet-items.tpl
+++ /dev/null
@@ -1,30 +0,0 @@
-@forelse ($items as $item)
-<div class="item" tid="{{ $item->tid }}">
-    <div class="item-body">
-        <img src="{{ url('preview/'.$item->tid) }}.png">
-    </div>
-    <div class="item-footer">
-        <p class="texture-name">
-            <span title="{{ $item->name }}">{{ $item->name }} <small>({{ $item->type }})</small></span>
-        </p>
-
-        <a href="{{ url('skinlib/show/'.$item->tid) }}" title="{{ trans('user.closet.view') }}" class="more" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-share"></i></a>
-        <span title="{{ trans('user.closet.more') }}" class="more" data-toggle="dropdown" aria-haspopup="true" id="more-button"><i class="fa fa-cog"></i></span>
-
-        <ul class="dropup dropdown-menu" aria-labelledby="more-button">
-            <li><a href="javascript:renameClosetItem({{ $item->tid }}, '{{ $item->name }}');">{{ trans('user.closet.rename.title') }}</a></li>
-            <li><a href="javascript:removeFromCloset({{ $item->tid }});">{{ trans('user.closet.remove.title') }}</a></li>
-            <li><a href="javascript:setAsAvatar({{ $item->tid }});">{{ trans('user.closet.set-avatar') }}</a></li>
-        </ul>
-    </div>
-</div>
-@empty
-<div class="empty-msg">
-    @if($q)
-    {{ trans('skinlib.general.no-result') }}
-    @else
-    {!! trans('user.closet.empty-msg', ['url' => url('skinlib')]) !!}
-    @endif
-</div>
-
-@endforelse