diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
index 25dd367f0..7551ceeb6 100644
--- a/web/src/Sidebar.jsx
+++ b/web/src/Sidebar.jsx
@@ -20,7 +20,7 @@ export default function Sidebar() {
           matches ? (
             <Fragment>
               <Separator />
-              {cameras.map(([camera]) => (
+              {cameras.sort(([aCam, aConf], [bCam, bConf]) => aConf.gui.order === bConf.gui.order ? 0 : (aConf.gui.order > bConf.gui.order ? 1 : -1)).map(([camera]) => (
                 <Destination href={`/cameras/${camera}`} text={camera} />
               ))}
               <Separator />
diff --git a/web/src/__tests__/Sidebar.test.jsx b/web/src/__tests__/Sidebar.test.jsx
index 86e68c621..d692a5e56 100644
--- a/web/src/__tests__/Sidebar.test.jsx
+++ b/web/src/__tests__/Sidebar.test.jsx
@@ -9,8 +9,8 @@ describe('Sidebar', () => {
     jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
       data: {
         cameras: {
-          front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] }, record: { enabled: true } },
-          side: { name: 'side', objects: { track: ['taco', 'cat', 'dog'] }, record: { enabled: false } },
+          front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] }, record: { enabled: true }, gui: { order: 0 } },
+          side: { name: 'side', objects: { track: ['taco', 'cat', 'dog'] }, record: { enabled: false }, gui: { order: 0 } },
         },
       },
     }));