diff --git a/InvenTree/static/css/inventree.css b/InvenTree/static/css/inventree.css
index 70cee55d51..e23039a58e 100644
--- a/InvenTree/static/css/inventree.css
+++ b/InvenTree/static/css/inventree.css
@@ -47,7 +47,7 @@
     margin-right: 50px;
     margin-left: 50px;
     width: 100%;
-    transition: 0.1s;
+    //transition: 0.1s;
 }
 
 .body {
@@ -88,7 +88,7 @@
     position: fixed; /* Stay in place */
     background-color: #fff; /* Black*/
     overflow-x: hidden; /* Disable horizontal scroll */
-    transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
+    //transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
 }
 
 .wrapper {
diff --git a/InvenTree/stock/templates/stock/index.html b/InvenTree/stock/templates/stock/index.html
deleted file mode 100644
index 2409af6c71..0000000000
--- a/InvenTree/stock/templates/stock/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-{% extends "base.html" %}
-{% load static %}
-{% block content %}
-
-{% include "stock/loc_link.html" with location=None %}
-
-<div class='row'>
-    <div class='col-sm-6'>
-        <h3>Storage Locations</h3>
-    </div>
-    <div class='col-sm-6'>
-        <h3>
-            <button style='float: right;' class='btn btn-success' id='location-create'>New Stock Location</button>
-        </h3>
-    </div>
-</div>
-
-<hr>
-
-{% if locations|length > 0 %}
-{% include "stock/location_list.html" with locations=locations %}
-<hr>
-{% endif %}
-<h3>Stock Items</h3>
-<table class="table table-striped" id='stock-table'>
-</table>
-
-{% include 'modals.html' %}
-
-{% endblock %}
-
-{% block js_load %}
-<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
-{% endblock %}
-{% block js_ready %}
-
-    $('#location-create').click(function () {
-        launchModalForm("#modal-form",
-                        "{% url 'stock-location-create' %}",
-                        {
-                            follow: true
-                        });
-    });
-
-    {% include "stock/stock_table.html" %}
-
-{% endblock %}
\ No newline at end of file
diff --git a/InvenTree/stock/templates/stock/item.html b/InvenTree/stock/templates/stock/item.html
index efb703976c..50a839f52c 100644
--- a/InvenTree/stock/templates/stock/item.html
+++ b/InvenTree/stock/templates/stock/item.html
@@ -1,9 +1,7 @@
-{% extends "base.html" %}
+{% extends "stock/stock_app_base.html" %}
 {% load static %}
 {% block content %}
 
-{% include "stock/loc_link.html" with location=item.location %}
-
 <h3>Stock entry details</h3>
 
 <table class="table table-striped">
@@ -109,8 +107,6 @@
 <button class='btn btn-danger' id='delete-item'>Delete Stock Item</button>
 </div>
 
-{% include 'modals.html' %}
-
 {% endblock %}
 
 {% block js_load %}
diff --git a/InvenTree/stock/templates/stock/loc_link.html b/InvenTree/stock/templates/stock/loc_link.html
index 34f10f33f7..7da211e58c 100644
--- a/InvenTree/stock/templates/stock/loc_link.html
+++ b/InvenTree/stock/templates/stock/loc_link.html
@@ -1,6 +1,7 @@
 <div class="navigation">
 <nav aria-label="breadcrumb">
   <ol class="breadcrumb">
+    <li><a href='#' id='toggle-stock-tree'><b>+</b></a></li>  
     <li class="breadcrumb-item{% if location is None %} active" aria-current="page{% endif %}"><a href="/stock/">Stock</a></li>
 {% if location %}
 {% for path_item in location.parentpath %}
diff --git a/InvenTree/stock/templates/stock/location.html b/InvenTree/stock/templates/stock/location.html
index 2fc6cbd523..1ef14f2d82 100644
--- a/InvenTree/stock/templates/stock/location.html
+++ b/InvenTree/stock/templates/stock/location.html
@@ -1,45 +1,50 @@
-{% extends "base.html" %}
+{% extends "stock/stock_app_base.html" %}
 {% load static %}
 {% block content %}
 
-{% include "stock/loc_link.html" with location=location %}
-
 <div class='row'>
 <div class='col-sm-6'>
+    {% if location %}
     <h3>{{ location.name }}</h3>
     <p>{{ location.description }}</p>
+    {% else %}
+    <h3>Stock</h3>
+    {% endif %}
 </div>
 <div class='col-sm-6'>
     <h3>
     <div style='float: right;'>
     <button class='btn btn-success' id='location-create'>New Stock Location</button>
+    {% if location %}
     <div class="dropdown" style="float: right;">
-        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Stock Location
+        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
         <span class="caret"></span></button>
         <ul class="dropdown-menu">
           <li><a href="#" id='location-edit' title='Edit stock location'>Edit</a></li>
           <li><a href="#" id='location-delete' title='Delete stock location'>Delete</a></li>
         </ul>
     </div>
+    {% endif %}
     </div>
     </h3>
 </div>
 </div>
 
-{% if location.has_children %}
-<h3>Sub Locations</h3>
-{% include "stock/location_list.html" with locations=location.children %}
+{% if location %}
+{% include 'stock/location_list.html' with children=location.children.all %}
+{% else %}
+{% include 'stock/location_list.html' with children=locations %}
 {% endif %}
 
-{% if location.has_items %}
+<hr>
+
 <table class='table table-striped table-condensed' id='stock-table'>
 </table>
-{% endif %}
 
 <div class='container-fluid' style='float: right;'>
     <button class="btn btn-success" id='item-create'>New Stock Item</span></button>
     <div class="dropdown" style='float: right;'>
-        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Selected
+        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Options
         <span class="caret"></span></button>
         <ul class="dropdown-menu">
             <li><a href="#" id='multi-item-stocktake' title='Stocktake selected stock items'>Stocktake</a></li>
@@ -57,19 +62,22 @@
 <script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
 {% endblock %}
 {% block js_ready %}
-
+{{ block.super }}
     $('#location-create').click(function () {
         launchModalForm("#modal-form",
                         "{% url 'stock-location-create' %}",
                         {
                             data: {
+                                {% if location %}
                                 location: {{ location.id }}
+                                {% endif %}
                             },
                             follow: true
                         });
         return false;
     });
 
+    {% if location %}
     $('#location-edit').click(function() {
         launchModalForm("#modal-form",
                         "{% url 'stock-location-edit' location.id %}",
@@ -86,7 +94,9 @@
                              redirect: "{% url 'stock-index' %}"
                          });
         return false;
-    })
+    });
+
+    {% endif %}
 
     $('#item-create').click(function () {
         launchModalForm("#modal-form",
@@ -96,7 +106,9 @@
                                 $("#stock-table").bootstrapTable('refresh');
                             },
                             data: {
+                                {% if location %}
                                 location: {{ location.id }}
+                                {% endif %}
                             }
                         });
 
