From 7fcb829e5468e65c3c941ebbc40495a4555ad8fe Mon Sep 17 00:00:00 2001
From: Leon Harris <leon@productable.com>
Date: Mon, 25 Nov 2013 15:51:14 +0000
Subject: [PATCH] updated templated to use CDN bootstrap3, CDN jquery, added
 logo to navigation, minor layout changes requires
 http://github.com/tzangms/django-bootstrap-form

---
 helpdesk/settings.py                          |  2 +
 helpdesk/static/helpdesk/helpdesk-extend.css  | 51 ++++++++++
 helpdesk/templates/helpdesk/attribution.html  |  2 +-
 helpdesk/templates/helpdesk/base.html         | 36 +++----
 .../helpdesk/confirm_delete_saved_query.html  |  2 +-
 .../templates/helpdesk/create_ticket.html     | 20 ++--
 helpdesk/templates/helpdesk/dashboard.html    | 70 ++++++++------
 .../templates/helpdesk/delete_ticket.html     |  2 +-
 helpdesk/templates/helpdesk/edit_ticket.html  | 19 ++--
 .../templates/helpdesk/email_ignore_add.html  |  2 +-
 .../templates/helpdesk/email_ignore_del.html  |  2 +-
 .../templates/helpdesk/email_ignore_list.html |  2 +-
 .../templates/helpdesk/followup_edit.html     |  2 +-
 helpdesk/templates/helpdesk/kb_category.html  |  7 +-
 helpdesk/templates/helpdesk/kb_index.html     |  7 +-
 helpdesk/templates/helpdesk/kb_item.html      |  7 +-
 helpdesk/templates/helpdesk/navigation.html   | 38 +++++---
 helpdesk/templates/helpdesk/public_base.html  | 14 +--
 .../helpdesk/public_change_language.html      |  2 +-
 .../templates/helpdesk/public_homepage.html   | 87 ++++++++++-------
 .../templates/helpdesk/public_view_form.html  |  2 +-
 .../helpdesk/public_view_ticket.html          | 14 +--
 .../helpdesk/registration/login.html          | 25 +++--
 .../templates/helpdesk/report_output.html     |  8 +-
 helpdesk/templates/helpdesk/rss_list.html     |  6 +-
 helpdesk/templates/helpdesk/ticket.html       | 14 +--
 .../templates/helpdesk/ticket_cc_add.html     |  2 +-
 .../templates/helpdesk/ticket_cc_del.html     |  2 +-
 .../templates/helpdesk/ticket_cc_list.html    |  2 +-
 .../helpdesk/ticket_dependency_add.html       |  2 +-
 .../helpdesk/ticket_dependency_del.html       |  2 +-
 .../templates/helpdesk/ticket_desc_table.html | 16 ++--
 helpdesk/templates/helpdesk/ticket_list.html  | 96 +++++++++++++------
 .../templates/helpdesk/user_settings.html     |  2 +-
 34 files changed, 379 insertions(+), 188 deletions(-)
 create mode 100644 helpdesk/static/helpdesk/helpdesk-extend.css

