diff --git a/app.py b/app.py
index 4b5d6dd..a14342c 100644
--- a/app.py
+++ b/app.py
@@ -246,7 +246,7 @@ def camera_status_plot(esn=None):
     fig.savefig(buf, format="png", transparent=True)
     # Embed the result in the html output.
     data = base64.b64encode(buf.getbuffer()).decode("ascii")
-    return f"<h3>Graph of Status Events</h3><div class='col-md-12'><img src='data:image/png;base64,{data}' style='max-width:100%'/></div>"
+    return f"<h3>Graph of Status Events <i class='bi bi-bar-chart'></i></h3><div class='col-md-12'><img src='data:image/png;base64,{data}' style='max-width:100%'/></div>"
 
 
 
diff --git a/templates/base.html b/templates/base.html
index ffd8f39..044e739 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -26,6 +26,8 @@
     <!-- self-hosted fontawesome -->
     <link href="/static/css/all.css" rel="stylesheet">
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+
     <link href="/static/theme.css" rel="stylesheet">
 
     <style>
diff --git a/templates/camera_detail_partial.html b/templates/camera_detail_partial.html
index 6b1dfb7..cd0ab9a 100644
--- a/templates/camera_detail_partial.html
+++ b/templates/camera_detail_partial.html
@@ -1,3 +1,3 @@
-<h3>Preview Image</h3>
+<h3>Preview Image <i class="bi bi-card-image"></i></h3>
 <h5>{{ template_values['camera'].name }}</h5>
 <img src="/camera/{{ template_values['camera'].id }}/live_preview" style="max-height:360px;">
diff --git a/templates/camera_events_partial.html b/templates/camera_events_partial.html
index c29bc79..8e1b835 100644
--- a/templates/camera_events_partial.html
+++ b/templates/camera_events_partial.html
@@ -1,4 +1,4 @@
-<h3>Events</h3>
+<h3>List of Events <i class="bi bi-calendar-event"></i></h3>
 <h5>{{ template_values['camera'].name }}</h5>
 <ul>
     {% if template_values['events'] %}
diff --git a/templates/camera_preview.html b/templates/camera_preview.html
index 766ac72..43af768 100644
--- a/templates/camera_preview.html
+++ b/templates/camera_preview.html
@@ -1,3 +1,3 @@
-<h3>Preview Image</h3>
+<h3>Preview Image <i class="bi bi-card-image"></i></h3>
 <h5>{{ template_values['camera'].name }}</h5>
 <img src="/camera/{{ template_values['camera'].id }}/preview_image" style="max-height:360px; max-width:100%">
diff --git a/templates/cameras_partial.html b/templates/cameras_partial.html
index 9f81819..58c7ee7 100644
--- a/templates/cameras_partial.html
+++ b/templates/cameras_partial.html
@@ -1,47 +1,38 @@
 
 
-<h3>Cameras</h3>
+<h3>Cameras <i class="bi bi-camera-video"></i></h3>
 <h5>Online</h5>
-<ul>
 {% for camera in template_values['cameras'] %}
-    {% if camera.is_online() and camera.bridge_id %}
-        <li>{{ camera.name }}</li>
-        <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
-        <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
-        <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
+    {% if camera.is_online() %}
+        <div class="row">
+            <div class="col-8">
+                {{ camera.name }}
+            </div>
+            <div class="col-4">
+                 <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail"><i class="bi bi-card-image" title="click to load preview image"></i></a>
+                <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events"><i class="bi bi-calendar-event" title="click to load events list"></i></a>
+                <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot"><i class="bi bi-bar-chart" title="click to generate graph of events"></i></a>
+            </div>
+        </div>
     {% endif %}
 {% endfor %}
-<hr>
-{% for camera in template_values['cameras'] %}
-    {% if camera.is_online() and camera.bridge_id == None %}
-        <li>{{ camera.name }}</li>
-        <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
-        <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
-        <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
-    {% endif %}
-{% endfor %}
-</ul>
 
 <h5>Offline</h5>
-<ul>
 {% for camera in template_values['cameras'] %}
-    {% if camera.is_offline() and camera.bridge_id %}
-        <li>{{ camera.name }}</li>
-        <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
-        <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
-        <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
+    {% if camera.is_offline() %}
+        <div class="row">
+            <div class="col-8">
+                {{ camera.name }}
+            </div>
+            <div class="col-4">
+                 <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail"><i class="bi bi-card-image" title="click to load preview image"></i></a>
+                <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events"><i class="bi bi-calendar-event" title="click to load events list"></i></a>
+                <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot"><i class="bi bi-bar-chart" title="click to generate graph of events"></i></a>
+            </div>
+        </div>
     {% endif %}
 {% endfor %}
-<hr>
-{% for camera in template_values['cameras'] %}
-    {% if camera.is_offline() and camera.bridge_id == None %}
-        <li>{{ camera.name }}</li>
-        <a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
-        <a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
-        <a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
-    {% endif %}
-{% endfor %}
-</ul>
+
 
  <button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list"  class="btn btn-md btn-secondary">load cameras</button>
 <br>
diff --git a/templates/index.html b/templates/index.html
index 1b7c255..38db4b2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -29,16 +29,16 @@
 			{% include 'cameras_partial.html' %}
 		</div>    
 	    <div class="col-md-7" id="camera_detail">
-	         <h2>Preview Image</h2>
+	         <h2>Preview Image <i class="bi bi-card-image"></i></h2>
 	    </div>
 	</div>
 <br>
 	<div class="row">
 		<div class="col-md-5" id="camera_status_events" style="max-height:400px; overflow:auto;">
-			<h2>List of Events</h2>
+			<h2>List of Events <i class="bi bi-calendar-event"></i></h2>
 		</div>
 		<div class="col-md-7" id="camera_status_plot">
-			<h2>Graph of Status Events</h2>
+			<h2>Graph of Status Events <i class="bi bi-bar-chart"></i></h2>
 		</div>
 	</div>