diff --git a/app/components/AsyncCell.vue b/app/components/AsyncCell.vue
index 6e8bf346..6a4e78f1 100644
--- a/app/components/AsyncCell.vue
+++ b/app/components/AsyncCell.vue
@@ -1,13 +1,19 @@
 <template>
-	<Skeleton v-if="loading" class="flex max-w-40 self-center"/>
+	<Skeleton v-if="loading" class="flex self-center" :class="sizeClass"/>
 	<slot v-else/>
 </template>
 
 <script setup lang="ts">
-	defineProps({
+	const props = defineProps({
 		loading: {
 			type: Boolean,
 			required: true,
 		},
+		size: {
+			type: String,
+			default: 'normal',
+		},
 	});
+
+	const sizeClass = computed(() => props.size === 'small' ? 'max-w-20' : 'max-w-40');
 </script>
diff --git a/app/components/CreditsChart.vue b/app/components/credits/CreditsChart.vue
similarity index 100%
rename from app/components/CreditsChart.vue
rename to app/components/credits/CreditsChart.vue
diff --git a/app/components/credits/CreditsFilters.vue b/app/components/credits/CreditsFilters.vue
new file mode 100644
index 00000000..857b32a3
--- /dev/null
+++ b/app/components/credits/CreditsFilters.vue
@@ -0,0 +1,136 @@
+<template>
+	<div class="flex items-center justify-end gap-4">
+		Type:
+		<TreeSelect
+			v-model="selectedValues"
+			:options="nodes"
+			selection-mode="checkbox"
+			class="w-32 font-normal md:w-56"
+			:expanded-keys="expandedKeys"
+			:pt="{
+				pcTree: {
+					root: 'p-0',
+					nodeToggleButton: 'hidden',
+					node: 'focus:outline-none',
+				}
+			}"
+			@change="onChangeDebounced"
+			@hide="onHide"
+		>
+			<template #value="slotProps">
+				{{ renderTreeSelectValue(slotProps.value, nodes) }}
+			</template>
+			<template #option="slotProps">
+				<span :class="{'font-medium': slotProps.node.data.field === 'type'}">{{slotProps.node.label}}</span>
+			</template>
+		</TreeSelect>
+	</div>
+</template>
+
+<script setup>
+	import debounce from 'lodash/debounce';
+	import isEqual from 'lodash/isEqual';
+	import { FIELD_LABELS, TYPE_REASONS, useCreditsFilters } from '~/composables/useCreditsFilters';
+	import { buildNodesByKey, renderTreeSelectValue } from '~/utils/tree-select.ts';
+
+	const { filter, onParamChange, key: creditsFilterKey } = useCreditsFilters();
+
+	// TREE SELECT STRUCTURE DEFINITIONS
+
+	// e.g., 0-0 -> { field: 'reason', value: 'adopted-probes' }
+	const keyValueMap = Object.entries(TYPE_REASONS).reduce((map, [ key, reasons ], index) => {
+		map[index] = { field: 'type', value: key };
+
+		reasons.forEach((reason, reasonIndex) => {
+			map[`${index}-${reasonIndex}`] = { field: 'reason', value: reason };
+		});
+
+		return map;
+	}, {});
+
+	const getNodeLabelForKey = (key) => {
+		const { field, value } = keyValueMap[key];
+		return FIELD_LABELS[field][value];
+	};
+
+	const nodes = ref(buildNodesByKey(keyValueMap, getNodeLabelForKey));
+
+	// expand all nodes that have children
+	const expandedKeys = computed(() => nodes.value.reduce((expanded, node) => {
+		if (node.children?.length) {
+			expanded[node.key] = true;
+		}
+
+		return expanded;
+	}, {}));
+
+	const selectedValues = ref({});
+	const selectedCount = computed(() => Object.values(selectedValues.value).filter(value => value.checked).length);
+
+	// FILTER APPLICATION
+
+	const applyFilter = () => {
+		// apply selected values from the filter
+		const buildSelection = (node, filter, selectedValues) => {
+			if (node.children?.length) {
+				node.children.forEach((child) => {
+					buildSelection(child, filter, selectedValues);
+				});
+
+				const checkedChildren = node.children.filter(child => selectedValues[child.key].checked);
+
+				selectedValues[node.key] = {
+					checked: checkedChildren.length === node.children.length,
+					partialChecked: checkedChildren.length !== node.children.length && checkedChildren.length > 0,
+				};
+			} else {
+				selectedValues[node.key] = {
+					checked: filter[node.data.field].includes(node.data.value),
+				};
+			}
+
+			return selectedValues;
+		};
+
+		selectedValues.value = nodes.value.reduce((selected, node) => buildSelection(node, filter.value, selected), {});
+	};
+
+	watch(creditsFilterKey, applyFilter, { immediate: true });
+
+	// HANDLERS
+
+	const onChange = () => {
+		if (selectedCount.value === 0) {
+			return;
+		}
+
+		const suggestedFilter = Object.entries(selectedValues.value).reduce((selected, [ key, { checked, partialChecked }]) => {
+			if (checked || partialChecked) {
+				const { field, value } = keyValueMap[key];
+				selected[field].push(value);
+			}
+
+			return selected;
+		}, {
+			type: [],
+			reason: [],
+		});
+
+		// do not reset page (via onParamChange) if there is no filter change
+		if (!isEqual(suggestedFilter, filter.value)) {
+			filter.value = suggestedFilter;
+			onParamChange();
+		}
+	};
+
+	const onChangeDebounced = debounce(onChange, 350);
+
+	const onHide = () => {
+		onChangeDebounced.flush();
+		applyFilter();
+	};
+
+	onBeforeUnmount(() => {
+		onChangeDebounced.cancel();
+	});
+</script>
diff --git a/app/components/probe/ProbeFilters/AdminFilterSettings.vue b/app/components/probe/ProbeFilters/AdminFilterSettings.vue
index 131f25bc..bd47c3bb 100644
--- a/app/components/probe/ProbeFilters/AdminFilterSettings.vue
+++ b/app/components/probe/ProbeFilters/AdminFilterSettings.vue
@@ -1,24 +1,43 @@
 <template>
-	<div class="flex flex-col gap-2">
-		<span class="flex items-center font-bold">Adoption status:</span>
-		<Select
-			v-model="usedFilter.adoption"
-			:options="ADOPTION_OPTIONS"
-			class="min-w-48"
-			@change="onChange"
-		>
-			<template #value="{value}">
-				{{ value[0].toUpperCase() + value.slice(1) }}
-			</template>
-			<template #option="{option}">
-				{{ option[0].toUpperCase() + option.slice(1) }}
-			</template>
-		</Select>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-2">
+			<span class="flex items-center font-bold">Adoption status:</span>
+			<Select
+				v-model="usedFilter.adoption"
+				:options="ADOPTION_OPTIONS"
+				class="min-w-48"
+				@change="onChange"
+			>
+				<template #value="{value}">
+					{{upperFirst(value)}}
+				</template>
+				<template #option="{option}">
+					{{upperFirst(option)}}
+				</template>
+			</Select>
+		</div>
+		<div class="flex flex-col gap-2">
+			<span class="flex items-center font-bold">Probe type:</span>
+			<Select
+				v-model="usedFilter.probeType"
+				:options="PROBE_TYPE_OPTIONS"
+				class="min-w-48"
+				@change="onChange"
+			>
+				<template #value="{value}">
+					{{upperFirst(value)}}
+				</template>
+				<template #option="{option}">
+					{{upperFirst(option)}}
+				</template>
+			</Select>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { useProbeFilters, ADOPTION_OPTIONS, type Filter } from '~/composables/useProbeFilters';
+	import upperFirst from 'lodash/upperFirst';
+	import { useProbeFilters, ADOPTION_OPTIONS, type Filter, PROBE_TYPE_OPTIONS } from '~/composables/useProbeFilters';
 
 	const filter = defineModel('filter', { required: false, type: Object as PropType<Filter> });
 
diff --git a/app/components/probe/ProbeFilters/ProbeListFilters.vue b/app/components/probe/ProbeFilters/ProbeListFilters.vue
index a5bdb833..a979794d 100644
--- a/app/components/probe/ProbeFilters/ProbeListFilters.vue
+++ b/app/components/probe/ProbeFilters/ProbeListFilters.vue
@@ -51,7 +51,7 @@
 				text
 				@click="adminOptsRef.toggle($event)">
 				<i class="pi pi-sliders-h"/>
-				<i v-if="!isDefault('adoption')" class="pi pi-circle-fill absolute right-2 top-2 text-[0.4rem] text-primary"/>
+				<i v-if="anyAdminFilterApplied" class="pi pi-circle-fill absolute right-2 top-2 text-[0.4rem] text-primary"/>
 			</Button>
 
 			<Popover ref="adminOptsRef" class="w-fit gap-4 p-4 [&>*]:border-none" role="dialog">
@@ -73,7 +73,7 @@
 	const { $directus } = useNuxtApp();
 
 	const active = ref(true);
-	const { filter, onParamChange, onFilterChange, getDirectusFilter, isDefault } = useProbeFilters({ active });
+	const { filter, onParamChange, onFilterChange, getDirectusFilter, anyAdminFilterApplied } = useProbeFilters({ active });
 	const searchInput = ref(filter.value.search);
 	const onFilterChangeDebounced = debounce(() => onFilterChange(searchInput.value), 500);
 	const filterDeps = computed(() => ({ ...filter.value }));
diff --git a/app/composables/useCreditsFilters.ts b/app/composables/useCreditsFilters.ts
new file mode 100644
index 00000000..c0a249ab
--- /dev/null
+++ b/app/composables/useCreditsFilters.ts
@@ -0,0 +1,108 @@
+import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+type CreditsChangeType = 'additions' | 'deductions';
+type CreditsChangeReason = 'adopted-probes' | 'sponsorship';
+
+type Filter = {
+	type: CreditsChangeType[];
+	reason: CreditsChangeReason[];
+};
+
+const PERMITTED_VALUES = {
+	type: [ 'additions', 'deductions' ],
+	reason: [ 'adopted-probes', 'sponsorship' ],
+};
+
+const DEFAULT_FILTER = cloneDeep(PERMITTED_VALUES) as Filter;
+
+export const FIELD_LABELS = {
+	type: {
+		additions: 'Additions',
+		deductions: 'Deductions',
+	},
+	reason: {
+		'adopted-probes': 'Adopted probes',
+		'sponsorship': 'Sponsorship',
+	},
+};
+
+export const TYPE_REASONS = {
+	additions: [ 'adopted-probes', 'sponsorship' ],
+	deductions: [],
+};
+
+export const useCreditsFilters = () => {
+	const route = useRoute();
+	const active = ref(true);
+	const filter = ref<Filter>(cloneDeep(DEFAULT_FILTER));
+	const key = computed(() => JSON.stringify(filter.value));
+	const anyFilterApplied = computed(() => (Object.keys(DEFAULT_FILTER) as Array<keyof Filter>).some(key => !isDefault(key)));
+
+	const constructQuery = () => ({
+		...!isDefault('type') && filter.value.type.length && { type: filter.value.type },
+		...!isDefault('reason') && filter.value.reason.length && { reason: filter.value.reason },
+	});
+
+	const onParamChange = () => {
+		navigateTo({
+			query: constructQuery(),
+		});
+	};
+
+	const isDefault = (field: keyof Filter, filterObj: MaybeRefOrGetter<Filter> = filter) => {
+		return isEqual(toValue(filterObj)[field], DEFAULT_FILTER[field]);
+	};
+
+	const getCurrentFilter = () => {
+		const { type, reason } = filter.value;
+		const allReasons = new Set(PERMITTED_VALUES.reason);
+		const filterReasons = new Set(reason);
+
+		return {
+			type,
+			reason: isEqual(filterReasons, allReasons) ? [ ...reason, 'other' ] : reason,
+		};
+	};
+
+	watch([ () => route.query.type, () => route.query.reason ], async ([ type, reason ]) => {
+		if (!toValue(active)) {
+			return;
+		}
+
+		const reasonArray = Array.isArray(reason) ? reason : [ reason ];
+		const typeArray = Array.isArray(type) ? type : [ type ];
+
+		if (type && typeArray.every(type => PERMITTED_VALUES.type.includes(type!))) {
+			filter.value.type = typeArray as CreditsChangeType[];
+		} else {
+			filter.value.type = DEFAULT_FILTER.type;
+		}
+
+		if (reason && filter.value.type.includes('additions') && reasonArray.every(reason => PERMITTED_VALUES.reason.includes(reason!))) {
+			filter.value.reason = reasonArray as CreditsChangeReason[];
+		} else {
+			filter.value.reason = filter.value.type.includes('additions') ? DEFAULT_FILTER.reason : [];
+		}
+	}, { immediate: true });
+
+	onBeforeRouteLeave(() => {
+		active.value = false;
+	});
+
+	return {
+		// state
+		anyFilterApplied,
+		filter,
+		key,
+		// handlers
+		onParamChange,
+		// builders
+		constructQuery,
+		getCurrentFilter,
+		// helpers
+		isDefault,
+	};
+};
diff --git a/app/composables/useProbeFilters.ts b/app/composables/useProbeFilters.ts
index ad9f5708..4446346e 100644
--- a/app/composables/useProbeFilters.ts
+++ b/app/composables/useProbeFilters.ts
@@ -7,6 +7,7 @@ import { useAuth } from '~/store/auth';
 
 export type StatusCode = 'all' | 'online' | 'ping-test-failed' | 'offline' | 'online-outdated';
 export type AdoptionOption = 'all' | 'adopted' | 'non-adopted';
+export type ProbeTypeOption = 'all' | 'hardware' | 'software';
 
 type StatusOption = {
 	name: string;
@@ -20,9 +21,10 @@ export interface Filter {
 	by: string;
 	desc: boolean;
 	adoption: AdoptionOption;
+	probeType: ProbeTypeOption;
 }
 
-const DEFAULT_FILTER: Filter = { search: '', status: 'all', by: 'name', desc: false, adoption: 'all' } as const;
+const DEFAULT_FILTER: Filter = { search: '', status: 'all', by: 'name', desc: false, adoption: 'all', probeType: 'all' } as const;
 
 export const SORTABLE_FIELDS: string[] = [ 'name', 'location', 'tags' ] as const;
 
@@ -35,6 +37,8 @@ export const STATUS_MAP: Record<StatusCode, StatusOption> = {
 } as const;
 
 export const ADOPTION_OPTIONS: string[] = [ 'all', 'adopted', 'non-adopted' ] as const;
+export const PROBE_TYPE_OPTIONS: string[] = [ 'all', 'hardware', 'software' ] as const;
+const ADMIN_FILTERS: (keyof Filter)[] = [ 'adoption', 'probeType' ] as const;
 
 interface ProbeFiltersOptions {
 	active?: MaybeRefOrGetter<boolean>;
@@ -47,6 +51,7 @@ export const useProbeFilters = ({ active = () => true }: ProbeFiltersOptions = {
 
 	const filter = ref<Filter>({ ...DEFAULT_FILTER });
 	const anyFilterApplied = computed(() => (Object.keys(DEFAULT_FILTER) as Array<keyof Filter>).some(key => filter.value[key] !== DEFAULT_FILTER[key]));
+	const anyAdminFilterApplied = computed(() => ADMIN_FILTERS.some(key => !isDefault(key)));
 
 	const onSortChange = (event: DataTableSortEvent) => {
 		const { sortField = '', sortOrder = 1 } = event;
@@ -78,6 +83,7 @@ export const useProbeFilters = ({ active = () => true }: ProbeFiltersOptions = {
 		...filter.value.desc && { desc: 'true' },
 		...!isDefault('status') && { status: filter.value.status },
 		...auth.isAdmin && !isDefault('adoption') && { adoption: filter.value.adoption },
+		...auth.isAdmin && !isDefault('probeType') && { type: filter.value.probeType },
 	});
 
 	const onParamChange = () => {
@@ -120,6 +126,9 @@ export const useProbeFilters = ({ active = () => true }: ProbeFiltersOptions = {
 			...!ignoredFields.includes('adoption') && auth.isAdmin && !isDefault('adoption', filter) && {
 				userId: filterValue.adoption === 'adopted' ? { _neq: null } : { _eq: null },
 			},
+			...!ignoredFields.includes('probeType') && auth.isAdmin && !isDefault('probeType', filter) && {
+				hardwareDevice: filterValue.probeType === 'hardware' ? { _neq: null } : { _eq: null },
+			},
 		};
 	};
 
@@ -133,7 +142,8 @@ export const useProbeFilters = ({ active = () => true }: ProbeFiltersOptions = {
 		() => route.query.desc,
 		() => route.query.status,
 		() => route.query.adoption,
-	], async ([ search, by, desc, status, adoption ]) => {
+		() => route.query.type,
+	], async ([ search, by, desc, status, adoption, probeType ]) => {
 		if (!toValue(active)) {
 			return;
 		}
@@ -167,12 +177,19 @@ export const useProbeFilters = ({ active = () => true }: ProbeFiltersOptions = {
 		} else {
 			filter.value.adoption = DEFAULT_FILTER.adoption;
 		}
+
+		if (typeof probeType === 'string' && PROBE_TYPE_OPTIONS.includes(probeType) && auth.isAdmin) {
+			filter.value.probeType = probeType as ProbeTypeOption;
+		} else {
+			filter.value.probeType = DEFAULT_FILTER.probeType;
+		}
 	}, { immediate: true });
 
 	return {
 		// state
 		filter,
 		anyFilterApplied,
+		anyAdminFilterApplied,
 		// handlers
 		onSortChange,
 		onFilterChange,
diff --git a/app/pages/credits.vue b/app/pages/credits.vue
index e1901411..27e1575f 100644
--- a/app/pages/credits.vue
+++ b/app/pages/credits.vue
@@ -27,7 +27,7 @@
 		<div class="mt-6">
 			<CreditsChart :start="credits.total - totalAdditions + totalDeductions" :additions="credits.additions" :deductions="credits.deductions"/>
 		</div>
-		<div v-if="creditsChanges.length || loading" class="mt-6">
+		<div v-if="creditsChanges.length || loading || anyFilterApplied" class="mt-6">
 			<DataTable
 				:value="creditsChanges"
 				lazy
@@ -35,33 +35,59 @@
 				:rows="itemsPerPage"
 				data-key="id"
 				:total-records="creditsChangesCount"
-				:loading="loading"
+				:loading="initialLoading"
 				class="max-md:hidden"
 			>
-				<Column header="Date" field="date_created" class="md:w-44 2xl:w-64"/>
+				<template #header>
+					<div class="flex items-center justify-between">
+						History
+						<CreditsFilters/>
+					</div>
+				</template>
+				<Column header="Date" field="date_created" class="md:w-44 2xl:w-64">
+					<template #body="slotProps">
+						<AsyncCell :loading="loading" size="small">
+							{{ slotProps.data.date_created }}
+						</AsyncCell>
+					</template>
+				</Column>
 				<Column header="Comment" field="comment">
 					<template #body="slotProps">
-						{{ formatCreditComment(slotProps.data) }}
+						<AsyncCell :loading="loading">
+							{{ formatCreditComment(slotProps.data) }}
+						</AsyncCell>
 					</template>
 				</Column>
 				<Column header="Amount" field="amount" class="md:w-44 2xl:w-64">
 					<template #body="slotProps">
-						<Tag v-if="slotProps.data.type === 'addition'" class="flex items-center !text-sm" severity="success">
-							<NuxtIcon class="mr-2" name="coin" aria-hidden="true"/>+{{ (slotProps.data.amount || 0).toLocaleString('en-US') }}
-						</Tag>
-						<Tag v-else class="flex items-center !text-sm" severity="danger">
-							<NuxtIcon class="mr-2" name="coin" aria-hidden="true"/>-{{ (slotProps.data.amount || 0).toLocaleString('en-US') }}
-						</Tag>
+						<div class="flex min-h-7 items-center">
+							<AsyncCell :loading="loading" size="small">
+								<Tag v-if="slotProps.data.type === 'addition'" class="flex items-center !text-sm" severity="success">
+									<NuxtIcon class="mr-2" name="coin" aria-hidden="true"/>+{{ (slotProps.data.amount || 0).toLocaleString('en-US') }}
+								</Tag>
+								<Tag v-else class="flex items-center !text-sm" severity="danger">
+									<NuxtIcon class="mr-2" name="coin" aria-hidden="true"/>-{{ (slotProps.data.amount || 0).toLocaleString('en-US') }}
+								</Tag>
+							</AsyncCell>
+						</div>
 					</template>
 				</Column>
+				<template #empty><div class="p-6 text-center">No entries match the filter.</div></template>
 			</DataTable>
 			<div class="relative flex w-full flex-col gap-2 md:hidden">
+				<div class="flex items-center justify-between px-2">
+					<h2 class="text-lg font-semibold">History</h2>
+					<CreditsFilters/>
+				</div>
 				<div v-if="loading && !creditsChanges.length" class="flex h-32 w-full items-center justify-center">
 					<i class="pi pi-spin pi-spinner text-xl"/>
 				</div>
-				<AsyncWrapper v-for="(creditChange, index) in creditsChanges" v-else :key="index" :loading="loading">
+				<p v-else-if="!creditsChanges.length && anyFilterApplied" class="rounded-lg bg-surface-0 p-6 py-12 text-center dark:bg-dark-700">
+					No entries match the filter.
+				</p>
+				<AsyncRow v-for="(creditChange, index) in creditsChanges" v-else :key="index" :loading="loading">
 					<CreditItem :credit-change="creditChange"/>
-				</AsyncWrapper>
+				</AsyncRow>
 			</div>
 			<Paginator
 				v-if="creditsChanges.length !== creditsChangesCount"
@@ -111,7 +137,9 @@
 <script setup lang="ts">
 	import { aggregate, customEndpoint, readItems } from '@directus/sdk';
 	import CreditItem from '~/components/list-items/CreditItem.vue';
+	import { computedDebounced } from '~/composables/computedDebounced';
 	import { usePagination } from '~/composables/pagination';
+	import { useCreditsFilters } from '~/composables/useCreditsFilters';
 	import { useErrorToast } from '~/composables/useErrorToast';
 	import { useUserFilter } from '~/composables/useUserFilter';
 	import { useMetadata } from '~/store/metadata';
@@ -131,9 +159,13 @@
 
 	const creditsPerAdoptedProbe = metadata.creditsPerAdoptedProbe;
 	const itemsPerPage = ref(config.public.itemsPerTablePage);
+	const initialLoading = ref(true);
 
 	const { page, first, pageLinkSize, template } = usePagination({ itemsPerPage });
 
+	const { key: creditsFilterKey, getCurrentFilter, anyFilterApplied } = useCreditsFilters();
+	const filterDeps = computedDebounced(() => [ creditsFilterKey.value, first.value, itemsPerPage.value ]);
+
 	const { data: credits, error: creditsError } = await useLazyAsyncData('credits-stats', async () => {
 		const [ total, additions, deductions, todayOnlineProbes ] = await Promise.all([
 			$directus.request<{ amount: number }[]>(readItems('gp_credits', {
@@ -200,13 +232,20 @@
 			path: '/credits-timeline',
 			params: {
 				userId: getUserFilter('user_id').user_id?._eq || 'all',
+				...getCurrentFilter(),
 				offset: first.value,
 				limit: itemsPerPage.value,
 			},
 		}))),
-		{ watch: [ first, itemsPerPage ] },
+		{ watch: [ filterDeps ] },
 	);
 
+	watch(loading, (loading) => {
+		if (!loading) {
+			initialLoading.value = false;
+		}
+	});
+
 	const creditsChangesCount = computed(() => creditsData.value?.count || 0);
 
 	const creditsChanges = computed<CreditsChange[]>(() => {
@@ -226,7 +265,7 @@
 
 	onMounted(async () => {
 		if (!route.query.limit) {
-			itemsPerPage.value = Math.min(Math.max(Math.floor((window.innerHeight - 540) / 54), 5), 15);
+			itemsPerPage.value = Math.min(Math.max(Math.floor((window.innerHeight - 595) / 54), 5), 15);
 		}
 	});
 
diff --git a/app/presets/aura/index.js b/app/presets/aura/index.js
index 2bf86510..47c133ad 100644
--- a/app/presets/aura/index.js
+++ b/app/presets/aura/index.js
@@ -97,8 +97,8 @@ import togglebutton from './togglebutton';
 import toggleswitch from './toggleswitch';
 // import toolbar from './toolbar';
 import tooltip from './tooltip';
-// import tree from './tree';
-// import treeselect from './treeselect';
+import tree from './tree';
+import treeselect from './treeselect';
 // import treetable from './treetable';
 
 export default {
@@ -133,7 +133,7 @@ export default {
 	inputgroupaddon,
 	// inputmask,
 	// knob,
-	// treeselect,
+	treeselect,
 	// textarea,
 	// password,
 	iconfield,
@@ -149,7 +149,7 @@ export default {
 	// data
 	paginator,
 	datatable,
-	// tree,
+	tree,
 	// dataview,
 	// organizationchart,
 	// orderlist,
diff --git a/app/presets/aura/skeleton/index.js b/app/presets/aura/skeleton/index.js
index f11dc720..4dddcaeb 100644
--- a/app/presets/aura/skeleton/index.js
+++ b/app/presets/aura/skeleton/index.js
@@ -10,7 +10,7 @@ export default {
 			{ 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
 
 			// Colors
-			'bg-surface-200 dark:bg-surface-700',
+			'bg-surface-200 dark:bg-dark-500',
 		],
 	}),
 };
diff --git a/app/presets/aura/tree/index.js b/app/presets/aura/tree/index.js
index 17497d12..9c467aba 100644
--- a/app/presets/aura/tree/index.js
+++ b/app/presets/aura/tree/index.js
@@ -29,7 +29,7 @@ export default {
 	node: {
 		class: [ 'p-0 my-[2px] mx-0 first:mt-0', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10' ],
 	},
-	nodeContent: ({ context, props }) => ({
+	nodeContent: ({ context }) => ({
 		class: [
 			// Flex and Alignment
 			'flex items-center',
@@ -38,18 +38,18 @@ export default {
 			'rounded-md',
 
 			// Spacing
-			'py-1 px-2 gap-2',
+			'p-2 gap-0.5',
 
 			// Colors
-			context.selected ? 'bg-highlight text-primary-600 dark:text-white' : 'bg-transparent text-surface-600 dark:text-white/70',
+			context.checked || context.selected ? 'text-bluegray-900 dark:text-surface-0' : 'bg-transparent text-surface-600 dark:text-white/70',
 
 			// States
-			{ 'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.selectionMode === 'single' || props.selectionMode === 'multiple') && !context.selected },
+			{ 'hover:bg-surface-100 dark:hover:bg-dark-600': !context.selected },
 
 			// Transition
 			'transition-shadow duration-200',
 
-			{ 'cursor-pointer select-none': props.selectionMode === 'single' || props.selectionMode === 'multiple' },
+			'cursor-pointer select-none',
 		],
 	}),
 	nodeToggleButton: ({ context }) => ({
@@ -66,8 +66,8 @@ export default {
 			// Colors
 			'bg-transparent',
 			{
-				'text-surface-600 dark:text-white/70': !context.selected,
-				'text-primary-600 dark:text-white': context.selected,
+				'text-surface-600 dark:text-white/70': !(context.checked || context.selected),
+				'text-bluegray-900 dark:text-white': context.checked || context.selected,
 				'invisible': context.leaf,
 			},
 
@@ -89,16 +89,16 @@ export default {
 
 			// Color
 			{
-				'text-surface-600 dark:text-white/70': !context.selected,
-				'text-primary-600 dark:text-white': context.selected,
+				'text-surface-600 dark:text-white/70': !(context.checked || context.selected),
+				'text-bluegray-900 dark:text-white': context.checked || context.selected,
 			},
 		],
 	}),
 	nodeLabel: ({ context }) => ({
 		class: [
 			{
-				'text-surface-600 dark:text-white/70': !context.selected,
-				'text-primary-600 dark:text-white': context.selected,
+				'text-surface-600 dark:text-white/70': !(context.checked || context.selected),
+				'text-bluegray-900 dark:text-white': context.checked || context.selected,
 			},
 		],
 	}),
diff --git a/app/presets/aura/treeselect/index.js b/app/presets/aura/treeselect/index.js
index 96c82e1e..5116d250 100644
--- a/app/presets/aura/treeselect/index.js
+++ b/app/presets/aura/treeselect/index.js
@@ -9,9 +9,9 @@ export default {
 			'rounded-md',
 
 			// Color and Background
-			{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
-			'border',
-			{ 'border-surface-300 dark:border-surface-700': !props.invalid },
+			{ 'bg-surface-0 dark:bg-dark-900': !props.disabled },
+			'border outline-none',
+			{ 'border-surface-300 dark:border-dark-600': !props.invalid },
 
 			// Invalid State
 			'invalid:focus:ring-red-200',
@@ -23,13 +23,13 @@ export default {
 			'duration-200',
 
 			// States
-			{ 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
-			{ 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
+			{ 'hover:border-surface-400 dark:hover:border-dark-400': !props.invalid },
+			{ 'ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
 
 			// Misc
 			'cursor-pointer',
 			'select-none',
-			{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled },
+			{ 'bg-surface-200 dark:bg-dark-900 select-none pointer-events-none cursor-default': props.disabled },
 		],
 	}),
 	labelContainer: {
@@ -43,7 +43,7 @@ export default {
 			'py-2 px-3',
 
 			// Color
-			'text-surface-800 dark:text-white/80',
+			'text-bluegray-400',
 
 			// Transition
 			'transition duration-200',
@@ -72,13 +72,16 @@ export default {
 	panel: {
 		class: [
 			// Colors
-			'bg-surface-0 dark:bg-surface-900',
+			'bg-surface-0 dark:bg-dark-700',
 			'text-surface-700 dark:text-white/80',
 
 			// Shape
-			'border border-surface-300 dark:border-surface-700',
+			'border border-surface-300 dark:border-dark-600',
 			'rounded-md',
 			'shadow-md',
+
+			// Padding
+			'p-1',
 		],
 	},
 	treeContainer: {
diff --git a/app/utils/tree-select.ts b/app/utils/tree-select.ts
new file mode 100644
index 00000000..80ab903a
--- /dev/null
+++ b/app/utils/tree-select.ts
@@ -0,0 +1,75 @@
+type TreeNode = {
+	key: string;
+	label: string;
+	data?: unknown;
+	children?: TreeNode[];
+} & Record<string, unknown>;
+
+export const renderTreeSelectValue = (selected: Array<TreeNode>, forestRoots: Array<TreeNode>) => {
+	if (!selected?.length) {
+		return 'Select Items';
+	}
+
+	const getTreeNodeCount = (node: TreeNode): number => {
+		return (node.children?.reduce((sum, child) => sum + getTreeNodeCount(child), 0) ?? 0) + 1;
+	};
+
+	const nodeCount = forestRoots.reduce((sum, node) => sum + getTreeNodeCount(node), 0);
+
+	if (selected.length === nodeCount) {
+		return 'All';
+	}
+
+	const getNodeLabels = (node: TreeNode): string[] => {
+		if (node.children?.length) {
+			const allChildrenSelected = node.children.every(child => selected.includes(child));
+
+			if (allChildrenSelected) {
+				return [ node.label ];
+			}
+
+			return node.children.map(child => getNodeLabels(child)).flat();
+		}
+
+		return selected.includes(node) ? [ node.label ] : [];
+	};
+
+	return forestRoots.reduce<string[]>((labels, node) => [ ...labels, ...getNodeLabels(node) ], []).join(', ');
+};
+
+/**
+ * Build a node-tree forest used by PrimeVue's Tree and TreeSelect components.
+ * @param keyToData - A map of keys to data objects. Keys are expected in the format "(parent key)-(child suffix)" -- as in PrimeVue's TreeSelect example.
+ * @param getLabel - A mapping function from a node key to its label.
+ * @returns An array of root tree nodes.
+ */
+export const buildNodesByKey = (keyToData: Record<string, unknown>, getLabel: (key: string) => string): TreeNode[] => {
+	// create all tree nodes
+	const nodeMap = Object.entries(keyToData).reduce<Record<string, TreeNode>>((map, [ key, data ]) => {
+		map[key] = {
+			key,
+			label: getLabel(key),
+			data,
+			children: [],
+		};
+
+		return map;
+	}, {});
+
+	// link by children to parents via prefix, e.g.; key "1-2" means parent "1" has child "1-2"
+	const roots = [];
+
+	for (const key of Object.keys(nodeMap)) {
+		const node = nodeMap[key]!;
+		const parentKey = key.includes('-') ? key.slice(0, key.lastIndexOf('-')) : null;
+		const parentNode = parentKey ? nodeMap[parentKey] : null;
+
+		if (parentNode) {
+			parentNode.children!.push(node);
+		} else {
+			roots.push(node);
+		}
+	}
+
+	return roots;
+};