diff --git a/helpdesk/serializers.py b/helpdesk/serializers.py
index abd95581..bacd96cc 100644
--- a/helpdesk/serializers.py
+++ b/helpdesk/serializers.py
@@ -19,6 +19,7 @@ class TicketSerializer(serializers.ModelSerializer):
     status = serializers.SerializerMethodField()
     row_class = serializers.SerializerMethodField()
     time_spent = serializers.SerializerMethodField()
+    queue = serializers.SerializerMethodField()
 
     class Meta:
         model = Ticket
@@ -27,6 +28,9 @@ class TicketSerializer(serializers.ModelSerializer):
                   'created', 'due_date', 'assigned_to', 'row_class',
                   'time_spent')
 
+    def get_queue(self, obj):
+        return ({"title": obj.queue.title, "id": obj.queue.id})
+
     def get_ticket(self, obj):
         return (str(obj.id) + " " + obj.ticket)
 
diff --git a/helpdesk/static/helpdesk/helpdesk-extend.css b/helpdesk/static/helpdesk/helpdesk-extend.css
index 4fa6c7dd..8b2e5c69 100644
--- a/helpdesk/static/helpdesk/helpdesk-extend.css
+++ b/helpdesk/static/helpdesk/helpdesk-extend.css
@@ -87,3 +87,11 @@ pre {
 	padding: 1em;
 	border: 1pt solid white;
 }
