diff --git a/index.html b/index.html
index dcf956b..ce97b9b 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
       )
     </script>
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <title>Vite App</title>
+    <title>Path of Exile 2 Loot Filter Config</title>
   </head>
 
   <body>
diff --git a/src/App.vue b/src/App.vue
index 2c41ba4..e13ab1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,12 +58,13 @@ function onDelete() {
 <template>
   <div class="flex flex-row gap-2 items-center flex-grow-0">
     <article class="prose dark:prose-invert p-4">
-      <h1>POE2 Loot Filter Config</h1>
+      <h1>Path of Exile 2 Loot Filter Config</h1>
     </article><Button :icon @click="darkMode = !darkMode" severity="secondary" variant="outlined" rounded />
   </div>
   <Splitter class="flex-1 min-h-0">
     <SplitterPanel class="flex flex-col">
-      <TreeNav :nodes @nodeSelect="selectedFilter = $event" @nodeUnselect="selectedFilter = undefined" />
+      <TreeNav :nodes :selectedNode="selectedFilter" @nodeSelect="selectedFilter = $event"
+        @nodeUnselect="selectedFilter = undefined" />
     </SplitterPanel>
     <SplitterPanel class="flex flex-col">
       <FilterDetail v-if="selectedFilter" :node="selectedFilter" @delete="onDelete" />
diff --git a/src/components/FilterDetail.vue b/src/components/FilterDetail.vue
index 1086f74..2e4c627 100644
--- a/src/components/FilterDetail.vue
+++ b/src/components/FilterDetail.vue
@@ -56,18 +56,6 @@ const BASE_TYPES = [
   'Orb of Transmutation', 'Scroll of Wisdom', 'Portal Scroll'
 ];
 
-// const search_class = (event) => {
-//   setTimeout(() => {
-//     if (!event.query.trim().length) {
-//       filteredCountries.value = [...countries.value];
-//     } else {
-//       filteredCountries.value = countries.value.filter((country) => {
-//         return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-//       });
-//     }
-//   }, 250);
-// }
-
 const filter = computed(() => props.node.data)
 </script>
 
diff --git a/src/components/Info.vue b/src/components/Info.vue
index 1a2fd7e..5163b30 100644
--- a/src/components/Info.vue
+++ b/src/components/Info.vue
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 </script>
 
 <template>
-  <article class="prose dark:prose-invert">
+  <article class="prose dark:prose-invert px-5 pt-4">
     <h2>How to use:</h2>
   </article>
 </template>
diff --git a/src/components/TreeNav.vue b/src/components/TreeNav.vue
index aea8be7..638ad8f 100644
--- a/src/components/TreeNav.vue
+++ b/src/components/TreeNav.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { onUpdated, ref } from 'vue'
+import { computed, onUpdated, ref } from 'vue'
 import { defaultGroup, defaultLeaf, type Filter, type FilterNode as FilterNodeType } from '../models';
-import FilterNode from './FilterNode.vue';
 import { Tree, Button, Menu, ScrollPanel } from 'primevue'
 import { match } from 'ts-pattern';
+import FilterNode from './FilterNode.vue';
 import type { TreeNode } from 'primevue/treenode';
 import { filterToTreeNode } from '@/services/filter';
 
 const props = defineProps<{
-  nodes: TreeNode[]
+  nodes: FilterNodeType[]
+  selectedNode?: FilterNodeType
 }>()
 const emit = defineEmits(['nodeSelect', 'nodeUnselect'])
 const selectedKey = ref()
@@ -53,6 +54,80 @@ const toggle = (event: MouseEvent) => {
   menu.value.toggle(event);
 };
 
+function moveToTop() {
+  if (!props.selectedNode || !selectedPosition.value) {
+    return
+  }
+  let index = selectedPosition.value[0]
+  let list: FilterNodeType[];
+  if (props.selectedNode.parent) {
+    list = props.selectedNode.parent.children!
+  } else {
+    list = props.nodes
+  }
+  list.splice(index, 1)
+  list.unshift(props.selectedNode)
+}
+
+function moveUp() {
+  if (!props.selectedNode || !selectedPosition.value || selectedPosition.value[0] <= 0) {
+    return
+  }
+  let index = selectedPosition.value[0]
+  let list: FilterNodeType[];
+  if (props.selectedNode.parent) {
+    list = props.selectedNode.parent.children!
+  } else {
+    list = props.nodes
+  }
+  list[index] = list[index - 1]
+  list[index - 1] = props.selectedNode
+}
+function moveDown() {
+  if (!props.selectedNode || !selectedPosition.value || selectedPosition.value[0] >= selectedPosition.value[1] - 1) {
+    return
+  }
+  let index = selectedPosition.value[0]
+  let list: FilterNodeType[];
+  if (props.selectedNode.parent) {
+    list = props.selectedNode.parent.children!
+  } else {
+    list = props.nodes
+  }
+  list[index] = list[index + 1]
+  list[index + 1] = props.selectedNode
+}
+function moveToBottom() {
+  if (!props.selectedNode || !selectedPosition.value || selectedPosition.value[0] >= selectedPosition.value[1] - 1) {
+    return
+  }
+  let index = selectedPosition.value[0]
+  let list: FilterNodeType[];
+  if (props.selectedNode.parent) {
+    list = props.selectedNode.parent.children!
+  } else {
+    list = props.nodes
+  }
+  list.splice(index, 1)
+  list.push(props.selectedNode)
+}
+
+const selectedPosition = computed(() => {
+  if (!props.selectedNode) {
+    return undefined
+  } else {
+    if (props.selectedNode.parent) {
+      let r = [props.selectedNode.parent.children!.findIndex(item => item === props.selectedNode), props.selectedNode.parent.children!.length]
+      console.dir(r)
+      return r
+    } else {
+      let r = [props.nodes.findIndex(item => item === props.selectedNode), props.nodes.length];
+      console.dir(r)
+      return r
+    }
+  }
+})
+
 </script>
 
 <template>
@@ -60,6 +135,21 @@ const toggle = (event: MouseEvent) => {
     <article class="prose dark:prose-invert flex-1">
       <h2>List of Rules:</h2>
     </article>
+    <Button class="flex-shrink-0" :disabled="selectedPosition == undefined || selectedPosition[0] <= 0"
+      v-tooltip.top="'Move to top'" severity="secondary" variant="text" rounded icon="pi pi-angle-double-up"
+      size="small" @click="moveToTop" />
+    <Button class="flex-shrink-0" :disabled="selectedPosition == undefined || selectedPosition[0] <= 0"
+      v-tooltip.top="'Move up'" severity="secondary" variant="text" rounded icon="pi pi-angle-up" size="small"
+      @click="moveUp" />
+    <Button class="flex-shrink-0"
+      :disabled="selectedPosition == undefined || selectedPosition[0] >= selectedPosition[1] - 1"
+      v-tooltip.top="'Move down'" severity="secondary" variant="text" rounded icon="pi pi-angle-down" size="small"
+      @click="moveDown" />
+    <Button class="flex-shrink-0"
+      :disabled="selectedPosition == undefined || selectedPosition[0] >= selectedPosition[1] - 1"
+      v-tooltip.top="'Move to bottom'" severity="secondary" variant="text" rounded icon="pi pi-angle-double-down"
+      size="small" @click="moveToBottom" />
+
     <Button class="flex-shrink-0" icon="pi pi-plus" rounded variant="text" size="small" @click="toggle" />
     <Menu ref="menu" :model="items" :popup="true" />
   </div>
diff --git a/src/main.ts b/src/main.ts
index bae096e..094e1c8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,11 +7,13 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
 import App from './App.vue'
+import Tooltip from 'primevue/tooltip';
+
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(PrimeVue, {
   theme: 'none'
 })
-
+app.directive('tooltip', Tooltip);
 app.mount('#app')
diff --git a/src/services/filter.ts b/src/services/filter.ts
index 1f63303..75064ce 100644
--- a/src/services/filter.ts
+++ b/src/services/filter.ts
@@ -1,12 +1,12 @@
-import type { Filter } from '@/models'
+import type { Filter, FilterNode } from '@/models'
 import type { TreeNode } from 'primevue/treenode'
 
-export function filterToTreeNode(filter: Filter, parent?: TreeNode): TreeNode {
-  let node: TreeNode = {
+export function filterToTreeNode(filter: Filter, parent?: TreeNode): FilterNode {
+  let node = {
     key: filter.id,
     data: filter,
     parent
-  }
+  } as FilterNode
   if (filter.type === 'group' ) {
     node.children = filter.filters.map(f => filterToTreeNode(f, node))
   }
