diff --git a/src/models/explorer.ts b/src/models/explorer.ts
index 2efeb280..45405b5c 100644
--- a/src/models/explorer.ts
+++ b/src/models/explorer.ts
@@ -28,7 +28,7 @@ export class InsightsExplorerBasicInfo implements InsightsExplorerInfoResponse {
     public name: string;
     public displayOrder: number;
     public hidden: boolean;
-    public data: Record<string, string | number | string[]> = {};
+    public data: Record<string, string | number | object[]> = {};
 
     private constructor(id: string, name: string, displayOrder: number, hidden: boolean) {
         this.id = id;
@@ -98,9 +98,9 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
         this.chartSortingType = chartSortingType;
     }
 
-    public get data(): Record<string, string | number | string[]> {
+    public get data(): Record<string, string | number | object[]> {
         return {
-            queries: this.queries.map(q => q.toJson()),
+            queries: this.queries.map(q => q.toJsonObject()),
             timezoneUsedForDateRange: this.timezoneUsedForDateRange,
             chartType: this.chartType,
             categoryDimension: this.categoryDimension,
@@ -139,10 +139,10 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
 
         if (data) {
             if (Array.isArray(data['queries'])) {
-                const textualQueries = data['queries'] as string[];
+                const queryItems = data['queries'] as object[];
 
-                for (const textualQuery of textualQueries) {
-                    const query = TransactionExplorerQuery.parse(textualQuery);
+                for (const queryItem of queryItems) {
+                    const query = TransactionExplorerQuery.parse(queryItem);
 
                     if (query) {
                         queries.push(query);
@@ -190,13 +190,13 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
         );
     }
 
-    public static createNewExplorer(name?: string): InsightsExplorer {
+    public static createNewExplorer(newQueryId: string): InsightsExplorer {
         return new InsightsExplorer(
             '',
-            name || '',
+            '',
             0,
             false,
-            [TransactionExplorerQuery.create()],
+            [TransactionExplorerQuery.create(newQueryId)],
             InsightsExplorer.Default.timezoneUsedForDateRange,
             InsightsExplorer.Default.chartType,
             InsightsExplorer.Default.categoryDimension,
@@ -209,14 +209,14 @@ export class InsightsExplorer implements InsightsExplorerInfoResponse {
 
 export interface InsightsExplorerCreateRequest {
     readonly name: string;
-    readonly data: Record<string, string | number | string[]>;
+    readonly data: Record<string, string | number | object[]>;
     readonly clientSessionId?: string;
 }
 
 export interface InsightsExplorerModifyRequest {
     readonly id: string;
     readonly name: string;
-    readonly data: Record<string, string | number | string[]>;
+    readonly data: Record<string, string | number | object[]>;
     readonly hidden: boolean;
     readonly clientSessionId?: string;
 }
@@ -244,7 +244,7 @@ export interface InsightsExplorerInfoResponse {
     readonly name: string;
     readonly displayOrder: number;
     readonly hidden: boolean;
-    readonly data: Record<string, string | number | string[]>;
+    readonly data: Record<string, string | number | object[]>;
 }
 
 interface ExpressionNode {
@@ -253,10 +253,12 @@ interface ExpressionNode {
 }
 
 export class TransactionExplorerQuery {
+    public id: string;
     public name: string;
     public conditions: TransactionExplorerConditionWithRelation[];
 
-    private constructor(name: string, conditions: TransactionExplorerConditionWithRelation[]) {
+    private constructor(id: string, name: string, conditions: TransactionExplorerConditionWithRelation[]) {
+        this.id = id;
         this.name = name;
         this.conditions = conditions;
     }
@@ -450,7 +452,7 @@ export class TransactionExplorerQuery {
         return finalTokens;
     }
 
-    public clone(): TransactionExplorerQuery {
+    public clone(newId: string): TransactionExplorerQuery {
         const clonedConditions: TransactionExplorerConditionWithRelation[] = [];
 
         for (const condition of this.conditions) {
@@ -463,29 +465,35 @@ export class TransactionExplorerQuery {
             clonedConditions.push(clonedCondition);
         }
 
-        return new TransactionExplorerQuery(this.name, clonedConditions);
+        return new TransactionExplorerQuery(newId, this.name, clonedConditions);
     }
 
-    public toJson(): string {
-        return JSON.stringify({
+    public toJsonObject(): object {
+        return {
+            id: this.id,
             name: this.name,
             conditions: this.conditions.map(condition => condition.toJsonObject())
-        });
+        };
     }
 
-    public static create(): TransactionExplorerQuery {
-        return new TransactionExplorerQuery("", []);
+    public static create(id: string): TransactionExplorerQuery {
+        return new TransactionExplorerQuery(id, "", []);
     }
 
-    public static parse(json: string): TransactionExplorerQuery | null {
-        const parsed = JSON.parse(json);
-        const nameFieldValue = parsed['name'] as unknown;
-        const conditionsFieldValue = parsed['conditions'] as unknown;
-
-        if (typeof nameFieldValue !== 'string' || !Array.isArray(conditionsFieldValue)) {
+    public static parse(obj: object): TransactionExplorerQuery | null {
+        if (!('id' in obj) || !('name' in obj) || !('conditions' in obj)) {
             return null;
         }
 
+        const idFieldValue = obj['id'] as unknown;
+        const nameFieldValue = obj['name'] as unknown;
+        const conditionsFieldValue = obj['conditions'] as unknown;
+
+        if (typeof idFieldValue !== 'string' || typeof nameFieldValue !== 'string' || !Array.isArray(conditionsFieldValue)) {
+            return null;
+        }
+
+        const id: string = idFieldValue;
         const name: string = nameFieldValue;
         const conditions: TransactionExplorerConditionWithRelation[] = [];
 
@@ -505,7 +513,7 @@ export class TransactionExplorerQuery {
             conditions.push(condition);
         }
 
-        return new TransactionExplorerQuery(name, conditions);
+        return new TransactionExplorerQuery(id, name, conditions);
     }
 }
 
diff --git a/src/stores/explorer.ts b/src/stores/explorer.ts
index 89ac54d7..9f54d1a1 100644
--- a/src/stores/explorer.ts
+++ b/src/stores/explorer.ts
@@ -48,6 +48,7 @@ import {
     getDateRangeByDateType,
     getFiscalYearFromUnixTime
 } from '@/lib/datetime.ts';
+import { generateRandomUUID } from '@/lib/misc.ts';
 import services, { type ApiResponsePromise } from '@/lib/services.ts';
 import logger from '@/lib/logger.ts';
 
@@ -473,7 +474,7 @@ export const useExplorersStore = defineStore('explorers', () => {
 
     const allInsightsExplorerBasicInfos = ref<InsightsExplorerBasicInfo[]>([]);
     const allInsightsExplorerBasicInfosMap = ref<Record<string, InsightsExplorerBasicInfo>>({});
-    const currentInsightsExplorer = ref<InsightsExplorer>(InsightsExplorer.createNewExplorer());
+    const currentInsightsExplorer = ref<InsightsExplorer>(InsightsExplorer.createNewExplorer(generateRandomUUID()));
     const insightsExplorerListStateInvalid = ref<boolean>(true);
 
     const allTransactions = computed<TransactionInsightDataItem[]>(() => {
@@ -743,7 +744,7 @@ export const useExplorersStore = defineStore('explorers', () => {
         transactionExplorerFilter.value.startTime = 0;
         transactionExplorerFilter.value.endTime = 0;
         transactionExplorerAllData.value = [];
-        currentInsightsExplorer.value = InsightsExplorer.createNewExplorer();
+        currentInsightsExplorer.value = InsightsExplorer.createNewExplorer(generateRandomUUID());
         transactionExplorerStateInvalid.value = true;
     }
 
@@ -784,7 +785,7 @@ export const useExplorersStore = defineStore('explorers', () => {
         }
 
         if (resetQuery) {
-            currentInsightsExplorer.value = InsightsExplorer.createNewExplorer();
+            currentInsightsExplorer.value = InsightsExplorer.createNewExplorer(generateRandomUUID());
         }
     }
 
diff --git a/src/views/desktop/insights/ExplorerPage.vue b/src/views/desktop/insights/ExplorerPage.vue
index 6f4c0c0e..dace0ffa 100644
--- a/src/views/desktop/insights/ExplorerPage.vue
+++ b/src/views/desktop/insights/ExplorerPage.vue
@@ -340,7 +340,7 @@ function init(initProps: InsightsExplorerProps): void {
             loadExplorer(initProps.initId);
         }
     } else {
-        explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer());
+        explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer(generateRandomUUID()));
     }
 
     if (!needReload && !explorersStore.transactionExplorerStateInvalid && !explorersStore.insightsExplorerListStateInvalid) {
@@ -394,7 +394,7 @@ function createNewExplorer(): void {
         return;
     }
 
-    explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer());
+    explorersStore.updateCurrentInsightsExplorer(InsightsExplorer.createNewExplorer(generateRandomUUID()));
     router.push(getFilterLinkUrl());
 }
 
diff --git a/src/views/desktop/insights/tabs/ExplorerQueryTab.vue b/src/views/desktop/insights/tabs/ExplorerQueryTab.vue
index 3f27c29f..0e9f6616 100644
--- a/src/views/desktop/insights/tabs/ExplorerQueryTab.vue
+++ b/src/views/desktop/insights/tabs/ExplorerQueryTab.vue
@@ -10,340 +10,345 @@
                    @click="clearAllQueries">{{ tt('Clear All') }}</v-btn>
         </div>
     </v-card-subtitle>
-    <v-card-text class="pt-0">
-        <div :key="queryIndex" v-for="(query, queryIndex) in queries">
-            <v-card border class="card-title-with-bg mt-4">
-                <v-card-title class="d-flex align-center py-2 px-5">
-                    <v-icon :icon="mdiTextBoxSearchOutline" size="20" />
-                    <span class="query-name text-subtitle-1 ms-2" v-if="editingQuery !== query">{{ query.name || tt('format.misc.queryIndex', { index: queryIndex + 1 }) }}</span>
-                    <div class="query-name-edit ms-2" v-if="editingQuery === query">
-                        <v-text-field autofocus type="text" density="compact" variant="underlined"
-                                      :disabled="loading || disabled"
-                                      :placeholder="tt('format.misc.queryIndex', { index: queryIndex + 1 })"
-                                      v-text-field-auto-width="{ minWidth: 20, maxWidth: 300, auxSpanId: `query-name-aux-span-${queryIndex + 1}` }"
-                                      v-model="editingQueryName"
-                                      @keyup.esc="cancelUpdateQueryName"
-                                      @keyup.enter="updateQueryName(query)" />
-                        <span :id="`query-name-aux-span-${queryIndex + 1}`" />
-                    </div>
-                    <v-btn class="ms-2" density="compact" color="primary" variant="text" size="small"
-                           :icon="true" :disabled="loading || disabled"
-                           @click="updateQueryName(query)"
-                           v-if="editingQuery === query">
-                        <v-icon :icon="mdiCheck" size="18" />
-                        <v-tooltip activator="parent">{{ tt('Update') }}</v-tooltip>
-                    </v-btn>
-                    <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
-                           :icon="true" :disabled="loading || disabled"
-                           @click="cancelUpdateQueryName"
-                           v-if="editingQuery === query">
-                        <v-icon :icon="mdiClose" size="18" />
-                        <v-tooltip activator="parent">{{ tt('Cancel') }}</v-tooltip>
-                    </v-btn>
-                    <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
-                           :icon="true" :disabled="loading || disabled || !!editingQuery"
-                           @click="editingQueryName = query.name; editingQuery = query"
-                           v-if="!editingQuery || editingQuery !== query">
-                        <v-icon :icon="mdiPencilOutline" size="18" />
-                        <v-tooltip activator="parent">{{ tt('Modify Query Name') }}</v-tooltip>
-                    </v-btn>
-                    <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
-                           :icon="true" :disabled="loading || disabled || !!editingQuery"
-                           @click="duplicateQuery(query)"
-                           v-if="!editingQuery || editingQuery !== query">
-                        <v-icon :icon="mdiContentCopy" size="18" />
-                        <v-tooltip activator="parent">{{ tt('Duplicate') }}</v-tooltip>
-                    </v-btn>
-                    <v-spacer />
-                    <v-switch class="bidirectional-switch ms-2" color="secondary"
-                              :disabled="loading || disabled || !!editingQuery || !query.conditions || query.conditions.length < 1"
-                              :label="tt('Expression')"
-                              v-model="showExpression[queryIndex]"
-                              @click="showExpression[queryIndex] = !showExpression[queryIndex]">
-                        <template #prepend>
-                            <span>{{ tt('Editor') }}</span>
-                        </template>
-                    </v-switch>
-                    <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
-                           :icon="true" :disabled="loading || disabled || !!editingQuery || queries.length < 1"
-                           @click="removeQuery(queryIndex)">
-                        <v-icon :icon="mdiClose" size="18" />
-                        <v-tooltip activator="parent">{{ tt('Remove Query') }}</v-tooltip>
-                    </v-btn>
-                </v-card-title>
+    <v-card-text class="pt-0 pb-0">
+        <draggable-list
+            item-key="id"
+            handle=".drag-handle"
+            ghost-class="dragging-item"
+            v-model="queries"
+        >
+            <template #item="{ element, index }">
+                <v-card border class="card-title-with-bg mt-4 mb-8">
+                    <v-card-title class="d-flex align-center py-2 px-5">
+                        <v-icon :icon="mdiTextBoxSearchOutline" size="20" />
+                        <span class="query-name text-subtitle-1 ms-2" v-if="editingQuery !== element">{{ element.name || tt('format.misc.queryIndex', { index: index + 1 }) }}</span>
+                        <div class="query-name-edit ms-2" v-if="editingQuery === element">
+                            <v-text-field autofocus type="text" density="compact" variant="underlined"
+                                          :disabled="loading || disabled"
+                                          :placeholder="tt('format.misc.queryIndex', { index: index + 1 })"
+                                          v-text-field-auto-width="{ minWidth: 20, maxWidth: 300, auxSpanId: `query-name-aux-span-${index + 1}-${element.id}` }"
+                                          v-model="editingQueryName"
+                                          @keyup.esc="cancelUpdateQueryName"
+                                          @keyup.enter="updateQueryName(element)" />
+                            <span :id="`query-name-aux-span-${index + 1}-${element.id}`" />
+                        </div>
+                        <v-btn class="ms-2" density="compact" color="primary" variant="text" size="small"
+                               :icon="true" :disabled="loading || disabled"
+                               @click="updateQueryName(element)"
+                               v-if="editingQuery === element">
+                            <v-icon :icon="mdiCheck" size="18" />
+                            <v-tooltip activator="parent">{{ tt('Update') }}</v-tooltip>
+                        </v-btn>
+                        <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
+                               :icon="true" :disabled="loading || disabled"
+                               @click="cancelUpdateQueryName"
+                               v-if="editingQuery === element">
+                            <v-icon :icon="mdiClose" size="18" />
+                            <v-tooltip activator="parent">{{ tt('Cancel') }}</v-tooltip>
+                        </v-btn>
+                        <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
+                               :icon="true" :disabled="loading || disabled || !!editingQuery"
+                               @click="editingQueryName = element.name; editingQuery = element"
+                               v-if="!editingQuery || editingQuery !== element">
+                            <v-icon :icon="mdiPencilOutline" size="18" />
+                            <v-tooltip activator="parent">{{ tt('Modify Query Name') }}</v-tooltip>
+                        </v-btn>
+                        <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
+                               :icon="true" :disabled="loading || disabled || !!editingQuery"
+                               @click="duplicateQuery(element)"
+                               v-if="!editingQuery || editingQuery !== element">
+                            <v-icon :icon="mdiContentCopy" size="18" />
+                            <v-tooltip activator="parent">{{ tt('Duplicate') }}</v-tooltip>
+                        </v-btn>
+                        <v-spacer />
+                        <v-switch class="bidirectional-switch ms-2" color="secondary"
+                                  :disabled="loading || disabled || !!editingQuery || !element.conditions || element.conditions.length < 1"
+                                  :label="tt('Expression')"
+                                  v-model="showExpression[element.id]"
+                                  @click="showExpression[element.id] = !showExpression[element.id]">
+                            <template #prepend>
+                                <span>{{ tt('Editor') }}</span>
+                            </template>
+                        </v-switch>
+                        <v-btn class="ms-2" density="compact" color="default" variant="text" size="small"
+                               :icon="true" :disabled="loading || disabled || !!editingQuery || queries.length < 1 || (queries.length === 1 && (!element.conditions || element.conditions.length < 1))"
+                               @click="removeQuery(index)">
+                            <v-icon :icon="mdiClose" size="18" />
+                            <v-tooltip activator="parent">{{ tt('Remove Query') }}</v-tooltip>
+                        </v-btn>
+                        <span class="ms-2 mb-1">
+                            <v-icon :class="!loading && !disabled && !editingQuery && queries.length > 1 ? 'drag-handle' : 'disabled'"
+                                    :icon="mdiDrag"/>
+                            <v-tooltip activator="parent" v-if="!loading && !disabled && !editingQuery && queries.length > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
+                        </span>
+                    </v-card-title>
 
-                <v-divider />
+                    <v-divider />
 
-                <v-card-text>
-                    <v-row>
-                        <v-col cols="12">
-                            <div class="text-center py-4" v-if="!query.conditions || query.conditions.length < 1">
-                                {{ tt('No conditions defined. All transactions will match.') }}
-                            </div>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12">
+                                <div class="text-center py-4" v-if="!element.conditions || element.conditions.length < 1">
+                                    {{ tt('No conditions defined. All transactions will match.') }}
+                                </div>
 
-                            <div v-else-if="query.conditions && query.conditions.length > 0 && !showExpression[queryIndex]">
-                                <div :key="conditionIndex" v-for="(conditionWithRelation, conditionIndex) in query.conditions">
-                                    <div class="d-flex overflow-x-auto align-center gap-2 mb-4">
-                                        <v-select
-                                            disabled
-                                            class="flex-0-0"
-                                            width="120px"
-                                            density="compact"
-                                            item-title="displayName"
-                                            item-value="value"
-                                            :items="[{ value: TransactionExplorerConditionRelation.First, displayName: tt('WHERE') }]"
-                                            :model-value="TransactionExplorerConditionRelation.First"
-                                            v-if="conditionIndex < 1"
-                                        />
-
-                                        <v-select
-                                            class="flex-0-0"
-                                            width="120px"
-                                            density="compact"
-                                            item-title="displayName"
-                                            item-value="value"
-                                            :disabled="loading || disabled || !!editingQuery"
-                                            :items="[
-                                                { value: TransactionExplorerConditionRelation.And, displayName: tt('AND') },
-                                                { value: TransactionExplorerConditionRelation.Or, displayName: tt('OR') }
-                                            ]"
-                                            v-model="conditionWithRelation.relation"
-                                            v-else-if="conditionIndex >= 1"
-                                        />
-
-                                        <v-select
-                                            class="flex-0-0"
-                                            density="compact"
-                                            item-title="name"
-                                            item-value="value"
-                                            :disabled="loading || disabled || !!editingQuery"
-                                            :items="allTransactionExplorerConditionFields"
-                                            @update:model-value="updateConditionField(queryIndex, conditionIndex, TransactionExplorerConditionField.valueOf($event))"
-                                            v-model="conditionWithRelation.condition.field"
-                                        />
-
-                                        <v-select
-                                            class="flex-0-0"
-                                            density="compact"
-                                            item-title="name"
-                                            item-value="value"
-                                            :disabled="loading || disabled || !!editingQuery"
-                                            :items="getAllTransactionExplorerConditionOperators(conditionWithRelation.getSupportedOperators())"
-                                            v-model="conditionWithRelation.condition.operator"
-                                        />
-
-                                        <div class="d-flex w-100 flex-1-1" style="min-width: 280px;">
+                                <div v-else-if="element.conditions && element.conditions.length > 0 && !showExpression[element.id]">
+                                    <div :key="conditionIndex" v-for="(conditionWithRelation, conditionIndex) in element.conditions">
+                                        <div class="d-flex overflow-x-auto align-center gap-2 mb-4">
                                             <v-select
-                                                multiple chips closable-chips
+                                                disabled
+                                                class="flex-0-0"
+                                                width="120px"
                                                 density="compact"
                                                 item-title="displayName"
-                                                item-value="type"
+                                                item-value="value"
+                                                :items="[{ value: TransactionExplorerConditionRelation.First, displayName: tt('WHERE') }]"
+                                                :model-value="TransactionExplorerConditionRelation.First"
+                                                v-if="conditionIndex < 1"
+                                            />
+
+                                            <v-select
+                                                class="flex-0-0"
+                                                width="120px"
+                                                density="compact"
+                                                item-title="displayName"
+                                                item-value="value"
                                                 :disabled="loading || disabled || !!editingQuery"
-                                                :placeholder="tt('None')"
                                                 :items="[
-                                                    { type: TransactionType.Expense, displayName: tt('Expense') },
-                                                    { type: TransactionType.Income, displayName: tt('Income') },
-                                                    { type: TransactionType.Transfer, displayName: tt('Transfer') }
+                                                    { value: TransactionExplorerConditionRelation.And, displayName: tt('AND') },
+                                                    { value: TransactionExplorerConditionRelation.Or, displayName: tt('OR') }
                                                 ]"
-                                                v-model="conditionWithRelation.condition.value"
-                                                v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionType.value"
-                                            >
-                                                <template #item="{ props, item }">
-                                                    <v-list-item :value="item.value" v-bind="props">
-                                                        <template #title>
-                                                            <v-list-item-title>
-                                                                <div class="d-flex align-center">{{ item.title }}</div>
-                                                            </v-list-item-title>
-                                                        </template>
-                                                    </v-list-item>
-                                                </template>
-                                            </v-select>
+                                                v-model="conditionWithRelation.relation"
+                                                v-else-if="conditionIndex >= 1"
+                                            />
 
-                                            <v-text-field
-                                                class="always-cursor-pointer text-field-truncate"
+                                            <v-select
+                                                class="flex-0-0"
                                                 density="compact"
-                                                item-title="displayName"
-                                                item-value="type"
-                                                persistent-placeholder
-                                                :readonly="true"
-                                                :disabled="loading || disabled || !!editingQuery || !hasAnyTransactionCategory"
-                                                :placeholder="tt('None')"
-                                                :model-value="getFilteredTransactionCategoriesDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
-                                                @click="currentCondition = conditionWithRelation.condition; showFilterTransactionCategoriesDialog = true"
-                                                v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionCategory.value"
+                                                item-title="name"
+                                                item-value="value"
+                                                :disabled="loading || disabled || !!editingQuery"
+                                                :items="allTransactionExplorerConditionFields"
+                                                @update:model-value="updateConditionField(element, conditionIndex, TransactionExplorerConditionField.valueOf($event))"
+                                                v-model="conditionWithRelation.condition.field"
                                             />
 
-                                            <v-text-field
-                                                class="always-cursor-pointer text-field-truncate"
+                                            <v-select
+                                                class="flex-0-0"
                                                 density="compact"
-                                                item-title="displayName"
-                                                item-value="type"
-                                                persistent-placeholder
-                                                :readonly="true"
-                                                :disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
-                                                :placeholder="tt('None')"
-                                                :model-value="getFilteredAccountsDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
-                                                @click="currentCondition = conditionWithRelation.condition; showFilterSourceAccountsDialog = true"
-                                                v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.SourceAccount.value"
+                                                item-title="name"
+                                                item-value="value"
+                                                :disabled="loading || disabled || !!editingQuery"
+                                                :items="getAllTransactionExplorerConditionOperators(conditionWithRelation.getSupportedOperators())"
+                                                v-model="conditionWithRelation.condition.operator"
                                             />
 
-                                            <v-text-field
-                                                class="always-cursor-pointer text-field-truncate"
-                                                density="compact"
-                                                item-title="displayName"
-                                                item-value="type"
-                                                persistent-placeholder
-                                                :readonly="true"
-                                                :disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
-                                                :placeholder="tt('None')"
-                                                :model-value="getFilteredAccountsDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
-                                                @click="currentCondition = conditionWithRelation.condition; showFilterDestinationAccountsDialog = true"
-                                                v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAccount.value"
-                                            />
-
-                                            <div class="d-flex w-100 align-center gap-2"
-                                                 v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.SourceAmount.value ||
-                                                            conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAmount.value">
-                                                <amount-input density="compact"
-                                                              :currency="defaultCurrency"
-                                                              :disabled="loading || disabled || !!editingQuery"
-                                                              v-model="conditionWithRelation.condition.value[0]"
-                                                />
-                                                <span class="ms-2 me-2"
-                                                      v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
-                                                            conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value">~</span>
-                                                <amount-input density="compact"
-                                                              :currency="defaultCurrency"
-                                                              :disabled="loading || disabled || !!editingQuery"
-                                                              v-model="conditionWithRelation.condition.value[1]"
-                                                              v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
-                                                                    conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value"
-                                                />
-                                            </div>
-
-                                            <v-text-field disabled density="compact"
-                                                          :placeholder="tt('None')"
-                                                          v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.GeoLocation.value"
-                                            />
-
-                                            <div class="d-flex w-100" v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionTag.value">
-                                                <v-text-field
-                                                    disabled
-                                                    persistent-placeholder
+                                            <div class="d-flex w-100 flex-1-1" style="min-width: 280px;">
+                                                <v-select
+                                                    multiple chips closable-chips
                                                     density="compact"
-                                                    :placeholder="tt('None')"
-                                                    v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionTag.value &&
-                                                         (conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsNotEmpty.value)"
-                                                />
-
-                                                <v-autocomplete
-                                                    density="compact"
-                                                    item-title="name"
-                                                    item-value="id"
-                                                    auto-select-first
-                                                    persistent-placeholder
-                                                    multiple
-                                                    chips
-                                                    closable-chips
+                                                    item-title="displayName"
+                                                    item-value="type"
                                                     :disabled="loading || disabled || !!editingQuery"
                                                     :placeholder="tt('None')"
-                                                    :items="allTags"
+                                                    :items="[
+                                                        { type: TransactionType.Expense, displayName: tt('Expense') },
+                                                        { type: TransactionType.Income, displayName: tt('Income') },
+                                                        { type: TransactionType.Transfer, displayName: tt('Transfer') }
+                                                    ]"
                                                     v-model="conditionWithRelation.condition.value"
-                                                    v-model:search="tagSearchContent"
-                                                    v-else-if="conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
+                                                    v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionType.value"
                                                 >
-                                                    <template #chip="{ props, item }">
-                                                        <v-chip :prepend-icon="mdiPound" :text="item.title" v-bind="props"/>
-                                                    </template>
-
                                                     <template #item="{ props, item }">
-                                                        <v-list-item :value="item.value" v-bind="props" v-if="!item.raw.hidden">
+                                                        <v-list-item :value="item.value" v-bind="props">
                                                             <template #title>
                                                                 <v-list-item-title>
-                                                                    <div class="d-flex align-center">
-                                                                        <v-icon size="20" start :icon="mdiPound"/>
-                                                                        <span>{{ item.title }}</span>
-                                                                    </div>
-                                                                </v-list-item-title>
-                                                            </template>
-                                                        </v-list-item>
-                                                        <v-list-item :disabled="true" v-bind="props"
-                                                                     v-if="item.raw.hidden && item.raw.name.toLowerCase().indexOf(tagSearchContent.toLowerCase()) >= 0 && isAllFilteredTagHidden">
-                                                            <template #title>
-                                                                <v-list-item-title>
-                                                                    <div class="d-flex align-center">
-                                                                        <v-icon size="20" start :icon="mdiPound"/>
-                                                                        <span>{{ item.title }}</span>
-                                                                    </div>
+                                                                    <div class="d-flex align-center">{{ item.title }}</div>
                                                                 </v-list-item-title>
                                                             </template>
                                                         </v-list-item>
                                                     </template>
+                                                </v-select>
 
-                                                    <template #no-data>
-                                                        <v-list class="py-0">
-                                                            <v-list-item>{{ tt('No available tag') }}</v-list-item>
-                                                        </v-list>
-                                                    </template>
-                                                </v-autocomplete>
+                                                <v-text-field
+                                                    class="always-cursor-pointer text-field-truncate"
+                                                    density="compact"
+                                                    item-title="displayName"
+                                                    item-value="type"
+                                                    persistent-placeholder
+                                                    :readonly="true"
+                                                    :disabled="loading || disabled || !!editingQuery || !hasAnyTransactionCategory"
+                                                    :placeholder="tt('None')"
+                                                    :model-value="getFilteredTransactionCategoriesDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
+                                                    @click="currentCondition = conditionWithRelation.condition; showFilterTransactionCategoriesDialog = true"
+                                                    v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionCategory.value"
+                                                />
+
+                                                <v-text-field
+                                                    class="always-cursor-pointer text-field-truncate"
+                                                    density="compact"
+                                                    item-title="displayName"
+                                                    item-value="type"
+                                                    persistent-placeholder
+                                                    :readonly="true"
+                                                    :disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
+                                                    :placeholder="tt('None')"
+                                                    :model-value="getFilteredAccountsDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
+                                                    @click="currentCondition = conditionWithRelation.condition; showFilterSourceAccountsDialog = true"
+                                                    v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.SourceAccount.value"
+                                                />
+
+                                                <v-text-field
+                                                    class="always-cursor-pointer text-field-truncate"
+                                                    density="compact"
+                                                    item-title="displayName"
+                                                    item-value="type"
+                                                    persistent-placeholder
+                                                    :readonly="true"
+                                                    :disabled="loading || disabled || !!editingQuery || !hasAnyAccount"
+                                                    :placeholder="tt('None')"
+                                                    :model-value="getFilteredAccountsDisplayContent(arrayItemToObjectField(conditionWithRelation.condition.value as string[], true))"
+                                                    @click="currentCondition = conditionWithRelation.condition; showFilterDestinationAccountsDialog = true"
+                                                    v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAccount.value"
+                                                />
+
+                                                <div class="d-flex w-100 align-center gap-2"
+                                                     v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.SourceAmount.value ||
+                                                                conditionWithRelation.condition.field === TransactionExplorerConditionField.DestinationAmount.value">
+                                                    <amount-input density="compact"
+                                                                  :currency="defaultCurrency"
+                                                                  :disabled="loading || disabled || !!editingQuery"
+                                                                  v-model="conditionWithRelation.condition.value[0]"
+                                                    />
+                                                    <span class="ms-2 me-2"
+                                                          v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
+                                                                conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value">~</span>
+                                                    <amount-input density="compact"
+                                                                  :currency="defaultCurrency"
+                                                                  :disabled="loading || disabled || !!editingQuery"
+                                                                  v-model="conditionWithRelation.condition.value[1]"
+                                                                  v-if="conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.Between.value ||
+                                                                        conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.NotBetween.value"
+                                                    />
+                                                </div>
+
+                                                <v-text-field disabled density="compact"
+                                                              :placeholder="tt('None')"
+                                                              v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.GeoLocation.value"
+                                                />
+
+                                                <div class="d-flex w-100" v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionTag.value">
+                                                    <v-text-field
+                                                        disabled
+                                                        persistent-placeholder
+                                                        density="compact"
+                                                        :placeholder="tt('None')"
+                                                        v-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.TransactionTag.value &&
+                                                             (conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsNotEmpty.value)"
+                                                    />
+
+                                                    <v-autocomplete
+                                                        density="compact"
+                                                        item-title="name"
+                                                        item-value="id"
+                                                        auto-select-first
+                                                        persistent-placeholder
+                                                        multiple
+                                                        chips
+                                                        closable-chips
+                                                        :disabled="loading || disabled || !!editingQuery"
+                                                        :placeholder="tt('None')"
+                                                        :items="allTags"
+                                                        v-model="conditionWithRelation.condition.value"
+                                                        v-model:search="tagSearchContent"
+                                                        v-else-if="conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
+                                                    >
+                                                        <template #chip="{ props, item }">
+                                                            <v-chip :prepend-icon="mdiPound" :text="item.title" v-bind="props"/>
+                                                        </template>
+
+                                                        <template #item="{ props, item }">
+                                                            <v-list-item :value="item.value" v-bind="props" v-if="!item.raw.hidden">
+                                                                <template #title>
+                                                                    <v-list-item-title>
+                                                                        <div class="d-flex align-center">
+                                                                            <v-icon size="20" start :icon="mdiPound"/>
+                                                                            <span>{{ item.title }}</span>
+                                                                        </div>
+                                                                    </v-list-item-title>
+                                                                </template>
+                                                            </v-list-item>
+                                                            <v-list-item :disabled="true" v-bind="props"
+                                                                         v-if="item.raw.hidden && item.raw.name.toLowerCase().indexOf(tagSearchContent.toLowerCase()) >= 0 && isAllFilteredTagHidden">
+                                                                <template #title>
+                                                                    <v-list-item-title>
+                                                                        <div class="d-flex align-center">
+                                                                            <v-icon size="20" start :icon="mdiPound"/>
+                                                                            <span>{{ item.title }}</span>
+                                                                        </div>
+                                                                    </v-list-item-title>
+                                                                </template>
+                                                            </v-list-item>
+                                                        </template>
+
+                                                        <template #no-data>
+                                                            <v-list class="py-0">
+                                                                <v-list-item>{{ tt('No available tag') }}</v-list-item>
+                                                            </v-list>
+                                                        </template>
+                                                    </v-autocomplete>
+                                                </div>
+
+                                                <v-text-field disabled density="compact"
+                                                              :placeholder="tt('None')"
+                                                              v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Pictures.value"
+                                                />
+
+                                                <v-text-field disabled density="compact"
+                                                              :placeholder="tt('None')"
+                                                              v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
+                                                                         conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsNotEmpty.value"
+                                                />
+
+                                                <v-text-field density="compact"
+                                                              :disabled="loading || disabled || !!editingQuery"
+                                                              :placeholder="tt('None')"
+                                                              v-model="conditionWithRelation.condition.value"
+                                                              v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
+                                                                         conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
+                                                />
                                             </div>
 
-                                            <v-text-field disabled density="compact"
-                                                          :placeholder="tt('None')"
-                                                          v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Pictures.value"
-                                            />
-
-                                            <v-text-field disabled density="compact"
-                                                          :placeholder="tt('None')"
-                                                          v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
-                                                                     conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsEmpty.value || conditionWithRelation.condition.operator === TransactionExplorerConditionOperator.IsNotEmpty.value"
-                                            />
-
-                                            <v-text-field density="compact"
-                                                          :disabled="loading || disabled || !!editingQuery"
-                                                          :placeholder="tt('None')"
-                                                          v-model="conditionWithRelation.condition.value"
-                                                          v-else-if="conditionWithRelation.condition.field === TransactionExplorerConditionField.Description.value &&
-                                                                     conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsEmpty.value && conditionWithRelation.condition.operator !== TransactionExplorerConditionOperator.IsNotEmpty.value"
-                                            />
+                                            <v-btn color="default" density="compact"
+                                                   variant="text" size="small"
+                                                   :icon="true"
+                                                   :disabled="loading || disabled || !!editingQuery"
+                                                   @click="removeCondition(element, conditionIndex)">
+                                                <v-icon :icon="mdiClose" size="18" />
+                                                <v-tooltip activator="parent">{{ tt('Remove Condition') }}</v-tooltip>
+                                            </v-btn>
                                         </div>
-
-                                        <v-btn color="default" density="compact"
-                                               variant="text" size="small"
-                                               :icon="true"
-                                               :disabled="loading || disabled || !!editingQuery"
-                                               @click="removeCondition(queryIndex, conditionIndex)">
-                                            <v-icon :icon="mdiClose" size="18" />
-                                            <v-tooltip activator="parent">{{ tt('Remove Condition') }}</v-tooltip>
-                                        </v-btn>
                                     </div>
                                 </div>
-                            </div>
-                            <div v-else-if="query.conditions && query.conditions.length > 0 && showExpression[queryIndex]">
-                                <div class="w-100 code-container">
-                                    <v-textarea class="w-100 always-cursor-text mb-4" :readonly="true"
-                                                :value="getExpression(queryIndex)"></v-textarea>
+                                <div v-else-if="element.conditions && element.conditions.length > 0 && showExpression[element.id]">
+                                    <div class="w-100 code-container">
+                                        <v-textarea class="w-100 always-cursor-text mb-4" :readonly="true"
+                                                    :value="getExpression(element, index)"></v-textarea>
+                                    </div>
                                 </div>
-                            </div>
 
-                            <v-btn class="px-2" density="comfortable" color="primary" variant="text" size="small"
-                                   :prepend-icon="mdiPlus"
-                                   :disabled="loading || disabled || !!editingQuery || showExpression[queryIndex]"
-                                   @click="addCondition(queryIndex)">
-                                {{ tt('Add Condition') }}
-                            </v-btn>
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-            </v-card>
-
-            <div class="query-group-separator d-flex align-center justify-center my-4"
-                 v-if="queries.length > 1 && queryIndex < queries.length - 1">
-                <v-chip color="primary" variant="outlined" size="small">
-                    {{ tt('or') }}
-                </v-chip>
-            </div>
-        </div>
+                                <v-btn class="px-2" density="comfortable" color="primary" variant="text" size="small"
+                                       :prepend-icon="mdiPlus"
+                                       :disabled="loading || disabled || !!editingQuery || showExpression[element.id]"
+                                       @click="addCondition(element)">
+                                    {{ tt('Add Condition') }}
+                                </v-btn>
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-card>
+            </template>
+        </draggable-list>
     </v-card-text>
 
     <v-dialog width="800" v-model="showFilterSourceAccountsDialog">
@@ -407,6 +412,8 @@ import {
     arrayItemToObjectField
 } from '@/lib/common.ts';
 
+import { generateRandomUUID } from '@/lib/misc.ts';
+
 import logger from '@/lib/logger.ts';
 
 import {
@@ -416,6 +423,7 @@ import {
     mdiContentCopy,
     mdiCheck,
     mdiClose,
+    mdiDrag,
     mdiPound
 } from '@mdi/js';
 
@@ -444,7 +452,7 @@ const explorersStore = useExplorersStore();
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const currentCondition = ref<TransactionExplorerCondition | undefined>(undefined);
-const showExpression = ref<Record<number, boolean>>({});
+const showExpression = ref<Record<string, boolean>>({});
 const showFilterSourceAccountsDialog = ref<boolean>(false);
 const showFilterDestinationAccountsDialog = ref<boolean>(false);
 const showFilterTransactionCategoriesDialog = ref<boolean>(false);
@@ -452,7 +460,12 @@ const tagSearchContent = ref<string>('');
 const editingQuery = ref<TransactionExplorerQuery | undefined>(undefined);
 const editingQueryName = ref<string>('');
 
-const queries = computed<TransactionExplorerQuery[]>(() => explorersStore.currentInsightsExplorer.queries);
+const queries = computed<TransactionExplorerQuery[]>({
+    get: () => explorersStore.currentInsightsExplorer.queries,
+    set: (value: TransactionExplorerQuery[]) => {
+        explorersStore.currentInsightsExplorer.queries = value;
+    }
+});
 
 const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
 const hasAnyAccount = computed<boolean>(() => accountsStore.allPlainAccounts.length > 0);
@@ -545,7 +558,7 @@ function getFilteredTransactionCategoriesDisplayContent(filterTransactionCategor
 }
 
 function addQuery(): void {
-    queries.value.push(TransactionExplorerQuery.create());
+    queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
 }
 
 function updateQueryName(query: TransactionExplorerQuery): void {
@@ -560,7 +573,7 @@ function cancelUpdateQueryName(): void {
 }
 
 function duplicateQuery(query: TransactionExplorerQuery): void {
-    queries.value.push(query.clone());
+    queries.value.push(query.clone(generateRandomUUID()));
 }
 
 function removeQuery(queryIndex: number): void {
@@ -583,33 +596,21 @@ function removeQuery(queryIndex: number): void {
     showExpression.value = newShowExpression;
 
     if (queries.value.length < 1) {
-        queries.value.push(TransactionExplorerQuery.create());
+        queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
     }
 }
 
 function clearAllQueries(): void {
     queries.value.length = 0;
-    queries.value.push(TransactionExplorerQuery.create());
+    queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
 }
 
-function addCondition(queryIndex: number): void {
-    const query = queries.value[queryIndex];
-
-    if (!query) {
-        return;
-    }
-
+function addCondition(query: TransactionExplorerQuery): void {
     const newCondition = query.addNewCondition(TransactionExplorerConditionField.TransactionType, query.conditions.length < 1);
     query.conditions.push(newCondition);
 }
 
-function removeCondition(queryIndex: number, conditionIndex: number): void {
-    const query = queries.value[queryIndex];
-
-    if (!query) {
-        return;
-    }
-
+function removeCondition(query: TransactionExplorerQuery, conditionIndex: number): void {
     query.conditions.splice(conditionIndex, 1);
 
     if (conditionIndex === 0 && query.conditions.length > 0) {
@@ -621,17 +622,11 @@ function removeCondition(queryIndex: number, conditionIndex: number): void {
     }
 }
 
-function updateConditionField(queryIndex: number, conditionIndex: number, newField: TransactionExplorerConditionField | undefined): void {
+function updateConditionField(query: TransactionExplorerQuery, conditionIndex: number, newField: TransactionExplorerConditionField | undefined): void {
     if (!newField) {
         return;
     }
 
-    const query = queries.value[queryIndex];
-
-    if (!query) {
-        return;
-    }
-
     const oldConditionWithRelation = query.conditions[conditionIndex];
 
     if (!oldConditionWithRelation) {
@@ -675,10 +670,8 @@ function updateTransactionCategories(changed: boolean, selectedCategoryIds?: str
     showFilterTransactionCategoriesDialog.value = false;
 }
 
-function getExpression(queryIndex: number): string {
-    const query = queries.value[queryIndex];
-
-    if (!query || !query.conditions || query.conditions.length < 1) {
+function getExpression(query: TransactionExplorerQuery, queryIndex: number): string {
+    if (!query.conditions || query.conditions.length < 1) {
         return '';
     }
 
@@ -692,7 +685,7 @@ function getExpression(queryIndex: number): string {
 }
 
 if (queries.value.length === 0) {
-    queries.value.push(TransactionExplorerQuery.create());
+    queries.value.push(TransactionExplorerQuery.create(generateRandomUUID()));
 }
 </script>