diff --git a/app/characters.py b/app/characters.py
index 41c9ff8..4e268e7 100644
--- a/app/characters.py
+++ b/app/characters.py
@@ -100,6 +100,88 @@ def view(id):
         character_json=character_json
     )
 
+@character_blueprint.route('/chardata/<id>', methods=['GET'])
+@login_required
+def chardata(id):
+
+    character_data = CharacterInfo.query.filter(CharacterInfo.id == id).first()
+
+    if character_data == {}:
+        abort(404)
+        return
+
+    if current_user.gm_level < 3:
+        if character_data.account_id and character_data.account_id != current_user.id:
+            abort(403)
+            return
+    character_json = xmltodict.parse(
+        CharacterXML.query.filter(
+            CharacterXML.id == id
+        ).first().xml_data.replace("\"stt=", "\" stt="),
+        attr_prefix="attr_"
+    )
+
+    # print json for reference
+    # with open("errorchar.json", "a") as file:
+    #     file.write(
+    #         json.dumps(character_json, indent=4)
+    #     )
+
+    # stupid fix for jinja parsing
+    character_json["obj"]["inv"]["holdings"] = character_json["obj"]["inv"].pop("items")
+    # sort by items slot index
+    if type(character_json["obj"]["inv"]["holdings"]["in"]) == list:
+        for inv in character_json["obj"]["inv"]["holdings"]["in"]:
+                if "i" in inv.keys() and type(inv["i"]) == list:
+                    inv["i"] = sorted(inv["i"], key=lambda i: int(i['attr_s']))
+
+    return render_template(
+        'partials/_charxml.html.j2',
+        character_data=character_data,
+        character_json=character_json
+    )
+
+@character_blueprint.route('/inventory/<id>/<inventory_id>', methods=['GET'])
+@login_required
+def inventory(id, inventory_id):
+    
+    character_data = CharacterInfo.query.filter(CharacterInfo.id == id).first()
+
+    if character_data == {}:
+        abort(404)
+        return
+
+    if current_user.gm_level < 3:
+        if character_data.account_id and character_data.account_id != current_user.id:
+            abort(403)
+            return
+    character_json = xmltodict.parse(
+        CharacterXML.query.filter(
+            CharacterXML.id == id
+        ).first().xml_data.replace("\"stt=", "\" stt="),
+        attr_prefix="attr_"
+    )
+
+    # print json for reference
+    # with open("errorchar.json", "a") as file:
+    #     file.write(
+    #         json.dumps(character_json, indent=4)
+    #     )
+
+    # stupid fix for jinja parsing
+    character_json["obj"]["inv"]["holdings"] = character_json["obj"]["inv"].pop("items")
+    # sort by items slot index
+    if type(character_json["obj"]["inv"]["holdings"]["in"]) == list:
+        for inv in character_json["obj"]["inv"]["holdings"]["in"]:
+                if "i" in inv.keys() and type(inv["i"]) == list:
+                    inv["i"] = sorted(inv["i"], key=lambda i: int(i['attr_s']))
+    for inventory in character_json["obj"]["inv"]["holdings"]["in"]:
+        if inventory["attr_t"] == inventory_id:
+            return render_template(
+                'partials/charxml/_inventory.html.j2',
+                inventory=inventory
+            )
+    return "No Items in Inventory", 404
 
 @character_blueprint.route('/view_xml/<id>', methods=['GET'])
 @login_required
diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2
index e298393..a7b6a94 100644
--- a/app/templates/base.html.j2
+++ b/app/templates/base.html.j2
@@ -94,6 +94,23 @@
     $(function () {
       $('[data-toggle="tooltip"]').tooltip()
     })
+    function setInnerHTML(elm, html) {
+      elm.innerHTML = html;
+      
+      Array.from(elm.querySelectorAll("script"))
+        .forEach( oldScriptEl => {
+          const newScriptEl = document.createElement("script");
+          
+          Array.from(oldScriptEl.attributes).forEach( attr => {
+            newScriptEl.setAttribute(attr.name, attr.value) 
+          });
+          
+          const scriptText = document.createTextNode(oldScriptEl.innerHTML);
+          newScriptEl.appendChild(scriptText);
+          
+          oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
+      });
+    }
   </script>
 {% endblock %}
 
diff --git a/app/templates/character/view.html.j2 b/app/templates/character/view.html.j2
index 99ca766..8aecf6e 100644
--- a/app/templates/character/view.html.j2
+++ b/app/templates/character/view.html.j2
@@ -15,8 +15,9 @@
         {% include 'partials/_character.html.j2' %}
       {% endwith %}
     </div>