+
+table .tickettitle {
+  max-width: 250px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/helpdesk/templates/helpdesk/include/tickets.html b/helpdesk/templates/helpdesk/include/tickets.html
index 745b246b..bc0effd0 100644
--- a/helpdesk/templates/helpdesk/include/tickets.html
+++ b/helpdesk/templates/helpdesk/include/tickets.html
@@ -8,12 +8,11 @@
     </div>
     <div class="card-body">
         <div class="table-responsive">
-        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
-            <thead>
+        <table class="table table-bordered table-sm table-striped" id="dataTable" width="100%" cellspacing="0">
+            <thead class="thead-light">
                 <tr>
-                    <th>#</th>
-                    <th>{% trans "Pr" %}</th>
-                    <th>{% trans "Title" %}</th>
+                    <th>{% trans "Ticket" %}</th>
+                    <th>{% trans "Priority" %}</th>
                     <th>{% trans "Queue" %}</th>
                     <th>{% trans "Status" %}</th>
                     <th>{% trans "Last Update" %}</th>
@@ -22,9 +21,8 @@
             <tbody>
                 {% for ticket in ticket_list %}
                 <tr class="{{ ticket.get_priority_css_class }}">
-                    <td><a href='{{ ticket.get_absolute_url }}'>{{ ticket.ticket }}</a></td>
+                    <td class="tickettitle"><a href="{{ ticket.get_absolute_url }}">{{ ticket.id }}. {{ ticket.title }}</a></td>
                     <td>{{ ticket.priority }}</td>
-                    <td><a href='{{ ticket.get_absolute_url }}'>{{ ticket.title }}</a></td>
                     <td>{{ ticket.queue }}</td>
                     <td>{{ ticket.get_status }}</td>
                     <td><span title='{{ ticket.modified|date:"r" }}'>{{ ticket.modified|naturaltime }}</span></td>
diff --git a/helpdesk/templates/helpdesk/include/unassigned.html b/helpdesk/templates/helpdesk/include/unassigned.html
index e13bcb79..9632ab36 100644
--- a/helpdesk/templates/helpdesk/include/unassigned.html
+++ b/helpdesk/templates/helpdesk/include/unassigned.html
@@ -8,28 +8,26 @@
     </div>
     <div class="card-body">
         <div class="table-responsive">
-            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
-                <thead>
+            <table class="table table-bordered table-sm table-striped" id="dataTable" width="100%" cellspacing="0">
+                <thead class="thead-light">
                     <tr>
-                      <th>#</th>
-                      <th>{% trans "Pr" %}</th>
-                      <th>{% trans "Title" %}</th>
+                      <th>{% trans "Ticket" %}</th>
+                      <th>{% trans "Prority" %}</th>
                       <th>{% trans "Queue" %}</th>
-                      <th>{% trans "Status" %}</th>
-                      <th>&nbsp;</th>
+                      <th>{% trans "Created" %}</th>
+                      <th>{% trans "Actions" %}</th>
                     </tr>
                 </thead>
                 <tbody>
                 {% for ticket in unassigned_tickets %}
                     <tr class="{{ ticket.get_priority_css_class }}">
-                        <td><a href='{{ ticket.get_absolute_url }}'>{{ ticket.ticket }}</a></td>
+                        <td class="tickettitle"><a href='{{ ticket.get_absolute_url }}'>{{ ticket.id }}. {{ ticket.title }} </a></td>
                         <td>{{ ticket.priority }}</td>
-                        <td><a href='{{ ticket.get_absolute_url }}'>{{ ticket.title }}</a></td>
                         <td>{{ ticket.queue }}</td>
                         <td><span title='{{ ticket.created|date:"r" }}'>{{ ticket.created|naturaltime }}</span></td>
-                        <td>
-                          <a href='{{ ticket.get_absolute_url }}?take'><button class='btn btn-primary btn-xs'><i class="fas fa-hand-paper"></i>&nbsp;{% trans "Take" %}</button></a> |
-                          <a href='{% url 'helpdesk:delete' ticket.id %}'><button class='btn btn-danger btn-xs'><i class="fas fa-trash"></i>&nbsp;{% trans "Delete" %}</button></a>
+                        <td class="text-center">
+                          <a href='{{ ticket.get_absolute_url }}?take'><button class='btn btn-primary btn-sm'><i class="fas fa-hand-paper"></i>&nbsp;{% trans "Take" %}</button></a>
+                          <a href='{% url 'helpdesk:delete' ticket.id %}'><button class='btn btn-danger btn-sm'><i class="fas fa-trash"></i>&nbsp;{% trans "Delete" %}</button></a>
                         </td>
                     </tr>
                 {% empty %}
diff --git a/helpdesk/templates/helpdesk/kb_category.html b/helpdesk/templates/helpdesk/kb_category.html
index f47d0f9f..c34ea65c 100644
--- a/helpdesk/templates/helpdesk/kb_category.html
+++ b/helpdesk/templates/helpdesk/kb_category.html
@@ -24,12 +24,13 @@
 {% cycle 'one' 'two' 'three' as itemnumperrow silent %}
 {% ifequal itemnumperrow 'one' %}<div class="card-deck">{% endifequal %}
 <div class="card">
-    <div class="card-body">
+      <div class="card-header">
         <h5 class="card-title">{{ item.title }}</h5>
+      </div>
+      <div class="card-body">
         <p class="card-text">{{ item.question }}</p>
         <p class="card-text">
-            <p>
-                {% blocktrans with item.get_absolute_url as url %}View <a href='{{ url }}'>Answer <i class="fa fa-arrow-right"></i></a>{% endblocktrans %}
+                {% blocktrans with item.get_absolute_url as url %}<a href='{{ url }}' class="btn btn-primary"> Go to answer <i class="fa fa-share"></i></a>{% endblocktrans %}
             </p>
             <div class="well well-sm">
                 <p>{% trans 'Rating' %}: {{ item.score }}</p>
diff --git a/helpdesk/templates/helpdesk/kb_index.html b/helpdesk/templates/helpdesk/kb_index.html
index 7fb96f03..2516dbbc 100644
--- a/helpdesk/templates/helpdesk/kb_index.html
+++ b/helpdesk/templates/helpdesk/kb_index.html
@@ -18,10 +18,12 @@
 {% cycle 'one' 'two' 'three' as catnumperrow silent %}
 {% if catnumperrow == 'one' %}<div class="card-deck">{% endif %}
 <div class="card">
+    <div class="card-header">
+      <h5>{{ category.title }}</h5>
+    </div>
     <div class="card-body">
-        <h5 class="card-title">{{ category.title }}</h5>
         <p class="card-text">{{ category.description }}</p>
-        <p class="card-text"><small class="text-muted"><a href='{{ category.get_absolute_url }}'>{% trans 'View articles' %}<i class="fa fa-arrow-right"></i></a></small></p>
+        <p class="card-text"><small class="text-muted"><a class="btn btn-primary" href='{{ category.get_absolute_url }}'>{% trans 'View articles' %} <i class="fa fa-share"></i></a></small></p>
     </div>
 </div>
 {% if catnumperrow == 'three' %}</div>{% endif %}
diff --git a/helpdesk/templates/helpdesk/ticket_list.html b/helpdesk/templates/helpdesk/ticket_list.html
index 46db483e..2398e6c9 100644
--- a/helpdesk/templates/helpdesk/ticket_list.html
+++ b/helpdesk/templates/helpdesk/ticket_list.html
@@ -41,7 +41,7 @@
             <div class="card">
                 <div class="card-header" id="headingOne">
                 <h5 class="mb-0">
-                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                    <button class="btn btn-link btn-sm" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                     <i class="fas fa-question-circle"></i>
                     <strong>{% trans "Change Query" %}</strong>
                     </button>
@@ -51,7 +51,9 @@
                 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#queryAccordion">
                 <div class="card-body">
                     <form>
-                        <select name='select' id='filterBuilderSelect'>
+                        <div class="form-group">
+                        <label for="filterBuilderSelect">{% trans "Select filter" %}:</label>
+                        <select aria-describedby="select-description" name='select' id='filterBuilderSelect'>
                             <option value='Sort'>{% trans "Sorting" %}</option>
                             <option value='Owner'>{% trans "Owner" %}</option>
                             <option value='Queue'>{% trans "Queue" %}</option>
@@ -59,10 +61,13 @@
                             <option value='Keywords'>{% trans "Keywords" %}</option>
                             <option value='Dates'>{% trans "Date Range" %}</option>
                         </select>
-                        <button class='btn btn-success btn-sm' id='filterBuilderButton'><i class="fas fa-plus-circle"></i></button>
+                        <small id="select-description" class="form-text text-muted">{% trans "Add another filter to list of filers for finer selection of displayed tickets" %}</small>
+                        <button class='btn btn-success btn-sm' id='filterBuilderButton'>{% trans "Add selected filter" %} <i class="fas fa-plus-circle"></i></button>
                     {% csrf_token %}</form>
+                        </div>
 
                     <form method='get' action='./'>
+                        <div class="d-flex align-items-stretch">
                         <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'>
@@ -128,15 +133,17 @@
                         <p class='filterHelp'>{% trans "Keywords are case-insensitive, and will be looked for in the title, body and submitter fields." %}</p>
                         <button class='filterBuilderRemove btn btn-danger btn-sm'><i class="fas fa-trash-alt"></i></button>
                         </div>
+                        </div> <!-- end div d-flex class -->
                         <hr style='clear: both;' />
-                        <input class="btn btn-primary" type='submit' value='{% trans "Apply Filter" %}' />
+                        <input class="btn btn-primary btn-sm" type='submit' value='{% trans "Apply Filters" %}' />
                         {% if from_saved_query and saved_query.user == user %}
                         <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>
+                    {% csrf_token %}
+                    </form>
                 </div>
                 </div>
             </div> <!-- end card -->
@@ -144,7 +151,7 @@
             <div class="card">
                 <div class="card-header" id="headingTwo">
                 <h5 class="mb-0">
-                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    <button class="btn btn-link collapsed btn-sm" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                     <i class="fas fa-save"></i>
                     <strong>{% trans "Save Query" %}</strong>
                     </button>
@@ -175,7 +182,7 @@
             <div class="card">
                 <div class="card-header" id="headingThree">
                 <h5 class="mb-0">
-                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                    <button class="btn btn-link collapsed btn-sm" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                     <i class="fas fa-clipboard-check"></i>
                     <strong>{% trans "Use Saved Query" %}</strong>
                     </button>
@@ -210,13 +217,12 @@
     <div class="card-body">
         {{ search_message|safe }}
         <form method='post' action='{% url 'helpdesk:mass_update' %}' id="ticket_mass_update">
-            <table width="100%" class="table table-striped table-bordered table-hover" id="ticketTable" data-page-length='{{ default_tickets_per_page }}'>
-                <thead>
+            <table width="100%" class="table table-sm table-striped table-bordered table-hover" id="ticketTable" data-page-length='{{ default_tickets_per_page }}'>
+                <thead class="thead-light">
                     <tr>
-                        <th>#</th>
                         <th>&nbsp;</th>
-                        <th>{% trans "Pr" %}</th>
-                        <th>{% trans "Title" %}</th>
+                        <th>{% trans "Ticket" %}</th>
+                        <th>{% trans "Prority" %}</th>
                         <th>{% trans "Queue" %}</th>
                         <th>{% trans "Status" %}</th>
                         <th>{% trans "Created" %}</th>
@@ -301,18 +307,6 @@
                 },
 
                 "columns": [
-                  {"data": "ticket",
-                    "render": function (data, type, row, meta)
-                    {
-                        var id = data.split(" ")[0];
-                        var name = data.split(" ")[1];
-                        if (type === 'display')
-                        {
-                          data = '<b><a href="' + get_url(row) + '" >' + name + '</a></b>';
-                        }
-                        return data
-                    }
-                  },
                   {"data": "id",
                     "orderable": false,
                     "render": function(data, type, row, meta)
@@ -324,22 +318,49 @@
                         return data
                       }
                   },
