diff --git a/app/FileManagerFile.php b/app/FileManagerFile.php
index a9c6af79..775449f5 100644
--- a/app/FileManagerFile.php
+++ b/app/FileManagerFile.php
@@ -9,6 +9,7 @@ use Illuminate\Support\Str;
 use Laravel\Scout\Searchable;
 use TeamTNT\TNTSearch\Indexer\TNTIndexer;
 use \Illuminate\Database\Eloquent\SoftDeletes;
+use Kyslik\ColumnSortable\Sortable;
 
 /**
  * App\FileManagerFile
@@ -55,7 +56,7 @@ use \Illuminate\Database\Eloquent\SoftDeletes;
  */
 class FileManagerFile extends Model
 {
-    use Searchable, SoftDeletes;
+    use Searchable, SoftDeletes , Sortable;
 
     public $public_access = null;
 
@@ -71,6 +72,16 @@ class FileManagerFile extends Model
         'metadata' => 'array',
     ];
 
+    /**
+     * Sortable columns
+     *
+     * @var string[]
+     */
+    public $sortable = [
+        'name',
+        'created_at',
+    ];
+
     /**
      * Set routes with public access
      *
diff --git a/app/FileManagerFolder.php b/app/FileManagerFolder.php
index cf767ba5..526e8bf1 100644
--- a/app/FileManagerFolder.php
+++ b/app/FileManagerFolder.php
@@ -11,6 +11,7 @@ use RecursiveArrayIterator;
 use RecursiveIteratorIterator;
 use TeamTNT\TNTSearch\Indexer\TNTIndexer;
 use \Illuminate\Database\Eloquent\SoftDeletes;
+use Kyslik\ColumnSortable\Sortable;
 
 /**
  * App\FileManagerFolder
@@ -61,7 +62,7 @@ use \Illuminate\Database\Eloquent\SoftDeletes;
  */
 class FileManagerFolder extends Model
 {
-    use Searchable, SoftDeletes;
+    use Searchable, SoftDeletes , Sortable;
 
     protected $guarded = [
         'id'
@@ -71,6 +72,16 @@ class FileManagerFolder extends Model
         'items', 'trashed_items'
     ];
 
+    /**
+     * Sortable columns
+     *
+     * @var string[]
+     */
+    public $sortable = [
+        'name',
+        'created_at',
+    ];
+
     /**
      * Index folder
      *
diff --git a/app/Http/Controllers/FileBrowser/BrowseController.php b/app/Http/Controllers/FileBrowser/BrowseController.php
index 207a2411..00f17794 100644
--- a/app/Http/Controllers/FileBrowser/BrowseController.php
+++ b/app/Http/Controllers/FileBrowser/BrowseController.php
@@ -36,6 +36,7 @@ class BrowseController extends Controller
             ->with(['parent'])
             ->where('user_id', $user_id)
             ->whereIn('unique_id', filter_folders_ids($folders_trashed))
+            ->sortable()
             ->get();
 
         // Get files trashed
@@ -43,6 +44,7 @@ class BrowseController extends Controller
             ->with(['parent'])
             ->where('user_id', $user_id)
             ->whereNotIn('folder_id', array_values(array_unique(recursiveFind($folders_trashed->toArray(), 'unique_id'))))
+            ->sortable()
             ->get();
 
         // Collect folders and files to single array
@@ -72,11 +74,13 @@ class BrowseController extends Controller
         $folders = FileManagerFolder::with(['parent', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->whereIn('unique_id', $folder_ids)
+            ->sortable()
             ->get();
 
         $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->whereIn('unique_id', $file_ids)
+            ->sortable()
             ->get();
 
         // Collect folders and files to single array
@@ -91,7 +95,8 @@ class BrowseController extends Controller
     public function latest() {
 
         // Get User
-        $user = User::with(['latest_uploads'])
+        $user = User::with(['latest_uploads' => function($query) {
+            $query->sortable(); }])
             ->where('id', Auth::id())
             ->first();
 
@@ -107,7 +112,7 @@ class BrowseController extends Controller
 
         // Get User
         $uploads = FileManagerFile::with(['parent'])->where('user_id', Auth::id())
-            ->whereUserScope('editor')->orderBy('created_at', 'DESC')->get();
+            ->whereUserScope('editor')->sortable()->get();
 
         return $uploads;
     }
@@ -148,13 +153,13 @@ class BrowseController extends Controller
         $folders = FileManagerFolder::with(['parent', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->where('parent_id', $unique_id)
-            ->orderBy('created_at', 'DESC')
+            ->sortable(['name', 'DESC'])
             ->get();
 
         $files = FileManagerFile::with(['parent', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('user_id', $user_id)
             ->where('folder_id', $unique_id)
-            ->orderBy('created_at', 'DESC')
+            ->sortable(['name', 'DESC'])
             ->get();
 
         // Collect folders and files to single array
@@ -171,7 +176,7 @@ class BrowseController extends Controller
         $folders = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
             ->where('parent_id', 0)
             ->where('user_id', Auth::id())
-            ->orderByDesc('created_at')
+            ->sortable()
             ->get(['id', 'parent_id', 'unique_id', 'name']);
 
         return [
diff --git a/app/Http/Controllers/Sharing/FileSharingController.php b/app/Http/Controllers/Sharing/FileSharingController.php
index f04f39c4..1c6140f1 100644
--- a/app/Http/Controllers/Sharing/FileSharingController.php
+++ b/app/Http/Controllers/Sharing/FileSharingController.php
@@ -251,6 +251,7 @@ class FileSharingController extends Controller
         $folders = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
             ->where('parent_id', $shared->item_id)
             ->where('user_id', $shared->user_id)
+            ->sortable()
             ->get(['id', 'parent_id', 'unique_id', 'name']);
 
         // Return folder tree
@@ -281,6 +282,7 @@ class FileSharingController extends Controller
         $folders = FileManagerFolder::with('folders:id,parent_id,unique_id,name')
             ->where('parent_id', $shared->item_id)
             ->where('user_id', $shared->user_id)
+            ->sortable()
             ->get(['id', 'parent_id', 'unique_id', 'name']);
 
         // Return folder tree
@@ -403,10 +405,12 @@ class FileSharingController extends Controller
     {
         $folders = FileManagerFolder::where('user_id', $shared->user_id)
             ->where('parent_id', $unique_id)
+            ->sortable()
             ->get();
 
         $files = FileManagerFile::where('user_id', $shared->user_id)
             ->where('folder_id', $unique_id)
+            ->sortable()
             ->get();
 
         return [$folders, $files];
diff --git a/app/User.php b/app/User.php
index 106c5baf..4b1afaf1 100644
--- a/app/User.php
+++ b/app/User.php
@@ -195,10 +195,14 @@ class User extends Authenticatable
      */
     public function getFolderTreeAttribute()
     {
+
+        $sort = strtolower(request()->input('sort'));
+        $direction = strtolower(request()->input('direction'));
+
         return FileManagerFolder::with(['folders.shared', 'shared:token,id,item_id,permission,protected,expire_in'])
             ->where('parent_id', 0)
             ->where('user_id', $this->id)
-            ->orderByDesc('created_at')
+            ->orderBy($sort , $direction)
             ->get();
     }
 
@@ -311,7 +315,7 @@ class User extends Authenticatable
      */
     public function latest_uploads()
     {
-        return $this->hasMany(FileManagerFile::class)->with(['parent'])->orderBy('created_at', 'DESC')->take(40);
+        return $this->hasMany(FileManagerFile::class)->with(['parent'])->take(40);
     }
 
     /**
diff --git a/public/assets/icons/alphabet.svg b/public/assets/icons/alphabet.svg
new file mode 100644
index 00000000..68cdad54
--- /dev/null
+++ b/public/assets/icons/alphabet.svg
@@ -0,0 +1,12 @@
+<svg width="13px" height="15px" viewBox="0 0 13 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Storage-Alert-Copy" transform="translate(-888.000000, -238.000000)" stroke="#000000" stroke-width="1.6">
+            <g id="Sorting-Menu" transform="translate(865.000000, 67.000000)">
+                <g id="alphabet-icon" transform="translate(24.000000, 172.000000)">
+                    <polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
+                    <line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/icons/sorting-icon.svg b/public/assets/icons/sorting-icon.svg
new file mode 100644
index 00000000..e58e1bb0
--- /dev/null
+++ b/public/assets/icons/sorting-icon.svg
@@ -0,0 +1,18 @@
+<svg v-if="source === 'preview'" size='19'
+    width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Storage-Alert-Copy" transform="translate(-1092.000000, -28.000000)" stroke="#000000" stroke-width="1.4">
+            <g id="Toolbar" transform="translate(331.000000, 19.000000)">
+                <g id="Tools" transform="translate(581.000000, 9.000000)">
+                    <g id="sort-icon" transform="translate(181.000000, 1.000000)">
+                        <rect id="Rectangle" x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
+                        <rect id="Rectangle" x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
+                        <line x1="0" y1="2" x2="6" y2="2" id="Path"></line>
+                        <line x1="0" y1="8" x2="6" y2="8" id="Path"></line>
+                        <line x1="0" y1="14" x2="6" y2="14" id="Path"></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+  </svg>
\ No newline at end of file
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index ff73889f..a4c5a626 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -22,29 +22,29 @@
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=be7eb0498b786a4859db",
     "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js?id=8b11e9c64262b9275963",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=abb47a424c09ace77d79",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=74ec544ef21261233eb0",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=a2f4d89af612c02f8db7",
+    "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~f48e9e59.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~f48e9e59.js?id=2256b90ad9fb36944861",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=ffd2f414666d7cc80b9d",
     "/chunks/database.js": "/chunks/database.js?id=0b21e6ff3bac5c963d9a",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=464c8e70974d492ce7f6",
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=826fbaa6cc4acab69f5d",
-    "/chunks/files.js": "/chunks/files.js?id=526b249b4ed5c6391cf8",
+    "/chunks/files.js": "/chunks/files.js?id=76b46f43df974e899836",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=8ccd35de575e8a91d02f",
-    "/chunks/files~chunks/shared-files.js": "/chunks/files~chunks/shared-files.js?id=b0fbc9ca0e4f56538924",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=389cb7f56b4ec6941a26",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=b632e7477f64bdc561ad",
     "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=ed167949ea9398f0fbeb",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=aba8c662fbc234892216",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=7dfffa0f25308ba70b7a",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=7e3cc762ef272500487c",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=262f284d4edc13719b00",
     "/chunks/landing-page.js": "/chunks/landing-page.js?id=920418aa2cd205d96d0a",
     "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=a28320bdc00aeb85409e",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=0607b8e16d6678e0b463",
-    "/chunks/pages.js": "/chunks/pages.js?id=7d3b984ad37798628e0d",
+    "/chunks/pages.js": "/chunks/pages.js?id=53cfb0cdbc2ecbc2111f",
     "/chunks/plan.js": "/chunks/plan.js?id=ed865758447ff7e3f2b5",
     "/chunks/plan-create.js": "/chunks/plan-create.js?id=f4199916eddc63fb1720",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=2a50cca120ca589f5626",
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=4a691e84a65d9a779d60",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=8c85b14979d3fb6c54a3",
-    "/chunks/plans.js": "/chunks/plans.js?id=f1ce3fd32aec565ab459",
+    "/chunks/plans.js": "/chunks/plans.js?id=db810284f32ea3aa36ad",
     "/chunks/profile.js": "/chunks/profile.js?id=df174ba95616670c8edb",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=42dbd1e9d17515be4a7b",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=0c7dd358b177460faa74",
@@ -52,12 +52,12 @@
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=40d5eed52256ea23edbe",
     "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=bc110f5ee1a5b984fda2",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=e318f7536b185dbe6b54",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=9be1d0aa0169eb57e78f",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=7782ad88fc805fe75f4c",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=22e7978fe8a5cb488e52",
     "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=367c9478591c7a4a2889",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=7da589bd335deefd5f65",
-    "/chunks/shared-files.js": "/chunks/shared-files.js?id=50538c88a0471fe4db6f",
-    "/chunks/shared-page.js": "/chunks/shared-page.js?id=19e7fdb00a89d06ee29f",
+    "/chunks/shared-files.js": "/chunks/shared-files.js?id=5d9381e60cc1307f715a",
+    "/chunks/shared-page.js": "/chunks/shared-page.js?id=6a76b27026b3ab28f544",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=703fbd23d18816590337",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=cedca52c29abfb3c58f1",
     "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=b99eb91043d1321187b9",
@@ -75,22 +75,36 @@
     "/chunks/user-password.js": "/chunks/user-password.js?id=b036eeaa5ef8e798f6dd",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=a99910f95c3e39caa78b",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e8ea1e67f9ac0a835ed0",
-    "/chunks/users.js": "/chunks/users.js?id=aba8837f40fbb79f99b4",
-    "/js/main.a76097b1c16b210f4474.hot-update.js": "/js/main.a76097b1c16b210f4474.hot-update.js",
-    "/chunks/files.a76097b1c16b210f4474.hot-update.js": "/chunks/files.a76097b1c16b210f4474.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.a76097b1c16b210f4474.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.a76097b1c16b210f4474.hot-update.js",
-    "/chunks/shared-files.a76097b1c16b210f4474.hot-update.js": "/chunks/shared-files.a76097b1c16b210f4474.hot-update.js",
-    "/js/main.417c204635751bec57ca.hot-update.js": "/js/main.417c204635751bec57ca.hot-update.js",
-    "/chunks/files.417c204635751bec57ca.hot-update.js": "/chunks/files.417c204635751bec57ca.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.417c204635751bec57ca.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.417c204635751bec57ca.hot-update.js",
-    "/chunks/shared-files.417c204635751bec57ca.hot-update.js": "/chunks/shared-files.417c204635751bec57ca.hot-update.js",
-    "/js/main.14ed483ebe3d1c35625a.hot-update.js": "/js/main.14ed483ebe3d1c35625a.hot-update.js",
-    "/chunks/files.14ed483ebe3d1c35625a.hot-update.js": "/chunks/files.14ed483ebe3d1c35625a.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.14ed483ebe3d1c35625a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.14ed483ebe3d1c35625a.hot-update.js",
-    "/chunks/shared-files.14ed483ebe3d1c35625a.hot-update.js": "/chunks/shared-files.14ed483ebe3d1c35625a.hot-update.js",
-    "/js/main.c312f89699f3d03ad302.hot-update.js": "/js/main.c312f89699f3d03ad302.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.bd219d066a788acaa591.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.bd219d066a788acaa591.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.75daf25e357343f3707b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.75daf25e357343f3707b.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.10503e20e1b1ccb70917.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.10503e20e1b1ccb70917.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.674609725830c01d1f68.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.674609725830c01d1f68.hot-update.js"
+    "/chunks/users.js": "/chunks/users.js?id=420d8c46141ab3e73395",
+    "/js/main.8d4cb880da1006d5c8e7.hot-update.js": "/js/main.8d4cb880da1006d5c8e7.hot-update.js",
+    "/js/main.7ca933a4fc956c3f8cee.hot-update.js": "/js/main.7ca933a4fc956c3f8cee.hot-update.js",
+    "/js/main.059482145d9321381825.hot-update.js": "/js/main.059482145d9321381825.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.8d718f0b675aebf2bf58.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.8d718f0b675aebf2bf58.hot-update.js",
+    "/js/main.c45659e034eac03e460f.hot-update.js": "/js/main.c45659e034eac03e460f.hot-update.js",
+    "/js/main.4e5fedc844f022a122fb.hot-update.js": "/js/main.4e5fedc844f022a122fb.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.ab5b5ca838d04673ea6c.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.ab5b5ca838d04673ea6c.hot-update.js",
+    "/js/main.d4fb74bb05baeaade187.hot-update.js": "/js/main.d4fb74bb05baeaade187.hot-update.js",
+    "/js/main.bb92d9b1b6f04a416c19.hot-update.js": "/js/main.bb92d9b1b6f04a416c19.hot-update.js",
+    "/js/main.7749317a64b5fdfedf39.hot-update.js": "/js/main.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/dashboard.7749317a64b5fdfedf39.hot-update.js": "/chunks/dashboard.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/files.7749317a64b5fdfedf39.hot-update.js": "/chunks/files.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.7749317a64b5fdfedf39.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/invoices.7749317a64b5fdfedf39.hot-update.js": "/chunks/invoices.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/pages.7749317a64b5fdfedf39.hot-update.js": "/chunks/pages.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/plans.7749317a64b5fdfedf39.hot-update.js": "/chunks/plans.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/settings-payment-methods.7749317a64b5fdfedf39.hot-update.js": "/chunks/settings-payment-methods.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/shared-files.7749317a64b5fdfedf39.hot-update.js": "/chunks/shared-files.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/shared-page.7749317a64b5fdfedf39.hot-update.js": "/chunks/shared-page.7749317a64b5fdfedf39.hot-update.js",
+    "/chunks/users.7749317a64b5fdfedf39.hot-update.js": "/chunks/users.7749317a64b5fdfedf39.hot-update.js",
+    "/js/main.44b44e168ba044f7264b.hot-update.js": "/js/main.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/dashboard.44b44e168ba044f7264b.hot-update.js": "/chunks/dashboard.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/files.44b44e168ba044f7264b.hot-update.js": "/chunks/files.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.44b44e168ba044f7264b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/invoices.44b44e168ba044f7264b.hot-update.js": "/chunks/invoices.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/pages.44b44e168ba044f7264b.hot-update.js": "/chunks/pages.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/plans.44b44e168ba044f7264b.hot-update.js": "/chunks/plans.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/settings-payment-methods.44b44e168ba044f7264b.hot-update.js": "/chunks/settings-payment-methods.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/shared-files.44b44e168ba044f7264b.hot-update.js": "/chunks/shared-files.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/shared-page.44b44e168ba044f7264b.hot-update.js": "/chunks/shared-page.44b44e168ba044f7264b.hot-update.js",
+    "/chunks/users.44b44e168ba044f7264b.hot-update.js": "/chunks/users.44b44e168ba044f7264b.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index a4bc67bf..1ae34c5b 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -31,6 +31,9 @@
             <!--  Drag & Drop UI -->
             <DragUI/>
 
+            <!-- Mobile menu for selecting view and sorting -->
+            <MobileSortingAndPreview/>
+
             <!--Mobile Menu-->
             <MobileMenu/>
 
@@ -56,6 +59,7 @@
 </template>
 
 <script>
+    import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
     import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
     import ToastrWrapper from '@/components/Others/Notifications/ToastrWrapper'
     import FileFullPreview from '@/components/FilesView/FileFullPreview'
@@ -78,6 +82,7 @@
     export default {
         name: 'app',
         components: {
+            MobileSortingAndPreview,
             MobileMultiSelectMenu,
             MobileNavigation,
             CookieDisclaimer,
diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/FilesView/DesktopToolbar.vue
index 5aeaafe5..ff3c97e7 100644
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -81,11 +81,13 @@
 
         <!--View options-->
         <div class="toolbar-button-wrapper">
-          <ToolbarButton
-            :source="preview"
-            :action="$t('actions.preview')"
-            @click.native="$store.dispatch('changePreviewType')"
+          <ToolbarButton 
+            source="preview-sorting"
+            class="preview-sorting"
+            :class="{ active: sortingAndPreview }"
+            @click.native=" sortingAndPreview = !sortingAndPreview"
           />
+
           <ToolbarButton
             :class="{ active: fileInfoVisible }"
             @click.native="$store.dispatch('fileInfoToggle')"
@@ -186,6 +188,22 @@ export default {
     return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
     },
   },
+  data () {
+    return {
+      sortingAndPreview: false
+    }
+  },
+  watch: {
+    sortingAndPreview () {
+      if(this.sortingAndPreview) {
+        events.$emit('sortingAndPreview-open')
+      }
+
+      if(!this.sortingAndPreview) {
+        events.$emit('sortingAndPreview-close')
+      }
+    }
+  },
   methods: {
     goBack() {
       // Get previous folder
@@ -352,10 +370,15 @@ export default {
     &.active {
       /deep/ svg {
         line,
-        circle {
+        circle,
+        rect {
           stroke: $theme;
         }
       }
+
+      &.preview-sorting{
+        background: $light_background;
+      }
     }
 
     &.is-inactive {
@@ -409,5 +432,11 @@ export default {
       }
     }
   }
+  
+    .active {     
+      &.preview-sorting{
+        background: $dark_mode_foreground !important;
+      }
+    }
 }
 </style>
diff --git a/resources/js/components/FilesView/FileInfoPanel.vue b/resources/js/components/FilesView/FileInfoPanel.vue
index 6bd480fc..4de0ba74 100644
--- a/resources/js/components/FilesView/FileInfoPanel.vue
+++ b/resources/js/components/FilesView/FileInfoPanel.vue
@@ -129,7 +129,7 @@
             },
             moveItem() {
                 // Move item fire popup
-                events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail[0]})
+               events.$emit("popup:open", { name: "move", item: this.fileInfoDetail});
             }
         }
     }
diff --git a/resources/js/components/FilesView/Icons/AlphabetIcon.vue b/resources/js/components/FilesView/Icons/AlphabetIcon.vue
new file mode 100644
index 00000000..cfe86362
--- /dev/null
+++ b/resources/js/components/FilesView/Icons/AlphabetIcon.vue
@@ -0,0 +1,14 @@
+<template>
+   <svg width="13px" height="15px" viewBox="0 0 13 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Storage-Alert-Copy" transform="translate(-888.000000, -238.000000)" stroke="#000000" stroke-width="1.6">
+            <g id="Sorting-Menu" transform="translate(865.000000, 67.000000)">
+                <g id="alphabet-icon" transform="translate(24.000000, 172.000000)">
+                    <polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
+                    <line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
+</template>
\ No newline at end of file
diff --git a/resources/js/components/FilesView/MobileActionButton.vue b/resources/js/components/FilesView/MobileActionButton.vue
index 03d45166..7e2e35a5 100644
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/resources/js/components/FilesView/MobileActionButton.vue
@@ -8,6 +8,24 @@
             <grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
             <user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon"></user-plus-icon>
             <plus-icon v-if="icon === 'plus'" size="15" class="icon"></plus-icon>
+            <svg v-if="icon === 'preview-sorting'" size="15" class="icon"
+                width="15px" height="15px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+                    <g id="Storage-Alert-Copy" transform="translate(-1092.000000, -28.000000)" stroke="#000000" stroke-width="1.4">
+                        <g id="Toolbar" transform="translate(331.000000, 19.000000)">
+                            <g id="Tools" transform="translate(581.000000, 9.000000)">
+                                <g id="sort-icon" transform="translate(181.000000, 1.000000)">
+                                    <rect id="Rectangle" x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
+                                    <rect id="Rectangle" x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
+                                    <line x1="0" y1="2" x2="6" y2="2" id="Path"></line>
+                                    <line x1="0" y1="8" x2="6" y2="8" id="Path"></line>
+                                    <line x1="0" y1="14" x2="6" y2="14" id="Path"></line>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </svg>
             <span class="label">
                 <slot></slot>
             </span>
diff --git a/resources/js/components/FilesView/MobileActions.vue b/resources/js/components/FilesView/MobileActions.vue
index d899dc90..af009c2c 100644
--- a/resources/js/components/FilesView/MobileActions.vue
+++ b/resources/js/components/FilesView/MobileActions.vue
@@ -3,8 +3,8 @@
 
         <!--Actions for trash location with MASTER permission--->
         <div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="mobile-actions">
-            <MobileActionButton @click.native="switchPreview" :icon="previewIcon">
-                {{ previewText }}
+            <MobileActionButton :class="{'active' : mobileSortingAndPreview}" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
+                {{$t('preview_sorting.preview_sorting_button')}}
             </MobileActionButton>
             <MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
                 {{ $t('context_menu.select') }}
@@ -25,15 +25,15 @@
             <MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
                {{ $t('context_menu.select') }}
             </MobileMultiSelectButton>
-            <MobileActionButton @click.native="switchPreview" :icon="previewIcon">
-                {{ previewText }}
+            <MobileActionButton :class="{'active' : mobileSortingAndPreview}" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
+                {{$t('preview_sorting.preview_sorting_button')}}
             </MobileActionButton>
         </div>
 
         <!--ContextMenu for Base location with VISITOR permission-->
         <div v-if="($isThisLocation(['base', 'shared', 'public']) && $checkPermission('visitor')) || ($isThisLocation(['latest', 'shared']) && $checkPermission('master'))" class="mobile-actions">
-            <MobileActionButton @click.native="switchPreview" :icon="previewIcon">
-                {{ previewText }}
+            <MobileActionButton :class="{'active' : mobileSortingAndPreview}" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
+                {{$t('preview_sorting.preview_sorting_button')}}
             </MobileActionButton>
              <MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
                {{ $t('context_menu.select') }}
@@ -67,14 +67,12 @@
             previewIcon() {
                 return this.FilePreviewType === 'list' ? 'th' : 'th-list'
             },
-            previewText() {
-                return this.FilePreviewType === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
-            }
         },
         data () {
             return {
                 mobileMultiSelect: false,
-                turnOff:false
+                turnOff:false,
+                mobileSortingAndPreview: false
             }
         },
         watch: {
@@ -86,13 +84,19 @@
                 if(!this.mobileMultiSelect) {
                     events.$emit('mobileSelecting-stop')
                 }
+            },
+            mobileSortingAndPreview (oldValue , newValue) {
+                if(this.mobileSortingAndPreview) {
+                    events.$emit('mobileSortingAndPreview-open')
+                    this.mobileMultiSelect = false
+                }
+
+                if(!this.mobileSortingAndPreview) {
+                    events.$emit('mobileSortingAndPreview-close')
+                }
             }
         },
         methods: {
-            switchPreview() {
-                this.$store.dispatch('changePreviewType')
-                events.$emit('mobileSelecting-stop')
-            },
             createFolder() {
                 if (this.$isMobile()) {
                     // Get folder name
@@ -111,6 +115,11 @@
                     this.mobileMultiSelect = false
                 }) 
 
+                events.$on('mobileSortingAndPreview-close', () => {
+                    this.mobileSortingAndPreview = false
+                })
+                
+
         }
     }
 </script>
@@ -118,6 +127,11 @@
 <style scoped lang="scss">
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
+    .active {
+            /deep/.label {
+                color: $theme !important;
+            }
+    }
 
     #mobile-actions-wrapper {
         display: none;
diff --git a/resources/js/components/FilesView/MobileSortingAndPreview.vue b/resources/js/components/FilesView/MobileSortingAndPreview.vue
new file mode 100644
index 00000000..bd5c69b4
--- /dev/null
+++ b/resources/js/components/FilesView/MobileSortingAndPreview.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="options-wrapper"  >
+    <transition name="context-menu">
+      <div
+        class="options"
+        v-if="isVisible"
+      >
+          <div class="menu-options">
+
+            <ul class="menu-option-group">
+              <li class="menu-option" @click="changePreview('grid')"
+              >
+                <div class="icon">
+                  <grid-icon size="17"/>
+                </div>
+                <div class="text-label">
+                  {{$t('preview_sorting.grid_view')}}
+                </div>
+                <div class="show-icon" v-if="isGrid">
+                        <check-icon size="17"/>
+                </div>
+              </li>
+              <li class="menu-option" @click="changePreview('list')">
+                <div class="icon">
+                  <list-icon size="17"/>
+                </div>
+                <div class="text-label">
+                  {{$t('preview_sorting.list_view')}}
+                </div>
+                 <div class="show-icon" v-if="isList">
+                        <check-icon size="17"/>
+                </div>
+              </li>
+            </ul>
+
+            <ul class="menu-option-group">
+              <li c class="menu-option" @click="sort('created_at')">
+                <div class="icon">
+                  <calendar-icon size="17"/>
+                </div>
+                <div class="text-label">
+                   {{$t('preview_sorting.sort_date')}}
+                </div>
+                <div class="show-icon" >
+                        <arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
+                </div>
+              </li>
+              <li class="menu-option" @click="sort('name')" >
+                <div class="icon">
+                  <alphabet-icon size="17" class="aplhabet-icon"/>
+                </div>
+                <div class="text-label">
+                  {{$t('preview_sorting.sort_alphabet')}}
+                </div>
+                <div class="show-icon">
+                    <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
+                </div>
+              </li>
+            </ul>
+          </div>
+
+      </div>
+    </transition>
+    <transition name="fade">
+      <div
+        v-show="isVisible"
+        class="vignette"
+        @click.self="close"
+      ></div>
+    </transition>
+  </div>
+</template>
+
+<script>
+
+import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
+import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
+
+export default {
+    name: "MobileSortingAndPreview",
+    components: {
+        CalendarIcon,
+        AlphabetIcon,
+        ArrowUpIcon,
+        CheckIcon,
+        ListIcon,
+        GridIcon
+    },
+    computed: {
+        ...mapGetters(['FilePreviewType']),
+        isGrid() {
+            return this.FilePreviewType === 'grid'
+        },
+        isList() {
+            return this.FilePreviewType === 'list'
+        },
+    },
+    data () {
+            return {
+                isVisible: false,
+                filter: {
+                    sort: 'DESC',
+                    field: undefined,
+                }
+            }
+        },
+    methods: {
+      close() {
+        this.isVisible = false
+        events.$emit('mobileSortingAndPreview-close')
+      },
+        sort (field) {
+
+            this.filter.field = field
+
+              // Set sorting direction
+            if (this.filter.sort === 'DESC') {
+                this.filter.sort = 'ASC'
+            } else if (this.filter.sort === 'ASC') {
+                this.filter.sort = 'DESC'
+            }
+
+            // Save to localStorage sorting options
+            localStorage.setItem('sorting', JSON.stringify({sort: this.filter.sort , field: this.filter.field}))
+
+            // Update sorting state in vuex
+            this.$store.commit('UPDATE_SORTING')
+            
+            // Get data using the application location
+            this.$getDataByLocation()
+        },
+        changePreview(previewType) {
+            this.$store.dispatch('changePreviewType' , previewType)
+        }
+    },
+    mounted () {
+
+          let sorting = JSON.parse(localStorage.getItem('sorting'))
+
+          // Set default sorting if is not setup in LocalStorage
+          this.filter.sort = sorting ? sorting.sort : 'DESC'
+          this.filter.field = sorting ? sorting.field : 'created_at'
+
+          events.$on('mobileSortingAndPreview-open', () => {
+              this.isVisible = true
+          })
+
+          events.$on('mobileSortingAndPreview-close', () => {
+          this.isVisible = false
+          })
+      }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vue-file-manager/_variables";
+@import "@assets/vue-file-manager/_mixins";
+
+.show-icon {
+    margin-left: auto;
+    max-height: 19px;
+     .arrow-down {
+        @include transform(rotate(180deg));
+    }
+}
+.icon {
+        margin-right: 20px;
+        line-height: 0; 
+        .aplhabet-icon {
+            /deep/line,
+            /deep/polyline {
+                stroke:$text ;
+            }
+        }
+            
+    }
+
+.menu-option {
+  display: flex;
+  align-items: center;
+
+  .icon {
+    margin-right: 20px;
+    line-height: 0;
+  }
+
+  .text-label {
+    @include font-size(16);
+  }
+}
+
+.vignette {
+  background: rgba(0, 0, 0, 0.35);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  cursor: pointer;
+  opacity: 1;
+}
+
+.options {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  overflow: hidden;
+  background: white;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+
+  .menu-options {
+    margin-top: 10px;
+    list-style: none;
+    width: 100%;
+
+    .menu-option-group {
+      padding: 5px 0;
+      border-bottom: 1px solid $light_mode_border;
+
+      &:first-child {
+        padding-top: 0;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+    }
+
+    .menu-option {
+      font-weight: 700;
+      letter-spacing: 0.15px;
+      @include font-size(14);
+      cursor: pointer;
+      width: 100%;
+      padding: 17px 20px;
+      text-align: center;
+
+      &:last-child {
+        border: none;
+      }
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .vignette {
+    background: $dark_mode_vignette;
+  }
+
+  .options {
+    background: $dark_mode_background;
+
+    .menu-options {
+      background: $dark_mode_background;
+
+      .menu-option-group {
+        border-color: $dark_mode_border_color;
+      }
+
+      .menu-option {
+        color: $dark_mode_text_primary;
+      }
+    }
+  }
+  .icon {
+      .aplhabet-icon {
+          /deep/line,
+          /deep/polyline {
+              stroke:$dark_mode_text_primary ;
+          }
+      }
+  }
+}
+
+// Transition
+.context-menu-enter-active,
+.fade-enter-active {
+  transition: all 200ms;
+}
+
+.context-menu-leave-active,
+.fade-leave-active {
+  transition: all 200ms;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.context-menu-enter,
+.context-menu-leave-to {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.context-menu-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/resources/js/components/FilesView/SortingAndPreview.vue b/resources/js/components/FilesView/SortingAndPreview.vue
new file mode 100644
index 00000000..9e1824c4
--- /dev/null
+++ b/resources/js/components/FilesView/SortingAndPreview.vue
@@ -0,0 +1,262 @@
+<template>
+     <div v-if="isVisible"  class="sorting-preview" >
+
+        <div class="menu-options" id="menu-list">
+            <ul class="menu-option-group">
+                <li class="menu-option" @click="changePreview('grid')" >
+                    <div class="icon">
+                        <grid-icon size="17"/>
+                    </div>
+                    <div class="text-label">
+                      {{$t('preview_sorting.grid_view')}}
+                    </div>
+                    <div class="show-icon" v-if="isGrid">
+                        <check-icon size="17"/>
+                    </div>
+                </li>
+                <li class="menu-option" @click="changePreview('list')"> 
+                    <div class="icon">
+                        <list-icon size="17"/>
+                    </div>
+                    <div class="text-label">
+                        {{$t('preview_sorting.list_view')}}
+                    </div>
+                    <div class="show-icon" v-if="isList">
+                        <check-icon size="17"/>
+                    </div>
+                </li>
+                
+            </ul>
+            <ul class="menu-option-group">
+                <li class="menu-option" @click="sort('created_at')">
+                    <div class="icon">
+                        <calendar-icon size="17"/>
+                    </div>
+                    <div class="text-label">
+                        {{$t('preview_sorting.sort_date')}}
+                    </div>
+                    <div class="show-icon" >
+                        <arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
+                    </div>
+                </li>
+                <li class="menu-option" @click="sort('name')"  >
+                    <div class="icon">
+                       <alphabet-icon size="17" class="aplhabet-icon"/>
+                    </div>
+                    <div class="text-label">
+                       {{$t('preview_sorting.sort_alphabet')}}
+                    </div>
+                    <div class="show-icon">
+                        <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
+    import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
+    import { mapGetters } from 'vuex'
+    import { events } from '@/bus'
+
+    export default {
+        name:'SortingAndPreview',
+        components: {
+            CalendarIcon,
+            AlphabetIcon,
+            ArrowUpIcon,
+            CheckIcon,
+            ListIcon,
+            GridIcon
+        },
+        computed: {
+            ...mapGetters(['FilePreviewType']),
+            isGrid() {
+                return this.FilePreviewType === 'grid'
+            },
+            isList() {
+                return this.FilePreviewType === 'list'
+            },
+        },
+        data () {
+            return {
+                isVisible: false,
+                filter: {
+                    sort: 'DESC',
+                    field: undefined,
+                }
+            }
+        },
+        methods: {
+            sort (field) {
+
+                this.filter.field = field
+
+                 // Set sorting direction
+                if (this.filter.sort === 'DESC') {
+                    this.filter.sort = 'ASC'
+                } else if (this.filter.sort === 'ASC') {
+                    this.filter.sort = 'DESC'
+                }
+
+                // Save to localStorage sorting options
+                localStorage.setItem('sorting', JSON.stringify({sort: this.filter.sort , field: this.filter.field}))
+
+                // Update sorting state in vuex
+                this.$store.commit('UPDATE_SORTING')
+                
+                // Get data using the application location
+                this.$getDataByLocation()
+            },
+            changePreview(previewType) {
+                this.$store.dispatch('changePreviewType' , previewType)
+            }
+        },
+        mounted () {
+
+            let sorting = JSON.parse(localStorage.getItem('sorting'))
+
+            // Set default sorting if in not setup in LocalStorage
+            this.filter.sort = sorting ? sorting.sort : 'DESC'
+            this.filter.field = sorting ? sorting.field : 'created_at'
+
+            events.$on('sortingAndPreview-open', () => {
+                this.isVisible = true
+            })
+
+             events.$on('sortingAndPreview-close', () => {
+                this.isVisible = false
+            })
+        }
+        
+    }
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vue-file-manager/_variables";
+@import "@assets/vue-file-manager/_mixins";
+
+.show-icon {
+    margin-left: auto;
+    max-height: 19px;
+     .arrow-down {
+        @include transform(rotate(180deg));
+    }
+}
+
+.menu-option {
+    display: flex;
+
+    .icon {
+        margin-right: 20px;
+        line-height: 0; 
+        .aplhabet-icon {
+            /deep/line,
+            /deep/polyline {
+                stroke:$text ;
+            }
+        }
+            
+    }
+
+    .text-label {
+        @include font-size(16);
+    }
+}
+
+.sorting-preview {
+    min-width: 250px;
+    position: absolute;
+    z-index: 99;
+    box-shadow: $shadow;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    right: 66px;
+    top: 63px;
+
+    &.showed {
+        display: block;
+    }
+}
+
+.menu-options {
+    list-style: none;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    .menu-option-group {
+        padding: 5px 0;
+        border-bottom: 1px solid $light_mode_border;
+
+        &:first-child {
+            padding-top: 0;
+        }
+
+        &:last-child {
+            padding-bottom: 0;
+            border-bottom: none;
+        }
+    }
+
+    .menu-option {
+        white-space: nowrap;
+        font-weight: 700;
+        @include font-size(14);
+        padding: 15px 20px;
+        cursor: pointer;
+        width: 100%;
+        color: $text;
+
+        &:hover {
+            background: $light_background;
+
+            .text-label {
+                color: $theme;
+            }
+
+            path,
+            /deep/line,
+            /deep/polyline,
+            rect,
+            circle,
+            polygon {
+                stroke: $theme !important; 
+            }
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .sorting-preview {
+        background: $dark_mode_foreground;
+
+        .menu-options {
+            .menu-option-group {
+                border-color: $dark_mode_border_color;
+            }
+
+            .menu-option {
+                color: $dark_mode_text_primary;
+
+                .icon {
+                    .aplhabet-icon {
+                        /deep/line,
+                        /deep/polyline {
+                            stroke:$dark_mode_text_primary ;
+                        }
+                    }
+                }
+
+                &:hover {
+                    background: rgba($theme, 0.1);
+                }           
+            }
+        }
+    }
+}
+</style>
diff --git a/resources/js/components/FilesView/ToolbarButton.vue b/resources/js/components/FilesView/ToolbarButton.vue
index 83a66f99..1eec7eba 100644
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -20,6 +20,25 @@
     <grid-icon v-if="source === 'th'" size="19"></grid-icon>
     <link-icon v-if="source === 'share'" size="19"></link-icon>
     <x-icon v-if="source === 'close'" size="19"></x-icon>
+
+    <svg v-if="source === 'preview-sorting'" size="19"
+      width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+          <g id="Storage-Alert-Copy" transform="translate(-1092.000000, -28.000000)" stroke="#000000" stroke-width="1.4">
+              <g id="Toolbar" transform="translate(331.000000, 19.000000)">
+                  <g id="Tools" transform="translate(581.000000, 9.000000)">
+                      <g id="sort-icon" transform="translate(181.000000, 1.000000)">
+                          <rect id="Rectangle" x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
+                          <rect id="Rectangle" x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
+                          <line x1="0" y1="2" x2="6" y2="2" id="Path"></line>
+                          <line x1="0" y1="8" x2="6" y2="8" id="Path"></line>
+                          <line x1="0" y1="14" x2="6" y2="14" id="Path"></line>
+                      </g>
+                  </g>
+              </g>
+          </g>
+      </g>
+  </svg>
   </button>
 </template>
 
diff --git a/resources/js/components/Others/ContentFileView.vue b/resources/js/components/Others/ContentFileView.vue
index 6430a0c0..a9097070 100644
--- a/resources/js/components/Others/ContentFileView.vue
+++ b/resources/js/components/Others/ContentFileView.vue
@@ -3,12 +3,14 @@
          @contextmenu.prevent.capture="contextMenu($event, undefined)"
          id="files-view">
         <ContextMenu/>
+        <SortingAndPreview/>
         <DesktopToolbar/>
         <FileBrowser/>
     </div>
 </template>
 
 <script>
+    import SortingAndPreview from '@/components/FilesView/SortingAndPreview'
     import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
     import FileBrowser from '@/components/FilesView/FileBrowser'
     import ContextMenu from '@/components/FilesView/ContextMenu'
@@ -18,6 +20,7 @@
     export default {
         name: 'FilesView',
         components: {
+            SortingAndPreview,
             DesktopToolbar,
             FileBrowser,
             ContextMenu,
diff --git a/resources/js/helpers.js b/resources/js/helpers.js
index 2b822ee1..19dbb26f 100644
--- a/resources/js/helpers.js
+++ b/resources/js/helpers.js
@@ -307,6 +307,27 @@ const Helpers = {
               } 
               return validated
         }
+        Vue.prototype.$getDataByLocation = function() {
+
+            let folder = store.getters.currentFolder
+
+            let actions = {
+                'base' : ['getFolder', [{ folder: folder, back: true, init: false, sorting:true}]],
+                'public' : ['browseShared', [{ folder: folder, back: true, init: false, sorting:true}]],
+                'latest' : ['getLatest'],
+                'shared' : ['getShared'],
+                'trash-root' : ['getTrash'],
+                'participant_uploads' : ['getParticipantUploads'],
+            }
+
+            this.$store.dispatch(...actions[folder.location])
+            
+            // Get dara of user with favourites tree
+            this.$store.dispatch('getAppData')
+
+            // Get data of Navigator tree
+            this.$store.dispatch('getFolderTree')
+        }
     }
 }
 
diff --git a/resources/js/i18n/lang/cn.json b/resources/js/i18n/lang/cn.json
index 8ba8ee10..bf1cb950 100644
--- a/resources/js/i18n/lang/cn.json
+++ b/resources/js/i18n/lang/cn.json
@@ -279,6 +279,13 @@
 		"upload": "上传",
 		"select": "Select"
 	},
+	"preview_sorting": {
+		"grid_view": "Grid View",
+		"list_view": "List View",
+		"sort_date": "Sort By Date",
+		"sort_alphabet": "Sort By Aplhabet",
+		"preview_sorting_button": "View"
+	},
 	"cookie_disclaimer": {
 		"button": "cookies policy",
 		"description": "By browsing this website you are agreeing to our {0}."
@@ -585,10 +592,6 @@
 		"message": "您的订阅已重新激活，并且将按原始计费周期计费。",
 		"title": "订阅已取消"
 	},
-	"preview_type": {
-		"grid": "方块",
-		"list": "列表"
-	},
 	"profile": {
 		"change_pass": "修改您的密码",
 		"profile_info": "用户信息",
diff --git a/resources/js/i18n/lang/en.json b/resources/js/i18n/lang/en.json
index 9f2c2db0..0c0552af 100644
--- a/resources/js/i18n/lang/en.json
+++ b/resources/js/i18n/lang/en.json
@@ -281,6 +281,13 @@
 		"upload": "Upload",
 		"select": "Select"
 	},
+	"preview_sorting": {
+		"grid_view": "Grid View",
+		"list_view": "List View",
+		"sort_date": "Sort By Date",
+		"sort_alphabet": "Sort By Aplhabet",
+		"preview_sorting_button": "View"
+	},
 	"cookie_disclaimer": {
 		"button": "cookies policy",
 		"description": "By browsing this website you are agreeing to our {0}."
@@ -587,10 +594,6 @@
 		"message": "Your subscription was re-activated, and they will be billed on the original billing cycle.",
 		"title": "Subscription Was Resumed"
 	},
-	"preview_type": {
-		"grid": "Grid",
-		"list": "List"
-	},
 	"profile": {
 		"change_pass": "Change Password",
 		"profile_info": "Profile Information",
diff --git a/resources/js/i18n/lang/sk.json b/resources/js/i18n/lang/sk.json
index 2c403d2d..dc1b6f8e 100644
--- a/resources/js/i18n/lang/sk.json
+++ b/resources/js/i18n/lang/sk.json
@@ -281,6 +281,13 @@
 		"upload": "Nahrať",
 		"select": "Výber"
 	},
+	"preview_sorting": {
+		"grid_view": "Mriežka",
+		"list_view": "List",
+		"sort_date": "Zoradiť podľa dátumu",
+		"sort_alphabet": "Zoradiť podľa náyvu",
+		"preview_sorting_button": "Zobrazenie"
+	},
 	"cookie_disclaimer": {
 		"button": "politikou cookies",
 		"description": "Prehliadaním tejto stránky súhlasim s našou"
@@ -587,10 +594,6 @@
 		"message": "Váš odber bol znova aktivovaný a budú vám účtované poplatky podľa pôvodného fakturačného cyklu.",
 		"title": "Predplatné bolo obnovené"
 	},
-	"preview_type": {
-		"grid": "Mriežka",
-		"list": "List"
-	},
 	"profile": {
 		"change_pass": "Zmeniť heslo",
 		"profile_info": "Profil",
diff --git a/resources/js/main.js b/resources/js/main.js
index 50e6ac7b..d1c70a4c 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -97,6 +97,7 @@ document.addEventListener('drag', (event) => {
 
 },false)
 
+// Handle for drop 
 document.addEventListener("dragend", () => {
   events.$emit('drop')
 }, false);
diff --git a/resources/js/store/modules/app.js b/resources/js/store/modules/app.js
index 43dc6f89..53f58fe4 100644
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -8,6 +8,10 @@ const defaultState = {
 	authorized: undefined,
 	homeDirectory: undefined,
 	requestedPlan: undefined,
+	sorting: {
+		sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
+		field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
+	},
 	roles: [
 		{
 			label: i18n.t('roles.admin'),
@@ -837,9 +841,10 @@ const defaultState = {
 	],
 }
 const actions = {
-	changePreviewType: ({commit, state}) => {
+	changePreviewType: ({commit, state}, preview) => {
+		
 		// Get preview type
-		let previewType = state.FilePreviewType == 'grid' ? 'list' : 'grid'
+		let previewType = preview
 
 		// Store preview type to localStorage
 		localStorage.setItem('preview_type', previewType)
@@ -860,6 +865,10 @@ const actions = {
 	},
 }
 const mutations = {
+	UPDATE_SORTING(state) {
+		state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
+		state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
+	},
 	INIT(state, data) {
 		state.config = data.config
 		state.authorized = data.authCookie
@@ -901,6 +910,9 @@ const getters = {
 	config: state => state.config,
 	index: state => state.index,
 	roles: state => state.roles,
+	sorting: (state) => {
+		return  {sorting: state.sorting , URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort}
+	},
 }
 
 export default {
diff --git a/resources/js/store/modules/fileBrowser.js b/resources/js/store/modules/fileBrowser.js
index c9270ed4..eeefc4e6 100644
--- a/resources/js/store/modules/fileBrowser.js
+++ b/resources/js/store/modules/fileBrowser.js
@@ -32,7 +32,7 @@ const actions = {
         // Set folder location
         payload.folder.location = payload.folder.deleted_at || payload.folder.location === 'trash' ? 'trash' : 'base'
 
-        if (! payload.back)
+        if (! payload.back && !payload.sorting)
             commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
 
         let url = payload.folder.location === 'trash'
@@ -40,12 +40,12 @@ const actions = {
             : '/folders/' + payload.folder.unique_id
 
         axios
-            .get(getters.api + url)
+            .get(getters.api + url + getters.sorting.URI)
             .then(response => {
                 commit('LOADING_STATE', {loading: false, data: response.data})
                 commit('STORE_CURRENT_FOLDER', payload.folder)
 
-                if (payload.back)
+                if (payload.back && !payload.sorting)
                     commit('REMOVE_BROWSER_HISTORY')
 
                 events.$emit('scrollTop')
@@ -79,7 +79,7 @@ const actions = {
         })
 
         axios
-            .get(getters.api + '/latest')
+            .get(getters.api + '/latest' + getters.sorting.URI)
             .then(response => {
                 commit('LOADING_STATE', {loading: false, data: response.data})
                 events.$emit('scrollTop')
@@ -90,6 +90,7 @@ const actions = {
         commit('LOADING_STATE', {loading: true, data: []})
         commit('FLUSH_FOLDER_HISTORY')
 
+
         let currentFolder = {
             name: i18n.t('sidebar.my_shared'),
             location: 'shared',
@@ -99,7 +100,7 @@ const actions = {
         commit('STORE_CURRENT_FOLDER', currentFolder)
 
         axios
-            .get(getters.api + '/shared-all')
+            .get(getters.api + '/shared-all' + getters.sorting.URI)
             .then(response => {
                 commit('LOADING_STATE', {loading: false, data: response.data})
                 commit('STORE_PREVIOUS_FOLDER', currentFolder)
@@ -119,7 +120,7 @@ const actions = {
         })
 
         axios
-            .get(getters.api + '/participant-uploads')
+            .get(getters.api + '/participant-uploads' + getters.sorting.URI)
             .then(response => {
                 commit('LOADING_STATE', {loading: false, data: response.data})
 
@@ -140,7 +141,7 @@ const actions = {
         commit('STORE_CURRENT_FOLDER', trash)
 
         axios
-            .get(getters.api + '/trash')
+            .get(getters.api + '/trash' + getters.sorting.URI)
             .then(response => {
                 commit('LOADING_STATE', {loading: false, data: response.data})
                 commit('STORE_PREVIOUS_FOLDER', trash)
@@ -187,7 +188,7 @@ const actions = {
                 route = '/api/navigation'
 
             axios
-                .get(route)
+                .get(route + getters.sorting.URI)
                 .then(response => {
                     resolve(response)
 
diff --git a/resources/js/store/modules/sharing.js b/resources/js/store/modules/sharing.js
index e03ae51c..f7d39e2e 100644
--- a/resources/js/store/modules/sharing.js
+++ b/resources/js/store/modules/sharing.js
@@ -32,7 +32,7 @@ const actions = {
             events.$emit('clear-query')
         }
 
-        if (! payload.back)
+        if (! payload.back && !payload.sorting)
             commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
 
         payload.folder.location = 'public'
@@ -43,13 +43,13 @@ const actions = {
 
         return new Promise((resolve, reject) => {
             axios
-                .get(route)
+                .get(route + getters.sorting.URI)
                 .then(response => {
                     commit('LOADING_STATE', {loading: false, data: response.data})
                     commit('STORE_CURRENT_FOLDER', payload.folder)
                     events.$emit('scrollTop')
 
-                    if (payload.back)
+                    if (payload.back && !payload.sorting)
                         commit('REMOVE_BROWSER_HISTORY')
 
                     resolve(response)
diff --git a/resources/js/store/modules/userAuth.js b/resources/js/store/modules/userAuth.js
index 8c8b7ff5..d08dadb6 100644
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -11,9 +11,10 @@ const defaultState = {
 
 const actions = {
     getAppData: ({commit, getters}) => {
+
         return new Promise((resolve, reject) => {
             axios
-                .get(getters.api + '/user')
+                .get(getters.api + '/user' + getters.sorting.URI)
                 .then((response) => {
                     resolve(response)
 
diff --git a/resources/js/views/Shared/SharedPage.vue b/resources/js/views/Shared/SharedPage.vue
index 15bad0bb..3ddf6def 100644
--- a/resources/js/views/Shared/SharedPage.vue
+++ b/resources/js/views/Shared/SharedPage.vue
@@ -21,6 +21,9 @@
         <!--Mobile Menu-->
         <MobileMenu/>
 
+        <!-- Mobile menu for selecting view and sorting -->
+        <MobileSortingAndPreview/>
+
         <!--System alerts-->
         <Alert />
 
@@ -101,6 +104,9 @@
 
                     <!--File browser-->
                     <FileBrowser/>
+                    
+                    <!-- Selecting preview list and sorting -->
+                    <SortingAndPreview/>
                 </div>
             </div>
     </div>
@@ -108,7 +114,9 @@
 
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
     import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
+    import SortingAndPreview from '@/components/FilesView/SortingAndPreview'
     import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
     import FileFullPreview from '@/components/FilesView/FileFullPreview'
     import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
@@ -138,8 +146,10 @@
     export default {
         name: 'SharedPage',
         components: {
+            MobileSortingAndPreview,
             MobileMultiSelectMenu,
             ValidationProvider,
+            SortingAndPreview,
             ValidationObserver,
             TreeMenuNavigator,
             FileFullPreview,