diff --git a/helpdesk/settings.py b/helpdesk/settings.py
index 1645d5c8..aebcbd58 100644
--- a/helpdesk/settings.py
+++ b/helpdesk/settings.py
@@ -37,6 +37,8 @@ HELPDESK_REDIRECT_TO_LOGIN_BY_DEFAULT = getattr(settings, 'HELPDESK_REDIRECT_TO_
 # customize helpdesk name on a few pages, i.e., your organization.
 HELPDESK_PREPEND_ORG_NAME = getattr(settings, 'HELPDESK_PREPEND_ORG_NAME', False)
 
+HELPDESK_ORG_LOGO = getattr(settings, 'HELPDESK_ORG_LOGO', False)
+
 # show knowledgebase links?
 HELPDESK_KB_ENABLED = getattr(settings, 'HELPDESK_KB_ENABLED', True)
 
diff --git a/helpdesk/static/helpdesk/helpdesk-extend.css b/helpdesk/static/helpdesk/helpdesk-extend.css
new file mode 100644
index 00000000..77826631
--- /dev/null
+++ b/helpdesk/static/helpdesk/helpdesk-extend.css
@@ -0,0 +1,51 @@
+/*
+Bootstrap overrides
+*/
+
+.thumbnail.filterBox {
+    display: none;
+    float: left;
+    border: solid #ccc 1px;
+    padding: 10px;
+    margin: 4px;
+    max-width: 24%;
+    min-height: 200px;
+}
+
+.thumbnail.filterBoxShow {
+    display: block;
+}
+
+.filterBox label {
+    clear: both;
+    display: block;
+}
+
+.filterBox .filterHelp {
+    color: #aaa;
+    font-size: 0.8em;
+    clear: both;
+}
+
+#searchtabs {margin-bottom: 20px;}
+
+.row_tablehead {background-color: #dbd5d9;}
+
+.errorlist {list-style: none; }
+.errorlist {padding: 0;}
+.has-error .input-group input, .has-error .input-group select,  .has-error .input-group textarea {border-color: #b94a48}
+
+
+
+/*
+Add your custom styles here
+*/
+#footer {
+    border-top: 2px solid #AAAAAA;
+    margin-top: 20px;
+    padding: 10px 0;
+}
+#helpdesk-body {padding-top: 100px;}
+#header .navbar-nav {
+    padding-top: 25px;
+}
\ No newline at end of file
diff --git a/helpdesk/templates/helpdesk/attribution.html b/helpdesk/templates/helpdesk/attribution.html
index 461621e3..1e4a1c64 100644
--- a/helpdesk/templates/helpdesk/attribution.html
+++ b/helpdesk/templates/helpdesk/attribution.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-{% trans "Powered by <a href='https://github.com/rossp/django-helpdesk'>django-helpdesk</a>." %}
+{% trans "<a href='https://github.com/rossp/django-helpdesk'>django-helpdesk</a>." %}
 {% if helpdesk_settings.HELPDESK_SUPPORT_PERSON %}
 <p>{% trans "For technical support please contact:" %} <a href='mailto:{{ helpdesk_settings.HELPDESK_SUPPORT_PERSON }}'>{{ helpdesk_settings.HELPDESK_SUPPORT_PERSON }}</a></p>
 {% endif %}
diff --git a/helpdesk/templates/helpdesk/base.html b/helpdesk/templates/helpdesk/base.html
index c4732afd..e385059b 100644
--- a/helpdesk/templates/helpdesk/base.html
+++ b/helpdesk/templates/helpdesk/base.html
@@ -8,14 +8,18 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>{% block helpdesk_title %}Helpdesk{% endblock %} :: {% trans "Powered by django-helpdesk" %}</title>
-        <script src='{{ STATIC_URL }}helpdesk/jquery-1.5.min.js' type='text/javascript' language='javascript'></script>
+
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script src='{{ STATIC_URL }}helpdesk/jquery-ui-1.8.9.custom.min.js' type='text/javascript' language='javascript'></script>
         {% comment %}
         <script src='{{ STATIC_URL }}helpdesk/jquery.translate-debug-all.js' type='text/javascript' language='javascript'></script>
         {% endcomment %}
-        <link rel='stylesheet' href='{{ STATIC_URL }}helpdesk/helpdesk.css' type='text/css'  media="screen" />
-        <link rel='stylesheet' href='{{ STATIC_URL }}helpdesk/helpdesk-print.css' type='text/css' media="print" />
-        <link rel='stylesheet' href='{{ STATIC_URL }}helpdesk/jquery-smoothness-theme/jquery-ui-1.8.9.custom.css' type='text/css' />
+        <link rel='stylesheet' href='{{ STATIC_URL }}helpdesk/helpdesk-extend.css' type='text/css'  media="screen" >
+
+        <!--link rel='stylesheet' href='{{ STATIC_URL }}helpdesk/helpdesk-print.css' type='text/css' media="print" /-->
+        <!--link rel='stylesheet' href='{{ STATIC_URL }}helpdesk/jquery-smoothness-theme/jquery-ui-1.8.9.custom.css' type='text/css' /-->
+        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
+        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
         <link rel='alternate' href='{% url 'helpdesk_rss_user' user.username %}' type='application/rss+xml' title='{% trans "My Open Tickets" %}' />
         <link rel='alternate' href='{% url 'helpdesk_rss_activity' %}' type='application/rss+xml' title='{% trans "All Recent Activity" %}' />
         <link rel='alternate' href='{% url 'helpdesk_rss_unassigned' %}' type='application/rss+xml' title='{% trans "Unassigned Tickets" %}' />
@@ -94,26 +98,26 @@
 
         {% block helpdesk_head %}{% endblock %}
     </head>
-    <body>
-        <div id='container'>
-            <div id='header'>
-                <h1>{% trans "Helpdesk" %}</h1>
+    <body id="helpdesk-body">
+        <div id='container' class="container">
+            <div id='header' class="row">
+                <h1>{% block h1_title %}{% trans "Helpdesk" %}{% endblock %}</h1>
                 {% include "helpdesk/navigation.html" %}
             </div>
 
-            <div id='body'>
+            <div id='body' class="row">
                 {% block helpdesk_body %}{% endblock %}
             </div>
 
-            <div id='footer'>
-                <p>{% include "helpdesk/attribution.html" %}
-                <a href='{% url 'helpdesk_rss_index' %}'><img src='{{ STATIC_URL }}helpdesk/rss_icon.png' width='14' height='14' alt='{% trans "RSS Icon" %}' title='{% trans "RSS Feeds" %}' border='0' />{% trans "RSS Feeds" %}</a>
-                {% if helpdesk_settings.HELPDESK_FOOTER_SHOW_API_LINK %}<a href='{% url 'helpdesk_api_help' %}'>{% trans "API" %}</a>{% endif %}
-                <a href='{% url 'helpdesk_user_settings' %}'>{% trans "User Settings" %}</a>
+            <div id='footer' class="row">
+                <div class="col-md-2">{% include "helpdesk/attribution.html" %}</div>
+                <div class="col-md-2"><a href='{% url 'helpdesk_rss_index' %}'><img src='{{ STATIC_URL }}helpdesk/rss_icon.png' width='14' height='14' alt='{% trans "RSS Icon" %}' title='{% trans "RSS Feeds" %}' border='0' />{% trans "RSS Feeds" %}</a></div>
+                {% if helpdesk_settings.HELPDESK_FOOTER_SHOW_API_LINK %}<div class="col-md-2"><a href='{% url 'helpdesk_api_help' %}'>{% trans "API" %}</a></div>{% endif %}
+                <div class="col-md-2"><a href='{% url 'helpdesk_user_settings' %}'>{% trans "User Settings" %}</a></div>
                 {% if helpdesk_settings.HELPDESK_FOOTER_SHOW_CHANGE_LANGUAGE_LINK %}
-                <a href='{% url 'helpdesk_public_change_language' %}?return_to={{ request.path }}'>{% trans "Change Language" %}</a>
+                <div class="col-md-2"><a href='{% url 'helpdesk_public_change_language' %}?return_to={{ request.path }}'>{% trans "Change Language" %}</a></div>
                 {% endif %}
-                {% if user.is_superuser %}<a href='{% url 'helpdesk_system_settings' %}'>{% trans "System Settings" %}</a>{% endif %}</p>
+                {% if user.is_superuser %}<div class="col-md-2"><a href='{% url 'helpdesk_system_settings' %}'>{% trans "System Settings" %}</a></div>{% endif %}
             </div>
         </div>
         {% include "helpdesk/debug.html" %}
diff --git a/helpdesk/templates/helpdesk/confirm_delete_saved_query.html b/helpdesk/templates/helpdesk/confirm_delete_saved_query.html
index ffd33d5b..4b2b5787 100644
--- a/helpdesk/templates/helpdesk/confirm_delete_saved_query.html
+++ b/helpdesk/templates/helpdesk/confirm_delete_saved_query.html
@@ -14,5 +14,5 @@
 
 <p><a href='../'>{% trans "No, Don't Delete It" %}</a></p>
 
-<form method='post' action='./'><input type='submit' value='{% trans "Yes - Delete It" %}' />{% csrf_token %}</form>
+<form method='post' action='./'><input class="btn btn-primary" type='submit' value='{% trans "Yes - Delete It" %}' />{% csrf_token %}</form>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/create_ticket.html b/helpdesk/templates/helpdesk/create_ticket.html
index 1d710d21..f3caf81c 100644
--- a/helpdesk/templates/helpdesk/create_ticket.html
+++ b/helpdesk/templates/helpdesk/create_ticket.html
@@ -1,16 +1,19 @@
-{% extends "helpdesk/base.html" %}{% load i18n %}
+{% extends "helpdesk/base.html" %}{% load i18n bootstrap %}
 
 {% block helpdesk_title %}{% trans "Create Ticket" %}{% endblock %}
 
 {% block helpdesk_body %}
-{% blocktrans %}<h2>Submit a Ticket</h2>
+<div class="col-xs-6">
+<div class="panel panel-default">
+
+<div class="panel-body">{% blocktrans %}<h2>Submit a Ticket</h2>
 
 <p>Unless otherwise stated, all fields are required. Please provide as descriptive a title and description as possible.</p>{% endblocktrans %}
 
 <form method='post' action='./' enctype='multipart/form-data'>
 <fieldset>
-    <dl>
-        {% for field in form %}
+    {{ form|bootstrap }}
+        {% comment %}{% for field in form %}
             {% if field.is_hidden %}
                 {{ field }}
             {% else %}
@@ -20,12 +23,15 @@
                 {% if field.help_text %}<dd class='form_help_text'>{% trans field.help_text %}</dd>{% endif %}
             {% endif %}
         {% endfor %}
-    </dl>
+        {% endcomment %}
     
-    <div class='buttons'>
-        <input type='submit' value='{% trans "Submit Ticket" %}' />
+    <div class='buttons form-group'>
+        <input type='submit' class="btn btn-primary" value='{% trans "Submit Ticket" %}' />
     </div>
 </fieldset>
 
 {% csrf_token %}</form>
+</div>
+</div>
+</div>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/dashboard.html b/helpdesk/templates/helpdesk/dashboard.html
index ef2f9082..4e4325a0 100644
--- a/helpdesk/templates/helpdesk/dashboard.html
+++ b/helpdesk/templates/helpdesk/dashboard.html
@@ -5,10 +5,20 @@
 {% endblock %}
 {% block helpdesk_body %}
 
-<div style='float:left; width:auto; margin-right:10px;'>
-<table width='100%'>
+<div class="alert alert-warning">
+{% if helpdesk_settings.HELPDESK_CUSTOM_WELCOME %}
+<p>{% trans "Welcome to your Helpdesk Dashboard! From here you can quickly see tickets submitted by you, tickets you are working on, and those tickets that have no owner." %}</p>
+{% else %}
+<p>{% trans "Welcome to your Helpdesk Dashboard! From here you can quickly see your own tickets, and those tickets that have no owner." %}</p>
+{% endif %}
+</div>
+
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='5'>{% trans "Helpdesk Summary" %}</td></tr>
 <tr class='row_columnheads'><th>{% trans "Queue" %}</th><th>{% trans "Open" %}</th><th>{% trans "Resolved" %}</th><th>{% trans "Closed" %}</th></tr>
+</thead>
+<tbody>
 {% for queue in dash_tickets %}
 <tr class='row_{% cycle odd,even %} row_hover '>
 <th><a href='{% url 'helpdesk_list' %}?queue={{ queue.queue }}&status=1&status=2'>{{ queue.name }}</a></th>
@@ -17,46 +27,43 @@
 <td align="center">{% if queue.closed %}<a href='{% url 'helpdesk_list' %}?queue={{ queue.queue }}&status=4'>{% endif %}{{ queue.closed }}{% if queue.closed %}</a>{% endif %}</td>
 </tr>
 {% endfor %}
+</tbody>
 </table>
-</div>
 
-<div>
-{% if helpdesk_settings.HELPDESK_CUSTOM_WELCOME %}
-<p>{% trans "Welcome to your Helpdesk Dashboard! From here you can quickly see tickets submitted by you, tickets you are working on, and those tickets that have no owner." %}</p>
-{% else %}
-<p>{% trans "Welcome to your Helpdesk Dashboard! From here you can quickly see your own tickets, and those tickets that have no owner. Why not pick up an orphan ticket and sort it out for a customer?" %}</p>
-{% endif %}
-</div>
+
+
 
 {% if helpdesk_settings.HELPDESK_DASHBOARD_BASIC_TICKET_STATS %}
 <br style='clear: both;' />
 
-<table width='100%'>
-
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead' style="color: #fbff00;"><td colspan='2'><i>{% trans "Current Ticket Stats" %}</i></td></tr>
 <tr><td colspan='2'>- {% trans "Average number of days until ticket is closed (all tickets): " %}<strong style="color: red;">{{ basic_ticket_stats.average_nbr_days_until_ticket_closed }}</strong>.</td></tr> 
 <tr><td colspan='2'>- {% trans "Average number of days until ticket is closed (tickets opened in last 60 days): " %}<strong style="color: red;">{{ basic_ticket_stats.average_nbr_days_until_ticket_closed_last_60_days }}</strong>. 
 {% trans "Click" %} <strong><a href="{% url 'helpdesk_report_index' %}daysuntilticketclosedbymonth">here</a></strong> {% trans "for detailed average by month." %} </td></tr>
 <tr><td colspan='2'>- {% trans "Distribution of open tickets, grouped by time period:" %}</td></tr>
 <tr class='row_columnheads'><th>{% trans "Days since opened" %}</th><th>{% trans "Number of open tickets" %}</th></tr>
-
+</thead>
+<tbody>
 {% for entry in basic_ticket_stats.open_ticket_stats %}
 <tr class='row_{% cycle odd,even %} row_hover'>
 <th style="padding-left: 20px;">{{ entry.0 }}</th>
 <td style="padding-left: 20px;"><span style="color: {{ entry.2 }};">{% if entry.1 > 0 %}<a href="{% url 'helpdesk_list' %}?{{ entry.3 }}">{{ entry.1 }}</a>{% else %}{{ entry.1 }}{% endif %}</span></td>
 </tr>
 {% endfor %}
-
+</tbody>
 </table>
 {% endif %}
 
 
 {% if all_tickets_reported_by_current_user %}
-<br style='clear: both;' />
-
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='6'>{% trans "All Tickets submitted by you" %}</td></tr>
 <tr class='row_columnheads'><th>#</th><th>{% trans "Pr" %}</th><th>{% trans "Title" %}</th><th>{% trans "Queue" %}</th><th>{% trans "Status" %}</th><th>{% trans "Last Update" %}</th></tr>
+</thead>
+<tbody>
 {% for ticket in all_tickets_reported_by_current_user %}
 <tr class='row_{% cycle odd,even %} row_hover'>
 <th><a href='{{ ticket.get_absolute_url }}'>{{ ticket.ticket }}</a></th>
@@ -67,16 +74,16 @@
 <td><span title='{{ ticket.modified|date:"r" }}'>{{ ticket.modified|timesince }}</span></td>
 </tr>
 {% endfor %}
+</tbody>
 </table>
 {% endif %}
 
-
-
-<br style='clear: both;' />
-
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='6'>{% trans "Open Tickets assigned to you (you are working on this ticket)" %}</td></tr>
 <tr class='row_columnheads'><th>#</th><th>{% trans "Pr" %}</th><th>{% trans "Title" %}</th><th>{% trans "Queue" %}</th><th>{% trans "Status" %}</th><th>{% trans "Last Update" %}</th></tr>
+</thead>
+<tbody>
 {% for ticket in user_tickets %}
 <tr class='row_{% cycle odd,even %} row_hover'>
 <th><a href='{{ ticket.get_absolute_url }}'>{{ ticket.ticket }}</a></th>
@@ -88,15 +95,17 @@
 </tr>
 {% endfor %}
 {% if not user_tickets %}
-<tr class='row_odd'><td colspan='5'>{% trans "You have no tickets assigned to you." %}</td></tr>
+<tr class='row_odd'><td colspan='6'>{% trans "You have no tickets assigned to you." %}</td></tr>
 {% endif %}
+</tbody>
 </table>
 
-<br style='clear: both;' />
-
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='6'>{% trans "Unassigned Tickets" %} {% trans "(pick up a ticket if you start to work on it)" %}</td></tr>
 <tr class='row_columnheads'><th>#</th><th>{% trans "Pr" %}</th><th>{% trans "Title" %}</th><th>{% trans "Queue" %}</th><th>{% trans "Created" %}</th><th>&nbsp;</th></tr>
+</thead>
+<tbody>
 {% for ticket in unassigned_tickets %}
 <tr class='row_{% cycle odd,even %} row_hover'>
 <th><a href='{{ ticket.get_absolute_url }}'>{{ ticket.ticket }}</a></th>
@@ -110,15 +119,17 @@
 {% if not unassigned_tickets %}
 <tr class='row_odd'><td colspan='6'>{% trans "There are no unassigned tickets." %}</td></tr>
 {% endif %}
+</tbody>
 </table>
 
 
 {% if user_tickets_closed_resolved %}
-<br style='clear: both;' />
-
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='6'>{% trans "Closed & resolved Tickets you used to work on" %}</td></tr>
 <tr class='row_columnheads'><th>#</th><th>{% trans "Pr" %}</th><th>{% trans "Title" %}</th><th>{% trans "Queue" %}</th><th>{% trans "Status" %}</th><th>{% trans "Last Update" %}</th></tr>
+</thead>
+<tbody>
 {% for ticket in user_tickets_closed_resolved %}
 <tr class='row_{% cycle odd,even %} row_hover'>
 <th><a href='{{ ticket.get_absolute_url }}'>{{ ticket.ticket }}</a></th>
@@ -129,6 +140,7 @@
 <td><span title='{{ ticket.modified|date:"r" }}'>{{ ticket.modified|timesince }}</span></td>
 </tr>
 {% endfor %}
+</tbody>
 </table>
 {% endif %}
 
diff --git a/helpdesk/templates/helpdesk/delete_ticket.html b/helpdesk/templates/helpdesk/delete_ticket.html
index 9b3ccd34..c801f714 100644
--- a/helpdesk/templates/helpdesk/delete_ticket.html
+++ b/helpdesk/templates/helpdesk/delete_ticket.html
@@ -10,5 +10,5 @@
 
 <p><a href='../'>{% trans "No, Don't Delete It" %}</a></p>
 
-<form method='post' action='./'><input type='submit' value='{% trans "Yes - Delete It" %}' />{% csrf_token %}</form>
+<form method='post' action='./'><input class="btn btn-primary" type='submit' value='{% trans "Yes - Delete It" %}' />{% csrf_token %}</form>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/edit_ticket.html b/helpdesk/templates/helpdesk/edit_ticket.html
index 22b0d647..0639df22 100644
--- a/helpdesk/templates/helpdesk/edit_ticket.html
+++ b/helpdesk/templates/helpdesk/edit_ticket.html
@@ -1,9 +1,12 @@
-{% extends "helpdesk/base.html" %}{% load i18n %}
+{% extends "helpdesk/base.html" %}{% load i18n bootstrap %}
 
 {% block helpdesk_title %}{% trans "Edit Ticket" %}{% endblock %}
 
 {% block helpdesk_body %}
-{% blocktrans %}<h2>Edit a Ticket</h2>
+<div class="col-xs-6">
+<div class="panel panel-default">
+
+<div class="panel-body">{% blocktrans %}<h2>Edit a Ticket</h2>
 
 <p>Unless otherwise stated, all fields are required. Please provide as descriptive a title and description as possible.</p>
 
@@ -11,7 +14,8 @@
 
 <form method='post' action='./'>
 <fieldset>
-    <dl>
+    {{ form|bootstrap }}
+    {% comment %}
         {% for field in form %}
             {% if field.is_hidden %}
                 {{ field }}
@@ -23,11 +27,14 @@
             {% endif %}
         {% endfor %}
     </dl>
-    
-    <div class='buttons'>
-        <input type='submit' value='{% trans "Save Changes" %}' />
+    {% endcomment %}
+    <div class='buttons form-group'>
+        <input type='submit' class="btn btn-primary" value='{% trans "Save Changes" %}' />
     </div>
 </fieldset>
 
 {% csrf_token %}</form>
+    </div>
+  </div>
+</div>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/email_ignore_add.html b/helpdesk/templates/helpdesk/email_ignore_add.html
index f449a107..68d94adc 100644
--- a/helpdesk/templates/helpdesk/email_ignore_add.html
+++ b/helpdesk/templates/helpdesk/email_ignore_add.html
@@ -20,7 +20,7 @@
     {% endfor %}</dl>
 </fieldset>
 
-<input type='submit' value='{% trans "Ignore E-Mail Address" %}' />
+<input class="btn btn-primary" type='submit' value='{% trans "Ignore E-Mail Address" %}' />
 
 {% csrf_token %}</form>
 
diff --git a/helpdesk/templates/helpdesk/email_ignore_del.html b/helpdesk/templates/helpdesk/email_ignore_del.html
index 2bb15e50..9f3fb0d5 100644
--- a/helpdesk/templates/helpdesk/email_ignore_del.html
+++ b/helpdesk/templates/helpdesk/email_ignore_del.html
@@ -10,5 +10,5 @@
 
 <p><a href='../../'>{% trans "Keep Ignoring It" %}</a></p>
 
-<form method='post' action='./'><input type='submit' value='{% trans "Stop Ignoring It" %}' />{% csrf_token %}</form>
+<form method='post' action='./'><input class="btn btn-primary" type='submit' value='{% trans "Stop Ignoring It" %}' />{% csrf_token %}</form>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/email_ignore_list.html b/helpdesk/templates/helpdesk/email_ignore_list.html
index f72286e2..2451e082 100644
--- a/helpdesk/templates/helpdesk/email_ignore_list.html
+++ b/helpdesk/templates/helpdesk/email_ignore_list.html
@@ -7,7 +7,7 @@
 
 <p>The following e-mail addresses are currently being ignored by the incoming e-mail processor. You can <a href='add/'>add a new e-mail address to the list</a> or delete any of the items below as required.</p>{% endblocktrans %}
 
-<table width='100%'>
+<table class="table table-hover table-bordered">
 <thead>
 <tr class='row_tablehead'><td colspan='5'>{% trans "Ignored E-Mail Addresses" %}</td></tr>
 <tr class='row_columnheads'><th>{% trans "Name" %}</th><th>{% trans "E-Mail Address" %}</th><th>{% trans "Date Added" %}</th><th>{% trans "Queues" %}</th><th>{% trans "Keep in mailbox?" %}</th><th>{% trans "Delete" %}</th></tr>
diff --git a/helpdesk/templates/helpdesk/followup_edit.html b/helpdesk/templates/helpdesk/followup_edit.html
index f7ba1eb0..5ca542e9 100644
--- a/helpdesk/templates/helpdesk/followup_edit.html
+++ b/helpdesk/templates/helpdesk/followup_edit.html
@@ -25,6 +25,6 @@
                 <p>If the status was changed, what was it changed to?</p>
         </dl>
         </fieldset>
-        <p><input type="submit" value="Submit"></p>{% csrf_token %}
+        <p><input class="btn btn-primary" type="submit" value="Submit"></p>{% csrf_token %}
     </form>
 {% endblock helpdesk_body %}
\ No newline at end of file
diff --git a/helpdesk/templates/helpdesk/kb_category.html b/helpdesk/templates/helpdesk/kb_category.html
index 7df3a601..6a4a8bed 100644
--- a/helpdesk/templates/helpdesk/kb_category.html
+++ b/helpdesk/templates/helpdesk/kb_category.html
@@ -7,14 +7,17 @@
 
 <p>{{ category.description }}</p>
 
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='3'>{% blocktrans with category.title as kbcat %}Knowledgebase Category: {{ kbcat }}{% endblocktrans %}</td></tr>
 <tr class='row_columnheads'><th colspan='3'>{% trans "Article" %}</th></tr>
-
+</thead>
+<tbody>
 {% for item in items %}
 <tr class='row_even row_hover'><th><a href='{{ item.get_absolute_url }}'>{{ item.title }}</a></th><td>Rating: {{ item.score }}</td><td>Last Update: {{ item.last_updated|timesince }} ago</td></tr>
 <tr class='row_odd'><td colspan='3'>{{ item.question }}</td></tr>
 {% endfor %}
+</tbody>
 </table>
 
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/kb_index.html b/helpdesk/templates/helpdesk/kb_index.html
index 70512939..30f1143b 100644
--- a/helpdesk/templates/helpdesk/kb_index.html
+++ b/helpdesk/templates/helpdesk/kb_index.html
@@ -5,14 +5,17 @@
 
 <p>{% trans "We have listed a number of knowledgebase articles for your perusal in the following categories. Please check to see if any of these articles address your problem prior to opening a support ticket." %}</p>
 
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td>{% trans "Knowledgebase Categories" %}</td></tr>
 <tr class='row_columnheads'><th>{% trans "Category" %}</th></tr>
-
+</thead>
+<tbody>
 {% for category in kb_categories %}
 <tr class='row_even row_hover'><th><a href='{{ category.get_absolute_url }}'>{{ category.title }}</a></th></tr>
 <tr class='row_odd'><td>{{ category.description }}</td></tr>
 {% endfor %}
+</tbody>
 </table>
 
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/kb_item.html b/helpdesk/templates/helpdesk/kb_item.html
index 251b84e1..6f7d4e66 100644
--- a/helpdesk/templates/helpdesk/kb_item.html
+++ b/helpdesk/templates/helpdesk/kb_item.html
@@ -3,11 +3,14 @@
 {% block helpdesk_body %}
 <h2>{% blocktrans with item.title as item %}Knowledgebase: {{ item }}{% endblocktrans %}</h2>
 
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td>{{ item.title }}</td></tr>
-
+</thead>
+<tbody>
 <tr class='row_even row_hover'><th>{{ item.question }}</th></tr>
 <tr class='row_odd'><td>{{ item.answer|markdown }}</td></tr>
+</tbody>
 </table>
 
 <p>{% blocktrans with item.category.title as category_title and item.category.get_absolute_url as category_url %}View <a href='{{ category_url }}'>other <em>{{ category_title }}</em> articles</a>, or continue <a href='../'>viewing other knowledgebase articles</a>.{% endblocktrans %}</p>
diff --git a/helpdesk/templates/helpdesk/navigation.html b/helpdesk/templates/helpdesk/navigation.html
index dab4b4ca..20fcdaf2 100644
--- a/helpdesk/templates/helpdesk/navigation.html
+++ b/helpdesk/templates/helpdesk/navigation.html
@@ -1,17 +1,19 @@
 {% load i18n %}{% load url from future %}
 {% if helpdesk_settings.HELPDESK_NAVIGATION_ENABLED and user.is_authenticated or user.is_staff %}
-<ul id="dropdown">
-    <li><a href='{% url 'helpdesk_dashboard' %}'>{% trans "Dashboard" %}</a></li>
-    <li><a href='{% url 'helpdesk_list' %}'>{% trans "Tickets" %}</a></li>
-    <li><a href='{% url 'helpdesk_submit' %}'>{% trans "New Ticket" %}</a></li>
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+{% if helpdesk_settings.HELPDESK_ORG_LOGO %}<img class="navbar-brand" src="{{ helpdesk_settings.HELPDESK_ORG_LOGO }}" />{% endif %}
+<ul id="dropdown" class="nav navbar-nav">
+    <li><a href='{% url 'helpdesk_dashboard' %}'><span class="glyphicon glyphicon-dashboard"></span> {% trans "Dashboard" %}</a></li>
+    <li><a href='{% url 'helpdesk_list' %}'><span class="glyphicon glyphicon-tags"></span> {% trans "Tickets" %}</a></li>
+    <li><a href='{% url 'helpdesk_submit' %}'><span class="glyphicon glyphicon-plus"></span> {% trans "New Ticket" %}</a></li>
     {% if helpdesk_settings.HELPDESK_NAVIGATION_STATS_ENABLED %}
-    <li><a href='{% url 'helpdesk_report_index' %}'>{% trans "Stats" %}</a></li>
+    <li><a href='{% url 'helpdesk_report_index' %}'><span class="glyphicon glyphicon-stats"></span> {% trans "Stats" %}</a></li>
     {% endif %}
     {% if helpdesk_settings.HELPDESK_KB_ENABLED_STAFF %}
-    <li><a href='{% url 'helpdesk_kb_index' %}'>{% trans "Knowledgebase" %}</a></li>
+    <li><a href='{% url 'helpdesk_kb_index' %}'><span class="glyphicon glyphicon-tree-deciduous"></span> {% trans "Knowledgebase" %}</a></li>
     {% endif %}
     {% if user_saved_queries_ %}
-        <li class="headerlink"><a>{% trans "Load Saved Query" %}</a>
+        <li class="headerlink"><a><span class="glyphicon glyphicon-filter"></span> {% trans "Load Saved Query" %}</a>
             <ul>
              {% for q in user_saved_queries_ %}
                 <li><a href="{% url 'helpdesk_list' %}?saved_query={{ q.id }}">{{ q.title }}
@@ -22,11 +24,24 @@
            </ul>
        </li>
     {% endif %}
-    <li><a href='{% url 'logout' %}'>{% trans "Logout" %}</a></li>
-    {% if not query %}<li><form id='searchform' method='get' action='{% url 'helpdesk_list' %}'><input type='text' name='q' size='4' class='input' value='{% trans "Search..." %}' id='search_query' onFocus='s=document.getElementById("search_query");if (s.value == "{% trans "Search..." %}") { s.value = ""; }' title='{% trans "Enter a keyword, or a ticket number to jump straight to that ticket." %}'/><input type='hidden' name='status' value='1' /><input type='hidden' name='status' value='2' /><input type='hidden' name='status' value='3' /><input type='hidden' name='search_type' value='header' />{% csrf_token %}</form></li>{% endif %}
+    <li><a href='{% url 'logout' %}'><span class="glyphicon glyphicon-logout"></span> {% trans "Logout" %}</a></li>
+    {% if not query %}<li>
+    <form class="navbar-form navbar-left" id='searchform' method='get' action="{% url 'helpdesk_list' %}">
+    <div class="form-group">
+        <input type='text' name='q' size='6' class='input form-control' placeholder='{% trans "Search..." %}' id='search_query' title='{% trans "Enter a keyword, or a ticket number to jump straight to that ticket." %}'/>
+        <input type='hidden' name='status' value='1' /><input type='hidden' name='status' value='2' /><input type='hidden' name='status' value='3' />
+        <input type='hidden' name='search_type' value='header' />
+        {% csrf_token %}
+    </div>
+    <button type="submit" class="btn btn-default">Submit</button>
+    </form>
+</li>{% endif %}
 </ul>
+</nav>
 {% else %}
-<ul>
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
+{% if helpdesk_settings.HELPDESK_ORG_LOGO %}<img class="navbar-brand" src="{{ helpdesk_settings.HELPDESK_ORG_LOGO }}" />{% endif %}
+<ul id="dropdown" class="nav navbar-nav">
 {% if helpdesk_settings.HELPDESK_ALLOW_NON_STAFF_TICKET_UPDATE %}
 <li><a href='{% url 'helpdesk_dashboard' %}'>{% trans "Dashboard" %}</a></li>
 <li><a href='{% url 'helpdesk_submit' %}'>{% trans "Submit A Ticket" %}</a></li>
@@ -40,4 +55,5 @@
 <li>{% if user.is_authenticated %}<a href='{% url 'logout' %}'>{% trans "Logout" %}</a>{% else %}<a href='{% url 'login' %}?next={% if next %}{{ next|escape }}{% else %}{% url 'helpdesk_home' %}{% endif %}'>{% trans "Log In" %}</a>{% endif %}</li>
 {% endif %}
 </ul>
-{% endif %}
+</nav>
+{% endif %}
\ No newline at end of file
diff --git a/helpdesk/templates/helpdesk/public_base.html b/helpdesk/templates/helpdesk/public_base.html
index 138329ba..0b778bc1 100644
--- a/helpdesk/templates/helpdesk/public_base.html
+++ b/helpdesk/templates/helpdesk/public_base.html
@@ -5,19 +5,21 @@
 <head>
 <title>{% block helpdesk_title %}{{ helpdesk_settings.HELPDESK_PREPEND_ORG_NAME|default:'' }} {% trans "Helpdesk" %}{% endblock %}</title>
 <script src='{{ STATIC_URL }}helpdesk/jquery-1.5.min.js' type='text/javascript' language='javascript'></script>
-<link rel='stylesheet' href='{{ STATIC_URL }}helpdesk/helpdesk.css' type='text/css' />
+<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
+<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
+<link rel='stylesheet' href='{{ STATIC_URL }}helpdesk/helpdesk-extend.css' type='text/css' />
 {% block helpdesk_head %}{% endblock %}
 </head>
-<body>
-<div id='container'>
-    <div id='header'>
+<body id="helpdesk-body">
+<div id='container' class="container">
+    <div id='header' class="row">
         <h1>{{ helpdesk_settings.HELPDESK_PREPEND_ORG_NAME|default:'' }} {% trans "Helpdesk" %}</h1>
         {% include "helpdesk/navigation.html" %}
     </div>
-    <div id='body'>
+    <div id='body' class="row">
 {% block helpdesk_body %}{% endblock %}
     </div>
-    <div id='footer'>
+    <div id='footer' class="row">
         <p>{% include "helpdesk/attribution.html" %}</p>
     </div>
 </div>{% include "helpdesk/debug.html" %}
diff --git a/helpdesk/templates/helpdesk/public_change_language.html b/helpdesk/templates/helpdesk/public_change_language.html
index cba34ae2..2f7a1295 100644
--- a/helpdesk/templates/helpdesk/public_change_language.html
+++ b/helpdesk/templates/helpdesk/public_change_language.html
@@ -12,7 +12,7 @@
         <option value="{{ language.code }}"{% if LANGUAGE_CODE = language.code %} selected{% endif %}>{{ language.name_local }} ({{ language.code }})</option>
         {% endfor %}
     </select>
-    <input type="submit" value="Go" />
+    <input class="btn btn-primary" type="submit" value="Go" />
 </form>
 
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/public_homepage.html b/helpdesk/templates/helpdesk/public_homepage.html
index d27beb01..9afd0538 100644
--- a/helpdesk/templates/helpdesk/public_homepage.html
+++ b/helpdesk/templates/helpdesk/public_homepage.html
@@ -1,70 +1,93 @@
-{% extends "helpdesk/public_base.html" %}{% load i18n %}{% load url from future %}
+{% extends "helpdesk/public_base.html" %}{% load i18n bootstrap %}{% load url from future %}
 
 {% block helpdesk_body %}
 
 {% if helpdesk_settings.HELPDESK_SHOW_KB_ON_HOMEPAGE %}
 <h2>{% trans "Knowledgebase Articles" %}</h2>
 
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td>{% trans "Knowledgebase Categories" %}</td></tr>
 <tr class='row_columnheads'><th>{% trans "Category" %}</th></tr>
-
+</thead>
+<tbody>
 {% for category in kb_categories %}
 <tr class='row_even row_hover'><th><a href='{{ category.get_absolute_url }}'>{{ category.title }}</a></th></tr>
 <tr class='row_odd'><td>{{ category.description }}</td></tr>
 {% endfor %}
+</tbody>
 </table>
 
 {% endif %}
 
-{% if helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC %}
-<h2>{% trans "View a Ticket" %}</h2>
-
-<form method='get' action='{% url 'helpdesk_public_view' %}'>
-<fieldset>
-    <dl>
-        <dt><label for='id_ticket'>{% trans "Ticket" %}</label></dt>
-        <dd><input type='text' name='ticket' /></dd>
-
-        <dt><label for='id_email'>{% trans "Your E-mail Address" %}</label></dt>
-        <dd><input type='text' name='email' /></dd>
-    </dl>
-
-    <input type='submit' value='{% trans "View Ticket" %}' />
-</fieldset>
-{% csrf_token %}</form>
-{% endif %}
-
 {% if helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
-<h2 name='submit'>{% trans "Submit a Ticket" %}</h2>
+<div class="col-xs-6">
+<div class="panel panel-default">
 
+<div class="panel-body">
+    <h2 name='submit'>{% trans "Submit a Ticket" %}</h2>
 <p>{% trans "All fields are required. Please provide as descriptive a title and description as possible." %}</p>
 
-<form method='post' action='./#submit' enctype='multipart/form-data'>
+<form role="form" method='post' action='./#submit' enctype='multipart/form-data'>
 <fieldset>
-    <dl>
+        {{ form|bootstrap }}
+        {% comment %}
         {% for field in form %}
+
             {% if field.is_hidden %}
                 {{ field }}
             {% else %}
-                <dt><label for='id_{{ field.name }}'>{{ field.label }}</label>{% if not field.field.required %} <span class='form_optional'>{% trans "(Optional)" %}</span>{% endif %}</dt>
-                <dd>{{ field }}</dd>
-                {% if field.errors %}<dd class='error'>{{ field.errors }}</dd>{% endif %}
-                {% if field.help_text %}<dd class='form_help_text'>{{ field.help_text }}</dd>{% endif %}
-            {% endif %}
+
+
+            <div class="form-group {% if field.errors %}has-error{% endif %}">
+                <label class="control-label" for='id_{{ field.name }}'>{{ field.label }}</label>{% if not field.field.required %} <span class='form_optional'>{% trans "(Optional)" %}</span>{% endif %}</dt>
+                <div class="input-group">{{ field }}</div>
+                {% if field.errors %}<div class="help-block">{{ field.errors }}</div>{% endif %}
+                {% if field.help_text %}<span class='fhelp-block'>{{ field.help_text }}</span>{% endif %}
+            </div>
+
+        {% endif %}
+
         {% endfor %}
-    </dl>
+        {% endcomment %}
     
-    <div class='buttons'>
-        <input type='submit' value='{% trans "Submit Ticket" %}' />
+    <div class='buttons form-group'>
+        <input type='submit' class="btn btn-primary" value='{% trans "Submit Ticket" %}' />
     </div>
 </fieldset>
 
 {% csrf_token %}</form>
+</div>
+</div>
+</div>
 {% endif %}
 
 {% if not helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC and not helpdesk_settings.HELPDESK_SUBMIT_A_TICKET_PUBLIC %}
         <h2>{% trans "Please use button at upper right to login first." %}</h2>
 {% endif %}
 
+{% if helpdesk_settings.HELPDESK_VIEW_A_TICKET_PUBLIC %}
+<div class="col-xs-6">
+<div class="panel panel-default">
+<div class="panel-body">
+<h2>{% trans "View a Ticket" %}</h2>
+
+<form method='get' action="{% url 'helpdesk_public_view' %}">
+<fieldset>
+    <div class="form-group {% if field.errors %}has-error{% endif %}">
+        <label for='id_ticket'>{% trans "Ticket" %}</label>
+        <div class="input-group"><input type='text' name='ticket' /></div>
+    </div>
+    <div class="form-group {% if field.errors %}has-error{% endif %}">
+        <label for='id_email'>{% trans "Your E-mail Address" %}</label>
+        <div class="input-group"><input type='text' name='email' /></div>
+    </div>
+    <div class='buttons form-group'>
+    <input type='submit' class="btn btn-primary"  value='{% trans "View Ticket" %}' />
+    </div>
+</fieldset>
+{% csrf_token %}</form>
+</div></div></div>
+{% endif %}
+
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/public_view_form.html b/helpdesk/templates/helpdesk/public_view_form.html
index debfec09..34719df5 100644
--- a/helpdesk/templates/helpdesk/public_view_form.html
+++ b/helpdesk/templates/helpdesk/public_view_form.html
@@ -16,7 +16,7 @@
         <dd><input type='text' name='email' /></dd>
     </dl>
 
-    <input type='submit' value='{% trans "View Ticket" %}' />
+    <input class="btn btn-primary" type='submit' value='{% trans "View Ticket" %}' />
 </fieldset>
 {% csrf_token %}</form>
 
diff --git a/helpdesk/templates/helpdesk/public_view_ticket.html b/helpdesk/templates/helpdesk/public_view_ticket.html
index 1523d08a..d4b50cf0 100644
--- a/helpdesk/templates/helpdesk/public_view_ticket.html
+++ b/helpdesk/templates/helpdesk/public_view_ticket.html
@@ -3,11 +3,13 @@
 
 {% block helpdesk_body %}
 
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='2'>{{ ticket.ticket }} . {{ ticket.title }} [{{ ticket.get_status }}]</td></tr>
 <tr class='row_columnheads'><th colspan='2'>{% blocktrans with ticket.queue as queue_name %}Queue: {{ queue_name }}{% endblocktrans %}</th></tr>
-
-<tr class='{% cycle 'row_odd' 'row_even' as rowcolors %}'>
+</thead>
+<tbody>
+<tr class="{% cycle 'row_odd' 'row_even' as rowcolors %}">
     <th>{% trans "Submitted On" %}</th>
     <td>{{ ticket.created|date:"r" }} ({{ ticket.created|timesince }} ago)</td>
 </tr>
@@ -48,15 +50,15 @@
 <tr class='{% cycle rowcolors %}'>
     <td colspan='2'>{{ ticket.resolution|urlizetrunc:50|linebreaksbr }}</td>
 </tr>{% endif %}
-
+</tbody>
 </table>
 
 {% if ticket.followup_set.public_followups %}
 <h3>{% trans "Follow-Ups" %}</h3>
 {% load ticket_to_link %}
 {% for followup in ticket.followup_set.public_followups %}
-<div class='followup'>
-<div class='title'>{{ followup.title }} <span class='byline'>{% if followup.user %}by {{ followup.user }}{% endif %} <span title='{{ followup.date|date:"r" }}'>{{ followup.date|timesince }} ago</span></span></div>
+<div class='followup well'>
+<div class='title'>{{ followup.title }} <span class='byline text-info'>{% if followup.user %}by {{ followup.user }}{% endif %} <span title='{{ followup.date|date:"r" }}'>{{ followup.date|timesince }} ago</span></span></div>
 {{ followup.comment|force_escape|urlizetrunc:50|num_to_link|linebreaksbr }}
 {% if followup.ticketchange_set.all %}<div class='changes'><ul>
 {% for change in followup.ticketchange_set.all %}
diff --git a/helpdesk/templates/helpdesk/registration/login.html b/helpdesk/templates/helpdesk/registration/login.html
index 870fcfb9..da93ef86 100644
--- a/helpdesk/templates/helpdesk/registration/login.html
+++ b/helpdesk/templates/helpdesk/registration/login.html
@@ -1,4 +1,4 @@
-{% extends "helpdesk/public_base.html" %}{% load i18n %}{% load url from future %}
+{% extends "helpdesk/public_base.html" %}{% load i18n bootstrap %}
 {% block helpdesk_title %}{{ helpdesk_settings.HELPDESK_PREPEND_ORG_NAME|default:'' }} {% trans "Helpdesk Login" %}{% endblock %}
 
 {% block helpdesk_body %}
@@ -6,20 +6,25 @@
 {% if request.user.is_authenticated %}
     <meta http-equiv="REFRESH" content="0;url={% url 'helpdesk_home' %}">
 {% else %}
-    <h2>{% trans "Login" %}</h2>
+    <div class="col-xs-6">
+<div class="panel panel-default">
 
-    <p>{% trans "To log in and begin responding to cases, simply enter your username and password below." %}</p>
+<div class="panel-body"><h2>Login</h2>
+
+    <p>{% trans "To log in simply enter your username and password below." %}</p>
 
     <form method='post' action='./'>
         {% if form.errors %}<p>{% trans "Your username and password didn't match. Please try again." %}</p>{% endif %}
-        <dl>
-            <dt><label>{% trans "Username" %}</label></dt>
-            <dd>{{ form.username }}</dd>
-            <dt><label>{% trans "Password" %}</label></dt>
-            <dd>{{ form.password }}</dd>
-        </dl>
-        <input type='submit' value='{% trans "Login" %}' />
+        {{ form|bootstrap }}
+        <div class='buttons form-group'>
+        <input class="btn btn-primary" type='submit' value='{% trans "Login" %}' />
+        <div>
         <input type="hidden" name="next" value="{% if next %}{{ next }}{% else %}../{% endif %}" />
     {% csrf_token %}</form>
+</div>
+</div>
+</div>
+</div>
+</div>    
 {% endif %}
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/report_output.html b/helpdesk/templates/helpdesk/report_output.html
index 60f4076e..cda3ded4 100644
--- a/helpdesk/templates/helpdesk/report_output.html
+++ b/helpdesk/templates/helpdesk/report_output.html
@@ -23,17 +23,21 @@
             <option value="">--------</option>{% for q in user_saved_queries_ %}
             <option value="{{ q.id }}"{% ifequal saved_query q %} selected{% endifequal %}>{{ q.title }}</option>{% endfor %}
         </select>
-        <input type='submit' value='{% trans "Filter Report" %}'>
+        <input class="btn btn-primary" type='submit' value='{% trans "Filter Report" %}'>
     </form>
 {% else %}
     <p>{% trans "Want to filter this report to just show a subset of data? Go to the Ticket List, filter your query, and save your query." %}</p>
 {% endif %}
 
-<table>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='{{ headings|length }}'>{{ title }}</td></tr>
 <tr class='row_columnheads'>{% for h in headings %}<th>{% if forloop.first %}{{ h|title }}{% else %}{{ h }}{% endif %}</th>{% endfor %}</tr>
+</thead>
+<tbody>
 {% for d in data %}
 <tr class='row_{% cycle odd,even %}'>{% for f in d %}<td class='report'>{{ f }}</td>{% endfor %}</tr>{% endfor %}
+</tbody>
 </table>
 
 <div class='jqPlot' id='placeholder' style='width: 600px; height: 400px;'></div>
diff --git a/helpdesk/templates/helpdesk/rss_list.html b/helpdesk/templates/helpdesk/rss_list.html
index e27144e6..bdf5ea14 100644
--- a/helpdesk/templates/helpdesk/rss_list.html
+++ b/helpdesk/templates/helpdesk/rss_list.html
@@ -18,14 +18,18 @@
 
 <p>{% trans "These RSS feeds allow you to view a summary of either your own tickets, or all tickets, for each of the queues in your helpdesk. For example, if you manage the staff who utilise a particular queue, this may be used to view new tickets coming into that queue." %}</p>
 
-<table width='50%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='4'>{% trans "Per-Queue Feeds" %}</td></tr>
 <tr class='row_columnheads'><th>{% trans "Queue" %}</th><th align='center'>{% trans "All Open Tickets" %}</th><th align='center'>{% trans "My Open Tickets" %}</th></tr>
+</thead>
+<tbody>
 {% for queue in queues %}
 <tr>
     <td>{{ queue.title }}</td>
     <td align='center'><a href='{% url 'helpdesk_rss_queue' queue.slug %}'><img src='{{ STATIC_URL }}helpdesk/rss_icon.png' width='14' height='14' alt='{% trans "RSS Icon" %}' title='{% trans "Open Tickets" %}' border='0' /></a></td>
     <td align='center'><a href='{% url 'helpdesk_rss_user_queue' user.username queue.slug %}'><img src='{{ STATIC_URL }}helpdesk/rss_icon.png' width='14' height='14' alt='{% trans "RSS Icon" %}' title='{% trans "My Open Tickets" %}' border='0' /></a></td>
 {% endfor %}
+</tbody>
 </table>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/ticket.html b/helpdesk/templates/helpdesk/ticket.html
index 1b678dac..ce9584c8 100644
--- a/helpdesk/templates/helpdesk/ticket.html
+++ b/helpdesk/templates/helpdesk/ticket.html
@@ -1,4 +1,4 @@
-{% extends "helpdesk/base.html" %}{% load i18n %}{% load url from future %}
+{% extends "helpdesk/base.html" %}{% load i18n bootstrap %}{% load url from future %}
 {% block helpdesk_title %}{% trans "View Ticket Details" %}{% endblock %}
 {% block helpdesk_head %}
 <script type="text/javascript">
@@ -40,6 +40,8 @@
 </script>
 {% endblock %}
 
+{% block h1_title %}{{ ticket.ticket_for_url }}{% endblock %}
+
 {% block helpdesk_body %}
 {% if helpdesk_settings.HELPDESK_TRANSLATE_TICKET_COMMENTS %}
 {% comment %}
@@ -67,7 +69,7 @@ function googleTranslateElementInit() {
 {% if helpdesk_settings.HELPDESK_FOLLOWUP_MOD %}
     <div class='followup_mod'>
     <div class='title'>
-        <span class='byline'>{{ followup.user.get_full_name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ followup.date }} ({{ followup.date|timesince }} ago)</span> <small>{{ followup.title }}</small>
+        <span class='byline text-info'>{{ followup.user.get_full_name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ followup.date }} ({{ followup.date|timesince }} ago)</span> <small>{{ followup.title }}</small>
         {% if not followup.public %} <span class='private'>({% trans "Private" %})</span>{% endif %}
         {% if helpdesk_settings.HELPDESK_SHOW_EDIT_BUTTON_FOLLOW_UP %}
         {% if followup.user and request.user == followup.user and not followup.ticketchange_set.all %}
@@ -79,9 +81,9 @@ function googleTranslateElementInit() {
         {% endif %}
     </div>
 {% else %}
-    <div class='followup'>
+    <div class='followup well'>
     <div class='title'>
-        {{ followup.title }} <span class='byline'>{% if followup.user %}by {{ followup.user }}{% endif %} <span title='{{ followup.date|date:"r" }}'>{{ followup.date|timesince }} ago</span>{% if not followup.public %} <span class='private'>({% trans "Private" %})</span>{% endif %}</span>
+        {{ followup.title }} <span class='byline text-info'>{% if followup.user %}by {{ followup.user }}{% endif %} <span title='{{ followup.date|date:"r" }}'>{{ followup.date|timesince }} ago</span>{% if not followup.public %} <span class='private'>({% trans "Private" %})</span>{% endif %}</span>
         {% if helpdesk_settings.HELPDESK_SHOW_EDIT_BUTTON_FOLLOW_UP %}
         {% if followup.user and request.user == followup.user and not followup.ticketchange_set.all %}
         <a href="{% url 'helpdesk_followup_edit' ticket.id followup.id %}" class='followup-edit'><img width="60" height="15" title="Edit" alt="Edit" src="{{ STATIC_URL }}helpdesk/buttons/edit.png"></a>
@@ -113,7 +115,7 @@ function googleTranslateElementInit() {
 </div>
 {% endif %}
 
-<div id='add-followup'>
+<div id='add-followup' class="well">
 <h3>{% trans "Respond to this ticket" %}</h3>
 
 <form method='post' action='update/' enctype='multipart/form-data'>
@@ -207,7 +209,7 @@ function googleTranslateElementInit() {
 
 </fieldset>
 
-<input type='submit' value='{% trans "Update This Ticket" %}' />
+<input class="btn btn-primary" type='submit' value='{% trans "Update This Ticket" %}' />
 
 {% csrf_token %}</form>
 
diff --git a/helpdesk/templates/helpdesk/ticket_cc_add.html b/helpdesk/templates/helpdesk/ticket_cc_add.html
index e10f4bf1..bc6a5648 100644
--- a/helpdesk/templates/helpdesk/ticket_cc_add.html
+++ b/helpdesk/templates/helpdesk/ticket_cc_add.html
@@ -18,7 +18,7 @@
     {% endfor %}</dl>
 </fieldset>
 
-<input type='submit' value='{% trans "Save Ticket CC" %}' />
+<input class="btn btn-primary" type='submit' value='{% trans "Save Ticket CC" %}' />
 
 {% csrf_token %}</form>
 
diff --git a/helpdesk/templates/helpdesk/ticket_cc_del.html b/helpdesk/templates/helpdesk/ticket_cc_del.html
index 8b63a2e0..a6318657 100644
--- a/helpdesk/templates/helpdesk/ticket_cc_del.html
+++ b/helpdesk/templates/helpdesk/ticket_cc_del.html
@@ -10,5 +10,5 @@
 
 <p><a href='../../'>{% trans "Don't Delete" %}</a></p>
 
-<form method='post' action='./'><input type='submit' value='{% trans "Yes, Delete" %}' />{% csrf_token %}</form>
+<form method='post' action='./'><input class="btn btn-primary" type='submit' value='{% trans "Yes, Delete" %}' />{% csrf_token %}</form>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/ticket_cc_list.html b/helpdesk/templates/helpdesk/ticket_cc_list.html
index 5f501a48..e857d569 100644
--- a/helpdesk/templates/helpdesk/ticket_cc_list.html
+++ b/helpdesk/templates/helpdesk/ticket_cc_list.html
@@ -9,7 +9,7 @@
 
 <p>You can <a href='add/'>add a new e-mail address to the list</a> or delete any of the items below as required.</p>{% endblocktrans %}
 
-<table width='100%'>
+<table class="table table-hover table-bordered">
 <thead>
 <tr class='row_tablehead'><td colspan='4'>{% trans "Ticket CC List" %}</td></tr>
 <tr class='row_columnheads'><th>{% trans "E-Mail Address" %}</th><th>{% trans "View?" %}</th><th>{% trans "Update?" %}</th><th>{% trans "Delete" %}</th></tr>
diff --git a/helpdesk/templates/helpdesk/ticket_dependency_add.html b/helpdesk/templates/helpdesk/ticket_dependency_add.html
index d8514517..61b16546 100644
--- a/helpdesk/templates/helpdesk/ticket_dependency_add.html
+++ b/helpdesk/templates/helpdesk/ticket_dependency_add.html
@@ -18,7 +18,7 @@
     {% endfor %}</dl>
 </fieldset>
 
-<input type='submit' value='{% trans "Save Ticket Dependency" %}' />
+<input class="btn btn-primary" type='submit' value='{% trans "Save Ticket Dependency" %}' />
 
 {% csrf_token %}</form>
 
diff --git a/helpdesk/templates/helpdesk/ticket_dependency_del.html b/helpdesk/templates/helpdesk/ticket_dependency_del.html
index 550fbaca..18d65f5d 100644
--- a/helpdesk/templates/helpdesk/ticket_dependency_del.html
+++ b/helpdesk/templates/helpdesk/ticket_dependency_del.html
@@ -10,5 +10,5 @@
 
 <p><a href='../../'>{% trans "Don't Delete" %}</a></p>
 
-<form method='post' action='./'><input type='submit' value='{% trans "Yes, Delete" %}' />{% csrf_token %}</form>
+<form method='post' action='./'><input class="btn btn-primary" type='submit' value='{% trans "Yes, Delete" %}' />{% csrf_token %}</form>
 {% endblock %}
diff --git a/helpdesk/templates/helpdesk/ticket_desc_table.html b/helpdesk/templates/helpdesk/ticket_desc_table.html
index f6fb5809..9fde9971 100644
--- a/helpdesk/templates/helpdesk/ticket_desc_table.html
+++ b/helpdesk/templates/helpdesk/ticket_desc_table.html
@@ -1,17 +1,19 @@
 {% load i18n %}{% load url from future %}
-<table width='100%'>
-    <tr class='row_tablehead'><td colspan='2'>{{ ticket.id }}. {{ ticket.title }} [{{ ticket.get_status }}] <span class='ticket_toolbar'>
+<table class="table table-hover table-bordered">
+<thead>
+    <tr class='row_tablehead'><td colspan='2'><h3>{{ ticket.id }}. {{ ticket.title }} [{{ ticket.get_status }}]</h3> <span class='ticket_toolbar'>
     {% if helpdesk_settings.HELPDESK_SHOW_EDIT_BUTTON_TICKET_TOP %}
-        <a href='{% url 'helpdesk_edit' ticket.id %}' class="ticket-edit"><img src='{{ STATIC_URL }}helpdesk/buttons/edit.png' alt='Edit' title='Edit' width='60' height='15' /></a>
+        <a href='{% url 'helpdesk_edit' ticket.id %}' class="ticket-edit"><span class="glyphicon glyphicon-pencil"></span> Edit</a>
     {% endif %}
     {% if helpdesk_settings.HELPDESK_SHOW_DELETE_BUTTON_TICKET_TOP %}
-    <a href='{% url 'helpdesk_delete' ticket.id %}' class="ticket-delete"><img src='{{ STATIC_URL }}helpdesk/buttons/delete.png' alt='Delete' title='Delete' width='60' height='15' /></a>
+    | <a href='{% url 'helpdesk_delete' ticket.id %}' class="ticket-delete"><span class="glyphicon glyphicon-remove"></span> Delete</a>
     {% endif %}
     {% if helpdesk_settings.HELPDESK_SHOW_HOLD_BUTTON_TICKET_TOP %}
-    {% if ticket.on_hold %}<a href='unhold/' class="ticket-hold">{% trans "Unhold" %}</a>{% else %}<a href='hold/' class="ticket-hold">{% trans "Hold" %}</a>{% endif %}
+    {% if ticket.on_hold %} | <a href='unhold/' class="ticket-hold">{% trans "Unhold" %}</a>{% else %} | <a href='hold/' class="ticket-hold">{% trans "Hold" %}</a>{% endif %}
     {% endif %}</span></td></tr>
 <tr class='row_columnheads'><th colspan='2'>{% blocktrans with ticket.queue as queue %}Queue: {{ queue }}{% endblocktrans %}</th></tr>
-
+</thead>
+<tbody>
 <tr class='{% cycle 'row_odd' 'row_even' as rowcolors %}'>
     <th>{% trans "Submitted On" %}</th>
     <td>{{ ticket.created|date:"r" }} ({{ ticket.created|timesince }} ago)</td>
@@ -76,5 +78,5 @@
 <tr class='{% cycle rowcolors %}'>
     <td colspan='2'>{{ ticket.resolution|force_escape|urlizetrunc:50|linebreaksbr }}</td>
 </tr>{% endif %}
-
+</tbody>
 </table>
diff --git a/helpdesk/templates/helpdesk/ticket_list.html b/helpdesk/templates/helpdesk/ticket_list.html
index 2638dcb4..fa648611 100644
--- a/helpdesk/templates/helpdesk/ticket_list.html
+++ b/helpdesk/templates/helpdesk/ticket_list.html
@@ -1,6 +1,7 @@
 {% extends "helpdesk/base.html" %}{% load i18n %}{% load url from future %}
-{% block helpdesk_title %}{% trans "Ticket Listing" %}{% endblock %}
+{% block helpdesk_title %}{% trans "Tickets" %}{% endblock %}
 {% block helpdesk_head %}
+
 <script type='text/javascript' language='javascript' src='{{ STATIC_URL }}helpdesk/filter.js'></script>
 <script type='text/javascript' language='javascript' src='{{ STATIC_URL }}helpdesk/hover.js'></script>
 
@@ -32,12 +33,14 @@ $(document).ready(function() {
 });
 </script>
 {% endblock %}
+{% block h1_title %}Tickets
+    {% if from_saved_query %} [{{ saved_query.title }}]{% endif %}{% endblock %}
 {% block helpdesk_body %}
 
 {% load in_list %}
 
-<div id="searchtabs">
-    <ul>
+<div id="searchtabs" class="row">
+    {% comment %}<ul>
     <li><a href='#tabfilter'>{% trans "Query Options" %}</a></li>
     {% if not from_saved_query %}
     <li><a href='#tabsave'>{% trans "Save This Query" %}</a></li>
@@ -45,10 +48,19 @@ $(document).ready(function() {
     {% if user_saved_queries %}
     <li><a href='#tabload'>{% trans "Load Saved Query" %}</a></li>
     {% endif %}
-    </ul>
-    
-    <div id='tabfilter'>
-    <h3>{% trans "Change Query" %}</h3>
+    </ul>{% endcomment %}
+
+<div class="panel-group filter-options" id="accordion">
+    <div id='tabfilter' class="panel panel-default">
+    <div class="panel-heading">
+    <h3 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+        {% trans "Change Query" %}
+        </a>
+    </h3>
+    </div>
+    <div id="collapseOne" class="panel-collapse collapse in">
+      <div class="panel-body">
     <form>
         <select name='select' id='filterBuilderSelect'>
         <option value='Sort'>{% trans "Sorting" %}</option>
@@ -65,7 +77,7 @@ $(document).ready(function() {
     {% csrf_token %}</form>
 
     <form method='get' action='./'>
-    <div class='filterBox{% if query_params.sorting %} filterBoxShow{% endif %}' id='filterBoxSort'>
+    <div class='thumbnail filterBox{% if query_params.sorting %} filterBoxShow{% endif %}' id='filterBoxSort'>
     <label for='id_sort'>{% trans "Sorting" %}</label>
     <select id='id_sort' name='sort'>
         <option value='created'{% ifequal query_params.sorting "created"%} selected='selected'{% endifequal %}>
@@ -93,7 +105,7 @@ $(document).ready(function() {
     <input type='button' class='filterBuilderRemove' value='-' />
     </div>
 
-    <div class='filterBox{% if query_params.filtering.assigned_to__id__in %} filterBoxShow{% endif %}' id='filterBoxOwner'>
+    <div class='thumbnail filterBox{% if query_params.filtering.assigned_to__id__in %} filterBoxShow{% endif %}' id='filterBoxOwner'>
     <label for='id_owners'>{% trans "Owner(s)" %}</label>
     <select id='id_owners' name='assigned_to' multiple='selected' size='5'>
         {% for u in user_choices %}
@@ -106,19 +118,19 @@ $(document).ready(function() {
     <input type='button' class='filterBuilderRemove' value='-' />
     </div>
 
-    <div class='filterBox{% if query_params.filtering.queue__id__in %} filterBoxShow{% endif %}' id='filterBoxQueue'>
+    <div class='thumbnail filterBox{% if query_params.filtering.queue__id__in %} filterBoxShow{% endif %}' id='filterBoxQueue'>
     <label for='id_queues'>{% trans "Queue(s)" %}</label><select id='id_queues' name='queue' multiple='selected' size='5'>{% for q in queue_choices %}<option value='{{ q.id }}'{% if q.id|in_list:query_params.filtering.queue__id__in %} selected='selected'{% endif %}>{{ q.title }}</option>{% endfor %}</select>
     <p class='filterHelp'>{% trans "Ctrl-click to select multiple options" %}</p>
     <input type='button' class='filterBuilderRemove' value='-' />
     </div>
 
-    <div class='filterBox{% if query_params.filtering.status__in %} filterBoxShow{% endif %}' id='filterBoxStatus'>
+    <div class='thumbnail filterBox{% if query_params.filtering.status__in %} filterBoxShow{% endif %}' id='filterBoxStatus'>
     <label for='id_statuses'>{% trans "Status(es)" %}</label><select id='id_statuses' name='status' multiple='selected' size='5'>{% for s in status_choices %}<option value='{{ s.0 }}'{% if s.0|in_list:query_params.filtering.status__in %} selected='selected'{% endif %}>{{ s.1 }}</option>{% endfor %}</select>
     <p class='filterHelp'>{% trans "Ctrl-click to select multiple options" %}</p>
     <input type='button' class='filterBuilderRemove' value='-' />
     </div>
     
-    <div class='filterBox{% if query_params.filtering.created__gte or query_params.filtering.created__lte %} filterBoxShow{% endif %}' id='filterBoxDates'>
+    <div class='thumbnail filterBox{% if query_params.filtering.created__gte or query_params.filtering.created__lte %} filterBoxShow{% endif %}' id='filterBoxDates'>
         <label for='id_date_from'>{% trans "Date (From)" %}</label><input type='text' name='date_from' value='{{ query_params.filtering.created__gte }}' id='id_date_from' />
         <label for='id_date_to'>{% trans "Date (To)" %}</label><input type='text' name='date_to' value='{{ query_params.filtering.created__lte }}' id='id_date_to' />
     <p class='filterHelp'>{% trans "Use YYYY-MM-DD date format, eg 2011-05-29" %}</p>
@@ -126,32 +138,42 @@ $(document).ready(function() {
     </div>
 
 {% if tags_enabled %}
-<div class='filterBox{% if query_params.tags %} filterBoxShow{% endif %}' id='filterBoxTags'>
+<div class='thumbnail filterBox{% if query_params.tags %} filterBoxShow{% endif %}' id='filterBoxTags'>
   <label for='id_tags'>{% trans "Tag(s)" %}</label><select id='id_tags' name='tags' multiple='selected' size='5'>{% for t in tag_choices %}<option value='{{t.name}}'{% if t.name|in_list:query_params.tags %} selected='selected'{% endif %}>{{ t.name }}</option>{% endfor %}</select>
 <p class='filterHelp'>{% trans "Ctrl-click to select multiple options" %}</p>
 <input type='button' class='filterBuilderRemove' value='-' />
 </div>
 {% endif %}
 
-    <div class='filterBox{% if query %} filterBoxShow{% endif %}' id='filterBoxKeywords'>
+    <div class='thumbnail filterBox{% if query %} filterBoxShow{% endif %}' id='filterBoxKeywords'>
     <label for='id_query'>{% trans "Keywords" %}</label><input type='text' name='q' value='{{ query }}' id='id_query' />
     <p class='filterHelp'>{% trans "Keywords are case-insensitive, and will be looked for in the title, body and submitter fields." %}</p>
     <input type='button' class='filterBuilderRemove' value='-' />
     </div>
     <hr style='clear: both;' />
-    <input type='submit' value='{% trans "Apply Filter" %}' />
+    <input class="btn btn-primary" type='submit' value='{% trans "Apply Filter" %}' />
     {% if from_saved_query and saved_query.user == user %}
-    <p>{% blocktrans with saved_query.title as query_name %}You are currently viewing saved query <em>{{ query_name }}</em>.{% endblocktrans %} <a href='{% url 'helpdesk_delete_query' saved_query.id %}'>{% trans "Delete Saved Query" %}</a></p>
+    <p>{% blocktrans with saved_query.title as query_name %}You are currently viewing saved query <strong>"{{ query_name }}"</strong>.{% endblocktrans %} <a href='{% url 'helpdesk_delete_query' saved_query.id %}'>{% trans "Delete Saved Query" %}</a></p>
     {% endif %}
     {% if from_saved_query %}
     <p>{% blocktrans with saved_query.id as query_id %}<a href='../reports/?saved_query={{ query_id }}'>Run a report</a> on this query to see stats and charts for the data listed below.{% endblocktrans %}</p>
     {% endif %}
     {% csrf_token %}</form>
     </div>
+    </div>
+    </div>
+
     
     {% if not from_saved_query %}
-    <div class='tab' id='tabsave'>
-    <h3>{% trans "Save Query" %}</h3>
+    <div class='panel panel-default' id='tabsave'>
+    <div class="panel-heading">
+    <h3 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+        {% trans "Save Query" %}</a>
+    </h3>
+    </div>
+    <div id="collapseTwo" class="panel-collapse collapse">
+      <div class="panel-body">
     <form method='post' action='{% url 'helpdesk_savequery' %}'>
     <input type='hidden' name='query_encoded' value='{{ urlsafe_query }}' />
     <dl>
@@ -166,37 +188,53 @@ $(document).ready(function() {
     </dl>
 
     <div class='buttons'>
-        <input type='submit' value='{% trans "Save Query" %}'>
+        <input class="btn btn-primary" type='submit' value='{% trans "Save Query" %}'>
     </div>
 
     {% csrf_token %}</form>
-    </div>{% endif %}
+    </div>
+    </div>
+    </div>
+    {% endif %}
 
-    <div id='tabload'>
-    <h3>{% trans "Use Saved Query" %}</h3>
+
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h3 class="panel-title">
+          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+          {% trans "Use Saved Query" %}
+          </a>
+      </h3>
+    </div>
+    <div id="collapseThree" class="panel-collapse collapse">
+      <div class="panel-body">
     <form method='get' action='{% url 'helpdesk_list' %}'>
     <p><label for='id_query_selector'>{% trans "Query" %}</label> <select name='saved_query' id='id_query_selector'>
         {% for q in user_saved_queries %}
         <option value='{{ q.id }}'>{{ q.title }}{% if q.shared %} (Shared{% ifnotequal user q.user %} by {{ q.user.username }}{% endifnotequal %}){% endif %}</option>
         {% endfor %}
     </select></p>
-    <input type='submit' value='{% trans "Run Query" %}'>
+    <input class="btn btn-primary" type='submit' value='{% trans "Run Query" %}'>
     {% csrf_token %}</form>
     </div>
-    
+    </div>
+    </div>
+</div>
+
 </div>
 
 
 
-
-
-
+<div class="row">
 
 {{ search_message|safe }}
 <form method='post' action='{% url 'helpdesk_mass_update' %}' id="ticket_mass_update">
-<table width='100%'>
+<table class="table table-hover table-bordered">
+<thead>
 <tr class='row_tablehead'><td colspan='9'>{% trans "Tickets" %}</td></tr>
 <tr class='row_columnheads'><th>#</th><th>&nbsp;</th><th>{% trans "Pr" %}</th><th>{% trans "Title" %}</th><th>{% trans "Queue" %}</th><th>{% trans "Status" %}</th><th>{% trans "Created" %}</th><th>{% trans "Owner" %}</th>{% if tags_enabled %}<th>{% trans "Tags" %}</th>{% endif %}</tr>
+</thead>
+<tbody>
 {% if tickets %}{% for ticket in tickets.object_list %}
 <tr class='row_{% cycle odd,even %} row_hover'>
 <th><a href='{{ ticket.get_absolute_url }}'>{{ ticket.ticket }}</a></th>
@@ -212,6 +250,7 @@ $(document).ready(function() {
 {% endfor %}{% else %}
 <tr class='row_odd'><td colspan='5'>{% trans "No Tickets Match Your Selection" %}</td></tr>
 {% endif %}
+</tbody>
 </table>
 <div class="pagination">
     <span class="step-links">
@@ -234,3 +273,4 @@ $(document).ready(function() {
 <p><label for='id_mass_action'>{% trans "With Selected Tickets:" %}</label> <select name='action' id='id_mass_action'><option value='take'>{% trans "Take (Assign to me)" %}</option><option value='delete'>{% trans "Delete" %}</option><optgroup label='{% trans "Close" %}'><option value='close'>{% trans "Close (Don't Send E-Mail)" %}</option><option value='close_public'>{% trans "Close (Send E-Mail)" %}</option></optgroup><optgroup label='{% trans "Assign To" %}'><option value='unassign'>{% trans "Nobody (Unassign)" %}</option>{% for u in user_choices %}<option value='assign_{{ u.id }}'>{{ u.username }}</option>{% endfor %}</optgroup></select> <input type='submit' value='Go' /></p>
 {% csrf_token %}</form>
 {% endblock %}
+</div>
\ No newline at end of file
diff --git a/helpdesk/templates/helpdesk/user_settings.html b/helpdesk/templates/helpdesk/user_settings.html
index 96592b7a..7e2d6398 100644
--- a/helpdesk/templates/helpdesk/user_settings.html
+++ b/helpdesk/templates/helpdesk/user_settings.html
@@ -26,7 +26,7 @@ Change your password <a href="{{ password_change_url }}" title="change your pass
         {% if field.help_text %}<dd class='form_help_text'>{{ field.help_text }}</dd>{% endif %}
     {% endfor %}</dl>
 </fieldset>
-<input type='submit' value='{% trans "Save Options" %}' />
+<input class="btn btn-primary" type='submit' value='{% trans "Save Options" %}' />
 {% csrf_token %}</form>
 
 {% endblock %}