diff --git a/package-lock.json b/package-lock.json
index 5708a0ef..8a9adaf3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13493,6 +13493,11 @@
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
       "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
     },
+    "natural-orderby": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/natural-orderby/-/natural-orderby-2.0.3.tgz",
+      "integrity": "sha512-p7KTHxU0CUrcOXe62Zfrb5Z13nLvPhSWR/so3kFulUQU0sgUll2Z0LwpsLN351eOOD+hRGu/F1g+6xDfPeD++Q=="
+    },
     "needle": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/needle/-/needle-2.5.2.tgz",
diff --git a/package.json b/package.json
index c82ae4cf..b6c5fc10 100644
--- a/package.json
+++ b/package.json
@@ -30,13 +30,12 @@
     "url": "https://github.com/bpatrik/PiGallery2/issues"
   },
   "dependencies": {
+    "bcrypt": "5.0.0",
     "body-parser": "1.19.0",
     "cookie-parser": "1.4.5",
     "cookie-session": "2.0.0-rc.1",
     "csurf": "1.11.0",
     "ejs": "3.1.5",
-    "bcrypt": "5.0.0",
-    "sharp": "0.23.4",
     "exifreader": "3.13.0",
     "express": "4.17.1",
     "express-unless": "0.5.0",
@@ -44,7 +43,9 @@
     "image-size": "0.9.3",
     "jimp": "0.16.1",
     "locale": "0.1.0",
+    "natural-orderby": "^2.0.3",
     "reflect-metadata": "0.1.13",
+    "sharp": "0.23.4",
     "sqlite3": "5.0.0",
     "ts-exif-parser": "0.2.1",
     "ts-node-iptc": "1.0.11",
diff --git a/src/frontend/app/ui/gallery/gallery.component.ts b/src/frontend/app/ui/gallery/gallery.component.ts
index 03321946..598aa54e 100644
--- a/src/frontend/app/ui/gallery/gallery.component.ts
+++ b/src/frontend/app/ui/gallery/gallery.component.ts
@@ -19,6 +19,7 @@ import {QueryParams} from '../../../../common/QueryParams';
 import {SeededRandomService} from '../../model/seededRandom.service';
 import {take} from 'rxjs/operators';
 import {FileDTO} from '../../../../common/entities/FileDTO';
+import { compare } from 'natural-orderby';
 
 @Component({
   selector: 'app-gallery',
@@ -172,27 +173,11 @@ export class GalleryComponent implements OnInit, OnDestroy {
     switch (this._galleryService.sorting.value) {
       case SortingMethods.ascName:
       case SortingMethods.ascDate:
-        this.directories.sort((a: DirectoryDTO, b: DirectoryDTO) => {
-          if (a.name.toLowerCase() < b.name.toLowerCase()) {
-            return -1;
-          }
-          if (a.name.toLowerCase() > b.name.toLowerCase()) {
-            return 1;
-          }
-          return 0;
-        });
+        this.directories.sort((a: DirectoryDTO, b: DirectoryDTO) => compare()(a.name, b.name));
         break;
       case SortingMethods.descName:
       case SortingMethods.descDate:
-        this.directories.sort((a: DirectoryDTO, b: DirectoryDTO) => {
-          if (a.name.toLowerCase() < b.name.toLowerCase()) {
-            return 1;
-          }
-          if (a.name.toLowerCase() > b.name.toLowerCase()) {
-            return -1;
-          }
-          return 0;
-        });
+        this.directories.sort((a: DirectoryDTO, b: DirectoryDTO) => compare({ order: 'desc' })(a.name, b.name));
         break;
       case SortingMethods.random:
         this.rndService.setSeed(this.directories.length);