-                  {"data": "priority"},
-                  {"data": "title",
+                  {"data": "ticket",
                     "render": function (data, type, row, meta)
                     {
-                      if (type === 'display')
-                      {
-                        data = '<b><a href="' + get_url(row) + '" >' + data + '</a></b>';
-                      }
-                      return data
+                        var id = data.split(" ")[0];
+                        var name = data.split(" ")[1];
+                        if (type === 'display')
+                        {
+                                data = '<div class="tickettitle"><a href="' + get_url(row) + '" >' + 
+                                        row.id + '. ' + 
+                                        row.title + '</a></div>';
+                        }
+                        return data
                     }
                   },
-                  {"data": "queue"},
+                  {"data": "priority",
+                   "render": function (data, type, row, meta) {
+                           var priority = "success";
+                           if (data == 4 ) {
+                                priority = "warning";
+                           } else if (data == 5) {
+                                priority = "danger";
+                           }
+                           return '<p class="text-'+priority+'">'+data+'</p>';
+                        }
+                  },
+                  {"data": "queue",
+                   "render": function(data, type, row, meta) {
+                           return data.title;
+                   }
+                  },
                   {"data": "status"},
                   {"data": "created"},
                   {"data": "due_date"},
-                  {"data": "assigned_to"},
+                  {"data": "assigned_to",
+                   "render": function(data, type, row, meta) {
+                           if (data != "None") {
+                                return data;
+                           } 
+                           else {
+                                return "";
+                           }
+                   }
+                  },
                   {"data": "time_spent"},
                 ]
             });
diff --git a/helpdesk/templates/helpdesk/ticket_list_table.html b/helpdesk/templates/helpdesk/ticket_list_table.html
index fa4b9d69..f12c39e2 100644
--- a/helpdesk/templates/helpdesk/ticket_list_table.html
+++ b/helpdesk/templates/helpdesk/ticket_list_table.html
@@ -5,7 +5,7 @@
     <tr class="{{ ticket.get_priority_css_class }}">
         <th><a href='{{ ticket.get_absolute_url }}'>{{ ticket.ticket }}</a></th>
         <td><input type='checkbox' name='ticket_id' value='{{ ticket.id }}' class='ticket_multi_select' /></td>
-        <td>{{ ticket.priority }}</td>
+        <td>{{ ticket.priority }}|||||</td>
         <th><a href='{{ ticket.get_absolute_url }}'>{{ ticket.title }}</a></th>
         <td>{{ ticket.queue }}</td>
         <td>{{ ticket.get_status }}</td>