diff --git a/web/docroot/src/components/Modinfo.vue b/web/docroot/src/components/Modinfo.vue
index d0ef060..61843c3 100644
--- a/web/docroot/src/components/Modinfo.vue
+++ b/web/docroot/src/components/Modinfo.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useFetch } from "@vueuse/core"
-import xmlTree from '@/components/XmlTree.vue'
+import XmlFile from '@/components/XmlFile.vue'
 import { useAppStore } from '@/stores/app.js'
 const store = useAppStore()
 import { config } from '@/config'
@@ -29,7 +29,7 @@ const { data, error } = useFetch(() => config.baseUrl + `/mod/${store.modId}`, {
           <ul>
             <li v-for="info in data.customXML">
               <a
-                :class="'simulink xmlfile ' + info.name"
+                :class="'simulink xmlfile ' + (store.modFile === info.name ? 'active' : '')"
                 @click="store.modFile=info.name"
               >
                 {{ info.name }}
@@ -39,8 +39,8 @@ const { data, error } = useFetch(() => config.baseUrl + `/mod/${store.modId}`, {
         </div>
       </div>
       <div class="col-1"></div>
-      <div v-if="store.modFile">
-        <xml-tree :file="store.modFile" :mod-id="store.modId" />
+      <div>
+        <XmlFile />
       </div>
     </div>
   </div>
diff --git a/web/docroot/src/components/Mods.vue b/web/docroot/src/components/Mods.vue
index 9d638cf..22b06cc 100644
--- a/web/docroot/src/components/Mods.vue
+++ b/web/docroot/src/components/Mods.vue
@@ -26,7 +26,7 @@ const { data, error } = useFetch(config.baseUrl + '/mods', {
             <th>Mod Name</th>
           </tr>
           <template
-              v-for="mod in data.mods"
+              v-for="mod in data.mods.sort( (a,b) => { return a.name.localeCompare(b.name) } )"
           >
             <tr>
               <td>
@@ -38,7 +38,12 @@ const { data, error } = useFetch(config.baseUrl + '/mods', {
                 </a>
               </td>
               <td>
-                <a class="simulink" @click="store.modId=parseInt(mod.id)">{{ mod.name }}</a>
+                <a
+                    :class="'simulink' + (store.modId === parseInt(mod.id) ? ' active' : '')"
+                    @click="store.modFile='';store.modId=parseInt(mod.id)"
+                >
+                  {{ mod.name }}
+                </a>
               </td>
             </tr>
           </template>
diff --git a/web/docroot/src/components/XmlFile.vue b/web/docroot/src/components/XmlFile.vue
new file mode 100644
index 0000000..4ca0a32
--- /dev/null
+++ b/web/docroot/src/components/XmlFile.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { useFetch } from '@vueuse/core'
+import { config } from '@/config'
+import { useAppStore } from '@/stores/app.js'
+import XmlTree from '@/components/XmlTree.vue'
+const store = useAppStore()
+const { data, error } = await useFetch(() => config.baseUrl + `/mod/${store.modId}/${store.modFile}`, {
+  immediate: false,
+  refetch: true,
+  afterFetch(response) {
+    const parser = new DOMParser()
+    try {
+      response.data = parser.parseFromString(response.data, "text/xml").documentElement
+    } catch(e) {
+      console.error(e)
+      response.error = e
+    }
+    return response
+  }
+}).get()
+</script>
+
+<template>
+  <div v-if="error">{{ error }}</div>
+  <div v-else-if="data">
+    <XmlTree :element="data" :depth="0" />
+  </div>
+</template>
diff --git a/web/docroot/src/components/XmlTree.vue b/web/docroot/src/components/XmlTree.vue
index aaa4d91..23a11da 100644
--- a/web/docroot/src/components/XmlTree.vue
+++ b/web/docroot/src/components/XmlTree.vue
@@ -1,114 +1,49 @@
+<script setup>
+const props = defineProps({
+  depth: Number,
+  element: [Element, Text],
+})
+function collapse(e) {
+  console.log(e)
+  // e.children?.forEach(x => x.classList?.add("d-none"))
+}
+function children(e) {
+  let children = []
+  let node = e.firstChild
+  while (node) {
+    children.push(node)
+    node = node.nextSibling
+  }
+  return children
+}
+</script>
+
 <template>
-  <div
-      v-if="elem.nodeType === 1 && isText"
-      :style="'padding-left: ' + (depth * 10) + 'px'"
-      @click="collapse"
-  >
-    <span class="xml-tree-tag">&lt;{{elem.nodeName}}</span>
-    <span v-if="elem.hasAttributes()" v-for="attribute in elem.attributes">
-        <span class="xml-tree-attr">&nbsp;{{attribute.name}}</span>
-        <span>=</span>
-        <span class="xml-tree-attr">"{{attribute.value}}"</span>
-    </span>
-    <span class="xml-tree-tag">></span>
-    <span>{{this.children[0].data.trim()}}</span>
-    <span class="xml-tree-tag">&lt;/{{elem.nodeName}}></span>
-  </div>
-  <div v-else :style="'padding-left: ' + (depth * 10) + 'px'">
-    <span v-if="elem.nodeType === 1" class="d-flex">
+  <div v-if="props.element.nodeType === 1" :style="'padding-left: ' + (props.depth * 10) + 'px'">
+    <span class="d-flex">
         <span
-            v-if="elem.children.length > 0"
+            v-if="props.element.children.length > 0"
             class="bi-dash simulink text-center"
             @click="collapse"
         />
-        <span v-else></span>
-        <span class="xml-tree-tag">&lt;{{elem.nodeName}}</span>
-        <span v-if="elem.hasAttributes()" v-for="attribute in elem.attributes">
-            <span class="xml-tree-attr">&nbsp;{{attribute.name}}</span>
+        <span>&lt;{{props.element.nodeName}}</span>
+        <span v-if="props.element.hasAttributes()" v-for="attribute in props.element.attributes">
+            <span>&nbsp;{{attribute.name}}</span>
             <span>=</span>
-            <span class="xml-tree-attr">"{{attribute.value}}"</span>
+            <span>"{{attribute.value}}"</span>
         </span>
-        <span v-if="elem.children.length === 0" class="xml-tree-tag">&nbsp;/></span>
-        <span v-else class="xml-tree-tag">></span>
+        <span v-if="props.element.children.length === 0">&nbsp;/</span>
+        <span>></span>
+    </span>
+    <span v-for="child in children(props.element)">
+      <XmlTree v-if="child.nodeType !== 8" :element="child" :depth="props.depth + 1" />
     </span>
-    <span v-if="elem.nodeType === 3">{{elem.data.trim()}}</span>
-    <div v-for="child in children">
-      <xml-tree v-if="child.nodeType !== 8" :element="child" :d="depth" />
-    </div>
     <span
-        v-if="elem.nodeType === 1 && elem.children.length > 0"
+        v-if="props.element.nodeType === 1"
         style="padding-left: -10px"
     >
-        <span style="padding-left: 20px" class="xml-tree-tag">&lt;/{{elem.nodeName}}></span>
+        <span>&lt;/{{props.element.nodeName}}></span>
     </span>
   </div>
+  <span v-if="props.element.nodeType === 3">{{props.element.data.trim()}}</span>
 </template>
-
-<script>
-import { useFetch } from '@vueuse/core'
-import { config } from '@/config'
-export default {
-  name: "xmlTree",
-  props: {
-    d: {
-      type: Number,
-      default: 0
-    },
-    element: {
-      type: [Element, Text],
-      default: undefined
-    },
-    file: {
-      type: String,
-      default: ''
-    },
-    modId: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      depth: 1
-    }
-  },
-  methods: {
-    collapse() {
-      this.children.forEach(x => x.classList?.add("d-none"))
-    },
-    log(message) {
-      console.log(message)
-    }
-  },
-  computed: {
-    async elem() {
-      this.depth = parseInt(this.d) + 1
-      if (this.element) {
-        return this.element
-      } else if(this.file) {
-        const { data } = await useFetch(config.baseUrl + `/mod/${this.modId}/${this.file}`)
-        const parser = new DOMParser()
-        const xmlDoc = parser.parseFromString(data, "text/xml")
-        return xmlDoc.documentElement
-      }
-    },
-    children() {
-      let children = []
-      let node = this.elem.firstChild
-      while (node) {
-        children.push(node)
-        node = node.nextSibling
-      }
-      return children
-    },
-    isText() {
-      if (this.children.length === 1) {
-        if (this.children[0].nodeType === 3) {
-          return true
-        }
-      }
-      return false
-    }
-  }
-}
-</script>
diff --git a/web/docroot/src/css/index.css b/web/docroot/src/css/index.css
index 21fdb4a..e3c12f7 100644
--- a/web/docroot/src/css/index.css
+++ b/web/docroot/src/css/index.css
@@ -7,11 +7,15 @@ th, td {
     padding-right: 10px
 }
 
+.active {
+    background-color: cyan;
+}
+
 .simulink {
     cursor: pointer;
     text-underline: blue;
 }
 
 .simulink:hover {
-    background-color: cyan;
+    background-color: green;
 }