-    <div class="col-sm">
-      {% include 'partials/_charxml.html.j2'%}
+    <div class="col-sm" id="charxml">
+      Loading Character Data 
+      {% include 'partials/_loading.html' %}
     </div>
   </div>
 {% endblock content %}
@@ -32,3 +33,14 @@
     {% endfor %}
   </div>
 {% endblock content_after %}
+
+{% block js %}
+  {{ super() }}
+  <script>
+    fetch({{ url_for("characters.chardata", id=character_data.id)|tojson }})
+        .then(response => response.text())
+        .then(text => {
+          setInnerHTML(document.getElementById("charxml"), text);
+        })
+  </script>
+{% endblock js %}
diff --git a/app/templates/partials/_charxml.html.j2 b/app/templates/partials/_charxml.html.j2
index f972f2e..532f556 100644
--- a/app/templates/partials/_charxml.html.j2
+++ b/app/templates/partials/_charxml.html.j2
@@ -114,99 +114,33 @@
         <div class="tab-content mt-3" id="nav-invContent">
           <div class="tab-pane fade show active" id="nav-items" role="tabpanel" aria-labelledby="nav-items-tab">
             {# Inv ID 0 - Index: 0 #}
-            {% for item in character_json.obj.inv.holdings.in %}
-              {% if item.attr_t == "0" %}
-                {% if item.i is iterable and (item.i is not string and item.i is not mapping) %}
-                  {% for inv_item in item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endfor %}
-                {% else %}
-                  {% with inv_item=item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endwith %}
-                {% endif %}
-              {% endif %}
-            {% endfor %}
+            Loading Inventory 
+            {% include 'partials/_loading.html' %}
           </div>
           <div class="tab-pane fade" id="nav-vault" role="tabpanel" aria-labelledby="nav-vault-tab">
             {# Inv ID 1 - Index: 1 #}
-            {% for item in character_json.obj.inv.holdings.in %}
-              {% if item.attr_t == "1" %}
-                {% if item.i is iterable and (item.i is not string and item.i is not mapping) %}
-                  {% for inv_item in item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endfor %}
-                {% else %}
-                  {% with inv_item=item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endwith %}
-                {% endif %}
-              {% endif %}
-            {% endfor %}
+            Loading Inventory 
+            {% include 'partials/_loading.html' %}
           </div>
           <div class="tab-pane fade" id="nav-vault-models" role="tabpanel" aria-labelledby="nav-vault-models-tab">
             {# Inv ID 14 - Index: 10 #}
-            {% for item in character_json.obj.inv.holdings.in %}
-              {% if item.attr_t == "14" %}
-                {% if item.i is iterable and (item.i is not string and item.i is not mapping) %}
-                  {% for inv_item in item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endfor %}
-                {% else %}
-                  {% with inv_item=item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endwith %}
-                {% endif %}
-              {% endif %}
-            {% endfor %}
+            Loading Inventory 
+            {% include 'partials/_loading.html' %}
           </div>
           <div class="tab-pane fade" id="nav-bricks" role="tabpanel" aria-labelledby="nav-bricks-tab">
             {# Inv ID 2 - Index: 2 #}
-            {% for item in character_json.obj.inv.holdings.in %}
-              {% if item.attr_t == "2" %}
-                {% if item.i is iterable and (item.i is not string and item.i is not mapping) %}
-                  {% for inv_item in item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endfor %}
-                {% else %}
-                  {% with inv_item=item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endwith %}
-                {% endif %}
-              {% endif %}
-            {% endfor %}
+            Loading Inventory 
+            {% include 'partials/_loading.html' %}
           </div>
           <div class="tab-pane fade" id="nav-models" role="tabpanel" aria-labelledby="nav-models-tab">
             {# Inv ID 5 - Index: 6 #}
-            {% for item in character_json.obj.inv.holdings.in %}
-              {% if item.attr_t == "5" %}
-                {% if item.i is iterable and (item.i is not string and item.i is not mapping) %}
-                  {% for inv_item in item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endfor %}
-                {% else %}
-                  {% with inv_item=item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endwith %}
-                {% endif %}
-              {% endif %}
-            {% endfor %}
+            Loading Inventory 
+            {% include 'partials/_loading.html' %}
           </div>
           <div class="tab-pane fade" id="nav-behaviors" role="tabpanel" aria-labelledby="nav-behaviors-tab">
             {# Inv ID 7 - Index: 8 #}
-            {% for item in character_json.obj.inv.holdings.in %}
-              {% if item.attr_t == "7" %}
-                {% if item.i is iterable and (item.i is not string and item.i is not mapping) %}
-                  {% for inv_item in item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endfor %}
-                {% else %}
-                  {% with inv_item=item.i %}
-                    {% include 'partials/charxml/_inv_grid.html.j2' %}
-                  {% endwith %}
-                {% endif %}
-              {% endif %}
-            {% endfor %}
+            Loading Inventory 
+            {% include 'partials/_loading.html' %}
           </div>
         </div>
       </div>
@@ -265,3 +199,40 @@
     </div>
   </div>
 </div>
+<script>
+  fetch({{ url_for("characters.inventory", id=character_data.id, inventory_id=0)|tojson }})
+      .then(response => response.text())
+      .then(text => {
+        setInnerHTML(document.getElementById("nav-items"), text);
+      })
+
+  fetch({{ url_for("characters.inventory", id=character_data.id, inventory_id=1)|tojson }})
+      .then(response => response.text())
+      .then(text => {
+        setInnerHTML(document.getElementById("nav-vault"), text);
+      })
+
+  fetch({{ url_for("characters.inventory", id=character_data.id, inventory_id=14)|tojson }})
+      .then(response => response.text())
+      .then(text => {
+        setInnerHTML(document.getElementById("nav-vault-models"), text);
+      })
+
+  fetch({{ url_for("characters.inventory", id=character_data.id, inventory_id=2)|tojson }})
+      .then(response => response.text())
+      .then(text => {
+        setInnerHTML(document.getElementById("nav-bricks"), text);
+      })
+
+  fetch({{ url_for("characters.inventory", id=character_data.id, inventory_id=5)|tojson }})
+      .then(response => response.text())
+      .then(text => {
+        setInnerHTML(document.getElementById("nav-models"), text);
+      })
+
+  fetch({{ url_for("characters.inventory", id=character_data.id, inventory_id=7)|tojson }})
+      .then(response => response.text())
+      .then(text => {
+        setInnerHTML(document.getElementById("nav-behaviors"), text);
+      })
+</script>
\ No newline at end of file
diff --git a/app/templates/partials/_loading.html b/app/templates/partials/_loading.html
new file mode 100644
index 0000000..c91f7d2
--- /dev/null
+++ b/app/templates/partials/_loading.html
@@ -0,0 +1,21 @@
+<div class="spinner-grow text-light" role="status" style="animation-duration: 6s;">
+    <span class="sr-only">Loading 0</span>
+</div>
+<div class="spinner-grow text-light" role="status" style="animation-duration: 6s; animation-delay: 1s;">
+    <span class="sr-only">Loading 1</span>
+</div>
+<div class="spinner-grow text-light" role="status" style="animation-duration: 6s; animation-delay: 2s;">
+    <span class="sr-only">Loading 2</span>
+</div>
+<div class="spinner-grow text-light" role="status" style="animation-duration: 6s; animation-delay: 3s;">
+    <span class="sr-only">Loading 3</span>
+</div>
+<div class="spinner-grow text-light" role="status" style="animation-duration: 6s; animation-delay: 4s;">
+    <span class="sr-only">Loading 4</span>
+</div>
+<div class="spinner-grow text-light" role="status" style="animation-duration: 6s; animation-delay: 5s;">
+    <span class="sr-only">Loading 5</span>
+</div>
+<div class="spinner-grow text-light" role="status" style="animation-duration: 6s; animation-delay: 6s;">
+    <span class="sr-only">Loading 6</span>
+</div>
\ No newline at end of file
diff --git a/app/templates/partials/charxml/_inventory.html.j2 b/app/templates/partials/charxml/_inventory.html.j2
new file mode 100644
index 0000000..fb70fdb
--- /dev/null
+++ b/app/templates/partials/charxml/_inventory.html.j2
@@ -0,0 +1,9 @@
+{% if inventory.i is iterable and (inventory.i is not string and inventory.i is not mapping) %}
+    {% for inv_item in inventory.i %}
+        {% include 'partials/charxml/_inv_grid.html.j2' %}
+    {% endfor %}
+{% else %}
+    {% with inv_item=inventory.i %}
+        {% include 'partials/charxml/_inv_grid.html.j2' %}
+    {% endwith %}
+{% endif %}