diff --git a/src/components/RouteMenu.vue b/src/components/RouteMenu.vue
index da36241..6602959 100644
--- a/src/components/RouteMenu.vue
+++ b/src/components/RouteMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="route-menu">
-    <div v-if="isOnBrokeringRuleRoute">
+    <div v-if="isOnBrokeringRulePage">
       <ion-list>
         <ion-list-header>
           <ion-label>{{ "Order batches" }}</ion-label>
@@ -140,15 +140,12 @@
 <script setup lang="ts">
 import { IonBadge, IonButtons, IonButton, IonCard, IonChip, IonFooter, IonIcon, IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList, IonListHeader, IonSelect, IonSelectOption, IonToolbar, onIonViewWillEnter } from '@ionic/vue';
 import { addCircleOutline, archiveOutline } from "ionicons/icons";
-import { ref } from 'vue';
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
-const isOnBrokeringRuleRoute = ref(true)
 const router = useRouter();
 
-onIonViewWillEnter(() => {
-  isOnBrokeringRuleRoute.value = router.currentRoute.value.fullPath.includes('/brokering/route')
-})
+const isOnBrokeringRulePage = computed(() => router.currentRoute.value.fullPath.includes('/route'))
 </script>
 
 <style scoped>
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index bdd864c..2d2ce52 100644
--- a/src/views/BrokeringQuery.vue
+++ b/src/views/BrokeringQuery.vue
@@ -2,15 +2,20 @@
   <ion-page>
     <ion-split-pane content-id="query-content">
       <ion-list>
-        <ion-item>
-          <ion-label>{{ "Warehouse only" }}</ion-label>
-        </ion-item>
-        <ion-item>
-          <ion-label>{{ "Warehouse and stores" }}</ion-label>
-        </ion-item>
-        <ion-item>
-          <ion-label>{{ "Any Location" }}</ion-label>
-        </ion-item>
+        <ion-reorder-group :disabled="false">
+          <ion-item>
+            <ion-label>{{ "Warehouse only" }}</ion-label>
+            <ion-reorder />
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ "Warehouse and stores" }}</ion-label>
+            <ion-reorder />
+          </ion-item>
+          <ion-item>
+            <ion-label>{{ "Any Location" }}</ion-label>
+            <ion-reorder />
+          </ion-item>
+        </ion-reorder-group>
       </ion-list>
       <ion-content id="query-content">
         <section class="filters">
@@ -37,69 +42,77 @@
           </ion-card>
           <ion-card>
             <ion-item>
-              <ion-icon :icon="swapVerticalOutline"/>
+              <ion-icon slot="start" :icon="swapVerticalOutline"/>
               <ion-label>{{ "Sort" }}</ion-label>
               <ion-icon :icon="optionsOutline"/>
             </ion-item>
-            <ion-item>
-              <ion-label>{{ "Proximity" }}</ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-label>{{ "Order limit" }}</ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-label>{{ "Inventory balance" }}</ion-label>
-            </ion-item>
-            <ion-item>
-              <ion-label>{{ "Custom Sequence" }}</ion-label>
-            </ion-item>
+            <ion-reorder-group :disabled="false">
+              <ion-item>
+                <ion-label>{{ "Proximity" }}</ion-label>
+                <ion-reorder />
+              </ion-item>
+              <ion-item>
+                <ion-label>{{ "Order limit" }}</ion-label>
+                <ion-reorder />
+              </ion-item>
+              <ion-item>
+                <ion-label>{{ "Inventory balance" }}</ion-label>
+                <ion-reorder />
+              </ion-item>
+              <ion-item>
+                <ion-label>{{ "Custom Sequence" }}</ion-label>
+                <ion-reorder />
+              </ion-item>
+            </ion-reorder-group>
           </ion-card>
         </section>
-        <section class="actions">
+        <section>
           <h2 class="ion-padding-start">{{ "Actions" }}</h2>
