diff --git a/templates/battery/form.html.twig b/templates/battery/form.html.twig
new file mode 100644
index 00000000..29187178
--- /dev/null
+++ b/templates/battery/form.html.twig
@@ -0,0 +1,146 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">Batteries</h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+            	<div class="m-portlet m-portlet--mobile">
+            		<div class="m-portlet__head">
+						<div class="m-portlet__head-caption">
+							<div class="m-portlet__head-title">
+								<span class="m-portlet__head-icon">
+									<i class="fa fa-battery-3"></i>
+								</span>
+								<h3 class="m-portlet__head-text">
+									{% if row is defined %}
+										Edit Battery
+										<small>{{ row.getProductCode() }}</small>
+									{% else %}
+										New Battery
+									{% endif %}
+								</h3>
+							</div>
+						</div>
+					</div>
+                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="post" action="{{ row is defined ? url('role_update_submit', {'id': row.getId()}) : url('role_create_submit') }}">
+						<div class="m-portlet__body">	
+							<div class="form-group m-form__group row no-border">
+								<label class="col-lg-1 col-form-label" data-field="manufacturer">
+									Manufacturer:
+								</label>
+								<div class="col-lg-9">
+									<select class="form-control m-input" id="manufacturer" name="manufacturer">
+										<option value=""></option>
+										{% for manufacturer in manufacturers %}
+											<option value="{{ manufacturer.getID() }}"{{ row is defined and manufacturer.getID() == row.getManufacturer().getID() ? ' selected' }}>{{ manufacturer.getName() }}</option>
+										{% endfor %}
+									</select>
+								</div>
+								<label class="col-lg-1 col-form-label" data-field="model">
+									Model:
+								</label>
+								<div class="col-lg-9">
+									<select class="form-control m-input" id="model" name="model">
+										<option value=""></option>
+										{% for model in models %}
+											<option value="{{ model.getID() }}"{{ row is defined and model.getID() == row.getModel().getID() ? ' selected' }}>{{ model.getName() }}</option>
+										{% endfor %}
+									</select>
+								</div>
+							</div>
+			            </div>
+			            <div class="m-portlet__foot m-portlet__foot--fit">
+							<div class="m-form__actions m-form__actions--solid m-form__actions--right">
+								<div class="row">
+									<div class="col-lg-12">
+										<button type="submit" class="btn btn-success">Submit</button>
+										<a href="{{ url('role_list') }}" class="btn btn-secondary">Cancel</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</form>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		$(function() {
+			$("#row-form").submit(function(e) {
+				var form = $(this);
+
+				e.preventDefault();
+
+				$.ajax({
+					method: "POST",
+					url: form.prop('action'),
+					data: form.serialize()
+				}).done(function(response) {
+					// remove all error classes
+					removeErrors();
+					swal({
+						title: 'Done!',
+						text: 'Your changes have been saved!',
+						type: 'success',
+						onClose: function() {
+							window.location.href = "{{ url('role_list') }}";
+						}
+					});
+				}).fail(function(response) {
+					var errors = response.responseJSON.errors;
+					var firstfield = false;
+
+					// remove all error classes first
+					removeErrors();
+
+					// display errors contextually
+					$.each(errors, function(field, msg) {
+						var formfield = $("[name='" + field + "']");
+						var label = $("label[data-field='" + field + "']");
+						var msgbox = $(".form-control-feedback[data-field='" + field + "']");
+
+						// add error classes to bad fields
+						formfield.addClass('form-control-danger');
+						label.addClass('has-danger');
+						msgbox.html(msg).addClass('has-danger').removeClass('hide');
+
+						// check if this field comes first in DOM
+						var domfield = formfield.get(0);
+
+						if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
+							firstfield = domfield;
+						}
+					});
+
+					// focus on first bad field
+					firstfield.focus();
+
+					// scroll to above that field to make it visible
+					$('html, body').animate({
+				        scrollTop: $(firstfield).offset().top - 200
+				    }, 100);
+				});
+			});
+
+			// remove all error classes
+			function removeErrors() {
+				$(".form-control-danger").removeClass('form-control-danger');
+				$("[data-field]").removeClass('has-danger');
+				$(".form-control-feedback[data-field]").addClass('hide');
+			}
+		});
+	</script>
+{% endblock %}
diff --git a/templates/battery/list.html.twig b/templates/battery/list.html.twig
new file mode 100644
index 00000000..d3cc3cc8
--- /dev/null
+++ b/templates/battery/list.html.twig
@@ -0,0 +1,198 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+	<!-- BEGIN: Subheader -->
+    <div class="m-subheader">
+        <div class="d-flex align-items-center">
+            <div class="mr-auto">
+                <h3 class="m-subheader__title">
+                    Batteries
+                </h3>
+            </div>
+        </div>
+    </div>
+    <!-- END: Subheader -->
+    <div class="m-content">
+        <!--Begin::Section-->
+        <div class="row">
+            <div class="col-xl-12">
+            	<div class="m-portlet m-portlet--mobile">
+                    <div class="m-portlet__body">
+                    	<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+							<div class="row align-items-center">
+								<div class="col-xl-8 order-2 order-xl-1">
+									<div class="form-group m-form__group row align-items-center">
+										<div class="col-md-4">
+											<div class="m-input-icon m-input-icon--left">
+												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="data-rows-search">
+												<span class="m-input-icon__icon m-input-icon__icon--left">
+													<span><i class="la la-search"></i></span>
+												</span>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="col-xl-4 order-1 order-xl-2 m--align-right">
+									<a href="{{ url('battery_create') }}" class="btn btn-focus m-btn m-btn--custom m-btn--icon m-btn--air m-btn--pill">
+										<span>
+											<i class="fa fa-battery-3"></i>
+											<span>New Battery</span>
+										</span>
+									</a>					
+									<div class="m-separator m-separator--dashed d-xl-none"></div>
+								</div>
+							</div>
+						</div>
+                        <!--begin: Datatable -->
+                        <div id="data-rows"></div>
+                        <!--end: Datatable -->
+                    </div>
+                </div>
+			</div>
+		</div>
+	</div>
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		$(function() {
+			var options = {
+				data: {
+					type: 'remote',
+					source: {
+						read: {
+							url: '{{ url("battery_rows") }}',
+							method: 'POST'
+						}
+					},
+					saveState: {
+			            cookie: false,
+			            webstorage: false
+			        },
+					pageSize: 10,
+					serverPaging: true,
+					serverFiltering: true,
+					serverSorting: true
+				},
+				layout: {
+					scroll: true
+				},
+				columns: [
+					{
+						field: 'mfg_name',
+						title: 'Manufacturer',
+						width: 150
+					},
+					{
+						field: 'mdl_name',
+						title: 'Model',
+						width: 150
+					},
+					{
+						field: 'size_name',
+						title: 'Size',
+						width: 100
+					},
+					{
+						field: 'prod_code',
+						title: 'Product Code',
+						width: 150
+					},
+					{
+						field: 'warr_personal',
+						title: 'Personal Warranty',
+						width: 170
+					},
+					{
+						field: 'warr_commercial',
+						title: 'Commercial Warranty',
+						width: 170
+					},
+					{
+						field: 'sell_price',
+						title: 'SRP'
+					},
+					{
+						field: 'res_capacity',
+						title: 'Res. Capacity'
+					},
+					{
+						field: 'length',
+						title: 'Length'
+					},
+					{
+						field: 'width',
+						title: 'Width'
+					},
+					{
+						field: 'height',
+						title: 'Height'
+					},
+					{
+						field: 'total_height',
+						title: 'Total Height'
+					},
+					{
+						field: 'Actions',
+						width: 110,
+						title: 'Actions',
+						sortable: false,
+						overflow: 'visible',
+						locked: {right: 'xl'},
+						template: function (row, index, datatable) {
+							var actions = '';
+                            
+                            if (row.meta.update_url != '') {
+                                actions += '<a href="' + row.meta.update_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill btn-edit" data-id="' + row.username + '" title="Edit"><i class="la la-edit"></i></a>';
+                            }
+
+                            if (row.meta.delete_url != '') {
+								actions += '<a href="' + row.meta.delete_url + '" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill btn-delete" data-id="' + row.username + '" title="Delete"><i class="la la-trash"></i></a>';
+							}
+							
+							return actions;
+						},
+					}
+				],
+				search: {
+					onEnter: false,
+					input: $('#data-rows-search'),
+					delay: 400
+				}
+			};
+
+			var table = $("#data-rows").mDatatable(options);
+
+			$(document).on('click', '.btn-delete', function(e) {
+				var url = $(this).prop('href');
+				var id = $(this).data('id');
+				var btn = $(this);
+
+				e.preventDefault();
+
+				swal({
+					title: 'Confirmation',
+					html: 'Are you sure you want to delete <strong>' + id + '</strong>?',
+					type: 'warning',
+					showCancelButton: true
+				}).then((result) => {
+					if (result.value) {
+						$.ajax({
+							method: "DELETE",
+							url: url
+						}).done(function(response) {
+							table.row(btn.parents('tr')).remove();
+							table.reload();
+						}).fail(function() {
+							swal({
+								title: 'Whoops',
+								text: 'An error occurred while deleting this item. Please contact support.',
+								type: 'error'
+							});
+						});
+					}
+				});
+			});
+		});
+	</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/role/form.html.twig b/templates/role/form.html.twig
index 39686605..af3c2c7c 100644
--- a/templates/role/form.html.twig
+++ b/templates/role/form.html.twig
@@ -24,7 +24,7 @@
 								<h3 class="m-portlet__head-text">
 									{% if row is defined %}
 										Edit Role
