diff --git a/app/templates/admin/roles/role.html b/app/templates/admin/roles/role.html
new file mode 100644
index 0000000000000000000000000000000000000000..b2a93bf0669d724552b1bcc3d1ac39e2a7be1833
--- /dev/null
+++ b/app/templates/admin/roles/role.html
@@ -0,0 +1,28 @@
+{% import "bootstrap/wtf.html" as wtf %}
+{% extends "base.html" %}
+{% block title %}
+	{% if add_department %}
+		Add Role
+	{% else %}
+		Edit Role
+	{% endif %}
+{% endblock %}
+{% block body %}
+<div class="content-section">
+	<div class="outer">
+		<div class="middle">
+			<div class="inner">
+				<div class="center">
+					{% if add_role %}
+						<h1>Add Role</h1>
+					{% else %}
+						<h1>Edit Role</h1>
+					{% endif %}
+					<br/>
+					{{ wtf.quick_form(form) }}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+{% endblock %}
diff --git a/app/templates/admin/roles/roles.html b/app/templates/admin/roles/roles.html
new file mode 100644
index 0000000000000000000000000000000000000000..32e91aea3a4145239d0f4e392a22075fa1d22cff
--- /dev/null
+++ b/app/templates/admin/roles/roles.html
@@ -0,0 +1,68 @@
+{% import "bootstrap/utils.html" as utils %}
+{% extends "base.html" %}
+{% block title %}Roles{% endblock %}
+{% block body %}
+<div class="content-section">
+	<div class="outer">
+		<div class="middle">
+			<div class="inner">
+				<br/>
+				{{ utils.flashed_messages() }}
+				<br/>
+				<h1 style="text-align:center;">Roles</h1>
+				{% if roles %}
+					<hr class="intro-divider">
+					<div class="center">
+						<table class="table table-striped table-bordered">
+							<thead>
+								<tr>
+									<th width="15%"> Name </th>
+									<th width="40%"> Description </th>
+									<th width="15%"> Employee Count </th>
+									<th width="15%"> Edit </th>
+									<th width="15%"> Delete </th>
+								</tr>
+							</thead>
+							<tbody>
+								{% for role in roles %}
+									<tr>
+										<td> {{ role.name }} </td>
+										<td> {{ role.description }} </td>
+										<td>
+											{% if role.employees %}
+												{{ role.employees.count() }}
+											{% else %}
+												0
+											{% endif %}
+										</td>
+										<td>
+											<a href="{{ url_for('admin.edit_role', id=role.id) }}">
+												<i class="fa fa-pencil"></i> Edit 
+											</a>
+										</td>
+										<td>
+											<a href="{{ url_for('admin.delete_role', id=role.id) }}">
+												<i class="fa fa-trash"></i> Delete 
+											</a>
+										</td>
+									</tr>
+								{% endfor %}
+							</tbody>
+						</table>
+					</div>
+					<div style="text-align: center">
+				{% else %}
+					<div style="text-align: center">
+						<h3> No roles have been added. </h3>
+						<hr class="intro-divider">
+				{% endif %}
+					<a href="{{ url_for('admin.add_role') }}" class="btn btn-default btn-lg">
+						<i class="fa fa-plus"></i>
+						Add Role
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+{% endblock %}