diff --git a/training/models.py b/training/models.py
index 8328ab9e..50eb8449 100644
--- a/training/models.py
+++ b/training/models.py
@@ -184,6 +184,16 @@ class TrainingLevel(models.Model, RevisionMixin):
     def passed_out_requirements(self):
         return self.get_requirements_of_depth(TrainingItemQualification.PASSED_OUT)
 
+    def get_related_level(self, dif):
+        if (level == 0 and dif < 0) or (level == 2 and dif > 0):
+            return None
+        return TrainingLevel.objects.get(department=self.department, level=self.level+dif)
+
+    def get_common_competencies(self):
+        if is_common_competencies:
+            return self
+        return TrainingLevel.objects.get(level=self.level, department=None)
+
     def percentage_complete(self, user):  # FIXME
         needed_qualifications = self.requirements.all().select_related()
         relavant_qualifications = 0.0
diff --git a/training/templates/level_list.html b/training/templates/level_list.html
index faab46df..9bbb48a3 100644
--- a/training/templates/level_list.html
+++ b/training/templates/level_list.html
@@ -1,19 +1,76 @@
 {% extends 'base_training.html' %}
 
 {% load markdown_tags %}
+{% load get_supervisor from tags %}
 
 {% block css %}
 <style>
-.level-1::after {
-    content: "";
+.tree ul {
+    margin-left: 20px;
+}
+
+.tree li {
+    list-style-type: none;
+    margin:10px;
     position: relative;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 2px;
-    height: 50px;
-    margin-top: -15px;
-    margin-bottom: -15px;
-    background: black;
+}
+
+.tree li::before {
+    content: "";
+    position: absolute;
+    top:-7px;
+    left:-20px;
+    border-left: 1px solid #ccc;
+    border-bottom:1px solid #ccc;
+    border-radius:0 0 0 0px;
+    width:20px;
+    height:15px;
+}
+
+.tree li::after {
+    position:absolute;
+    content:"";
+    top:8px;
+    left:-20px;
+    border-left: 1px solid #ccc;
+    border-top:1px solid #ccc;
+    border-radius:0px 0 0 0;
+    width:20px;
+    height:100%;
+}
+
+.tree li:last-child::after  {
+    display:none;
+}
+
+.tree li:last-child:before{
+    border-radius: 0 0 0 5px;
+}
+
+ul.tree>li:first-child::before {
+    display:none;
+}
+
+ul.tree>li:first-child::after {
+    border-radius:5px 0 0 0;
+}
+
+.tree li a {
+    border: 1px #ccc solid;
+    border-radius: 5px;
+    padding:2px 5px;
+}
+
+.tree li a:hover, .tree li a:hover+ul li a,
+.tree li a:focus, .tree li a:focus+ul li a {
+    background: #ccc; color: #000; border: 1px solid #000;
+}
+
+.tree li a:hover+ul li::after, .tree li a:focus+ul li::after,
+.tree li a:hover+ul li::before, .tree li a:focus+ul li::before 
+.tree li a:hover+ul::before, .tree li a:focus+ul::before 
+.tree li a:hover+ul ul::before, .tree li a:focus+ul ul::before{
+    border-color:  #000; /*connector color on hover*/
 }
 </style>
 {% endblock %}
@@ -28,28 +85,17 @@
 </ul>
 <sup>Correct as of 3rd September 2021, check the Training Policy.</sup>
 </div>
-<div class="chart">
-  {% for level in levels %}
-    {% if forloop.counter == 3 %}
-    <div class="row">
-    <div class="col-6">
-    {% endif %}
-    {% if level.level == 2 and level.department is None %}
-    </div>
-    <div class="col-6">
-    {% endif %}
-    <div class="{% if forloop.first %}level-1 row{% elif forloop.counter == 2 %}level-2 row{%endif%}">
-        <div class="card my-3 border-{{level.department_colour}}">
-            <h3 class="card-header"><a href="{% url 'level_detail' level.pk %}">{{ level }}</a></h3>
-            <div class="card-body">
-                <p>{{ level.description|markdown }}</p>
-            </div>
-        </div>
-    </div>
-    {% if forloop.last %}
-    </div>
-    </div>
-    {% endif %}
-  {% endfor %}
-</div>
+<ul class="tree">
+    <li><div class="card"><div class="card-header">{{ta}}</div><div class="card-body">{{ta.description|markdown}}</div></div>
+        <ul>
+        {% for level in tech %}
+            <li><div class="card"><div class="card-header">{{level}}</div><div class="card-body">{{level.description|markdown}}</div></div>
+            <ul>
+            <li><div class="card p-3">{{level|get_supervisor}}</div></li>
+            </ul>
+            </li>
+        {% endfor %}
+        </ul>
+    </li>
+</ul>
 {% endblock %}
diff --git a/training/templatetags/tags.py b/training/templatetags/tags.py
index aaf570a4..e6204063 100644
--- a/training/templatetags/tags.py
+++ b/training/templatetags/tags.py
@@ -26,3 +26,8 @@ def percentage_complete(level, user):
 @register.simple_tag
 def colour_from_depth(depth):
     return models.TrainingItemQualification.get_colour_from_depth(depth)
+
+
+@register.filter
+def get_supervisor(tech):
+    return models.TrainingLevel.objects.get(department=tech.department, level=models.TrainingLevel.SUPERVISOR)
diff --git a/training/views.py b/training/views.py
index 95f089a6..b257e23c 100644
--- a/training/views.py
+++ b/training/views.py
@@ -76,7 +76,9 @@ class LevelList(generic.ListView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["page_title"] = "All Training Levels"
-        context["levels"] = models.TrainingLevel.objects.all().order_by('level', 'department')
+        context["ta"] = models.TrainingLevel.objects.get(level=models.TrainingLevel.TA)
+        context["tech"] = models.TrainingLevel.objects.filter(level=models.TrainingLevel.TECHNICIAN).order_by('department')
+        context["sup"] = models.TrainingLevel.objects.filter(level=models.TrainingLevel.SUPERVISOR).order_by('department')
         return context