-										<small>{{ row.getId() }}</small>
+										<small>{{ row.getID() }}</small>
 									{% else %}
 										New Role
 									{% endif %}
@@ -32,14 +32,14 @@
 							</div>
 						</div>
 					</div>
-                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="post" action="{{ row is defined ? url('role_update_submit', {'id': row.getId()}) : url('role_create_submit') }}">
+                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="post" action="{{ row is defined ? url('role_update_submit', {'id': row.getID()}) : url('role_create_submit') }}">
 						<div class="m-portlet__body">	
 							<div class="form-group m-form__group row no-border">
 								<label class="col-lg-3 col-form-label" data-field="id">
 									Role ID:
 								</label>
 								<div class="col-lg-9">
-									<input type="text" name="id" class="form-control m-input" value="{{ values.id is defined ? values.id : (row is defined ? row.getId()) }}">
+									<input type="text" name="id" class="form-control m-input" value="{{ row is defined ? row.getID() }}">
 									<div class="form-control-feedback hide" data-field="id"></div>
 									<span class="m-form__help">Unique identifier for this role</span>
 								</div>
@@ -49,13 +49,13 @@
 									Name:
 								</label>
 								<div class="col-lg-9">
-									<input type="text" name="name" class="form-control m-input" value="{{ values.name is defined ? values.name : (row is defined ? row.getName()) }}">
+									<input type="text" name="name" class="form-control m-input" value="{{ row is defined ? row.getName() }}">
 									<div class="form-control-feedback hide" data-field="name"></div>
 									<span class="m-form__help">Display name for this role</span>
 								</div>
 							</div>	
 							<div class="form-group m-form__group row">
-								<label class="col-lg-3 col-form-label" data-field="name">
+								<label class="col-lg-3 col-form-label" data-field="acl">
 									Access Levels:
 								</label>
 								<div class="col-lg-9">