@@ -133,6 +145,65 @@
         return false;
     });
 
-    {% include 'stock/stock_table.html' with location=location %}
+    $("#stock-table").bootstrapTable({
+        sortable: true,
+        search: true,
+        method: 'get',
+        pagination: true,
+        rememberOrder: true,
+        {% if location %}
+        queryParams: function(p) {
+            return {
+                location: {{ location.id }}
+            }
+        },
+        {% endif %}
+        columns: [
+            {
+                checkbox: true,
+                title: 'Select',
+                searchable: false,
+            },
+            {
+                field: 'pk',
+                title: 'ID',
+                visible: false,
+            },
+            {
+                field: 'part.name',
+                title: 'Part',
+                sortable: true,
+                formatter: function(value, row, index, field) {
+                    return renderLink(value, row.part.url);
+                }
+            },
+            {% if location == None %}
+            {
+                field: 'location',
+                title: 'Location',
+                sortable: true,
+                formatter: function(value, row, index, field) {
+                    if (row.location) {
+                        return renderLink(row.location.name, row.location.url);
+                    }
+                    else {
+                        return '';
+                    }
+                }
+            },
+            {% endif %}
+            {
+                field: 'quantity',
+                title: 'Stock',
+                sortable: true,
+            },
+            {
+                field: 'status',
+                title: 'Status',
+                sortable: true,
+            }
+        ],
+        url: "{% url 'api-stock-list' %}",
+    });
 
 {% endblock %}