-          <ion-card>
-            <ion-item lines="none">
-              <ion-label>{{ "Fully available" }}</ion-label>
-            </ion-item>
-            <ion-item lines="none">
-              <ion-chip>{{ "Next rule" }}</ion-chip>
-              <ion-chip>{{ "Move to queue" }}</ion-chip>
-              <ion-chip>
-                <ion-icon :icon="checkMarkOutline"/>
-                {{ "Auto cancel days: 10" }}
-              </ion-chip>
-            </ion-item>
-          </ion-card>
-          <ion-card>
-            <ion-item lines="none">
-              <ion-label>{{ "Partially available" }}</ion-label>
-            </ion-item>
-            <ion-item lines="none">
-              <ion-chip>
-                <ion-icon :icon="checkMarkOutline"/>
-                {{ "Allocate partial" }}
-              </ion-chip>
-              <ion-chip>{{ "Next rule" }}</ion-chip>
-              <ion-chip>{{ "Move to queue" }}</ion-chip>
-              <ion-chip>
-                <ion-icon :icon="checkMarkOutline"/>
-                {{ "Auto cancel days: 10" }}
-              </ion-chip>
-            </ion-item>
-          </ion-card>
-          <ion-card>
-            <ion-item lines="none">
-              <ion-label>{{ "Not available" }}</ion-label>
-            </ion-item>
-            <ion-item lines="none">
-              <ion-chip>{{ "Move to queue" }}</ion-chip>
-              <ion-chip>{{ "Next rule" }}</ion-chip>
-              <ion-chip>
-                <ion-icon :icon="checkMarkOutline"/>
-                {{ "Auto cancel days: 10" }}
-              </ion-chip>
-            </ion-item>
-          </ion-card>
+          <div class="actions">
+            <ion-card>
+              <ion-item lines="none">
+                <ion-label>{{ "Fully available" }}</ion-label>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-chip>{{ "Next rule" }}</ion-chip>
+                <ion-chip>{{ "Move to queue" }}</ion-chip>
+                <ion-chip>
+                  <ion-icon slot="start" :icon="checkmarkOutline" />
+                  {{ "Auto cancel days: 10" }}
+                </ion-chip>
+              </ion-item>
+            </ion-card>
+            <ion-card>
+              <ion-item lines="none">
+                <ion-label>{{ "Partially available" }}</ion-label>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-chip>
+                  <ion-icon :icon="checkmarkOutline" />
+                  <ion-label>{{ "Allocate partial" }}</ion-label>
+                </ion-chip>
+                <ion-chip>{{ "Next rule" }}</ion-chip>
+                <ion-chip>{{ "Move to queue" }}</ion-chip>
+                <ion-chip>
+                  <ion-icon :icon="checkmarkOutline" />
+                  <ion-label>{{ "Auto cancel days: 10" }}</ion-label>
+                </ion-chip>
+              </ion-item>
+            </ion-card>
+            <ion-card>
+              <ion-item lines="none">
+                <ion-label>{{ "Not available" }}</ion-label>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-chip>{{ "Move to queue" }}</ion-chip>
+                <ion-chip>{{ "Next rule" }}</ion-chip>
+                <ion-chip>
+                  <ion-icon :icon="checkmarkOutline"/>
+                  <ion-label>{{ "Auto cancel days: 10" }}</ion-label>
+                </ion-chip>
+              </ion-item>
+            </ion-card>
+          </div>
         </section>
       </ion-content>
     </ion-split-pane>
@@ -107,6 +120,13 @@
 </template>
 
 <script setup lang="ts">
-import { IonCard, IonChip, IonContent, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSelect, IonSelectOption, IonSplitPane } from "@ionic/vue";
-import { checkMarkOutline, filterOutline, optionsOutline, swapVerticalOutline } from "ionicons/icons"
+import { IonCard, IonChip, IonContent, IonIcon, IonItem, IonLabel, IonList, IonPage, IonReorder, IonReorderGroup, IonSelect, IonSelectOption, IonSplitPane } from "@ionic/vue";
+import { checkmarkOutline, filterOutline, optionsOutline, swapVerticalOutline } from "ionicons/icons"
 </script>
+
+<style scoped>
+.actions, .filters {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+}
+</style>