diff --git a/InvenTree/stock/templates/stock/location_list.html b/InvenTree/stock/templates/stock/location_list.html
index ded73cfb3d..b906133e70 100644
--- a/InvenTree/stock/templates/stock/location_list.html
+++ b/InvenTree/stock/templates/stock/location_list.html
@@ -1,5 +1,23 @@
-<ul class="list-group">
-{% for child in locations.all %}
-<li class="list-group-item"><a href="{% url 'stock-location-detail' child.id %}">{{ child.name }}</a> - <i>{{ child.description }}</i></li>
-{% endfor %}
-</ul>
\ No newline at end of file
+{% if children|length > 0 %}
+<hr>
+<div class="panel-group">
+ <div class="panel panel-default">
+   <div class="panel-heading">
+     <h4 class="panel-title">
+       <a data-toggle="collapse" href="#collapse1">Sub-Locations</a><span class='badge'>{{ children|length }}</span>
+     </h4>
+   </div>
+   <div id="collapse1" class="panel-collapse collapse">
+     <div class="panel-body">
+         <ul class="list-group">
+         {% for child in children %}
+        <li class="list-group-item"><a href="{% url 'stock-location-detail' child.id %}">{{ child.name }}</a> - <i>{{ child.description }}</i></li>
+             <span class='badge'>{{ child.partcount }}</span>
+         </li>
+         {% endfor %}
+         </ul>
+     </div>
+   </div>
+ </div>
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/InvenTree/stock/templates/stock/stock_app_base.html b/InvenTree/stock/templates/stock/stock_app_base.html
new file mode 100644
index 0000000000..5afe8e44dc
--- /dev/null
+++ b/InvenTree/stock/templates/stock/stock_app_base.html
@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block sidenav %}
+<div id='stock-tree'></div>
+{% endblock %}
+
+{% block pre_content %}
+{% if item %}
+{% include 'stock/loc_link.html' with location=item.location %}
+{% else %}
+{% include 'stock/loc_link.html' with location=location %}
+{% endif %}
+{% endblock %}
+
+{% block js_ready %}
+    initSideNav();
+{{ block.super }}
+    loadTree("{% url 'api-stock-tree' %}",
+             "#stock-tree");
+
+    $("#toggle-stock-tree").click(function() {
+        toggleSideNav("#sidenav");
+        return false;
+    })
+
+{% endblock %}
\ No newline at end of file
diff --git a/InvenTree/stock/templates/stock/stock_table.html b/InvenTree/stock/templates/stock/stock_table.html
deleted file mode 100644
index d9cb775ac1..0000000000
--- a/InvenTree/stock/templates/stock/stock_table.html
+++ /dev/null
@@ -1,60 +0,0 @@
-$("#stock-table").bootstrapTable({
-    sortable: true,
-    search: true,
-    method: 'get',
-    pagination: true,
-    rememberOrder: true,
-    {% if location %}
-    queryParams: function(p) {
-        return {
-            location: {{ location.id }}
-        }
-    },
-    {% endif %}
-    columns: [
-        {
-            checkbox: true,
-            title: 'Select',
-            searchable: false,
-        },
-        {
-            field: 'pk',
-            title: 'ID',
-            visible: false,
-        },
-        {
-            field: 'part.name',
-            title: 'Part',
-            sortable: true,
-            formatter: function(value, row, index, field) {
-                return renderLink(value, row.part.url);
-            }
-        },
-        {% if location == None %}
-        {
-            field: 'location',
-            title: 'Location',
-            sortable: true,
-            formatter: function(value, row, index, field) {
-                if (row.location) {
-                    return renderLink(row.location.name, row.location.url);
-                }
-                else {
-                    return '';
-                }
-            }
-        },
-        {% endif %}
-        {
-            field: 'quantity',
-            title: 'Stock',
-            sortable: true,
-        },
-        {
-            field: 'status',
-            title: 'Status',
-            sortable: true,
-        }
-    ],
-    url: "{% url 'api-stock-list' %}",
-});
\ No newline at end of file
diff --git a/InvenTree/stock/views.py b/InvenTree/stock/views.py
index 3a28b715d4..1b34312645 100644
--- a/InvenTree/stock/views.py
+++ b/InvenTree/stock/views.py
@@ -20,7 +20,7 @@ from .forms import StocktakeForm
 
 class StockIndex(ListView):
     model = StockItem
-    template_name = 'stock/index.html'
+    template_name = 'stock/location.html'
     context_obect_name = 'locations'
 
     def get_context_data(self, **kwargs):