diff --git a/EagleEyev3/__init__.py b/EagleEyev3/__init__.py
index eb3f694..c411700 100644
--- a/EagleEyev3/__init__.py
+++ b/EagleEyev3/__init__.py
@@ -466,6 +466,19 @@ class EagleEyev3():
         }
 
 
+    def get_camera_by_id(self, esn):
+        found_camera = None
+        for camera in self.cameras:
+            if camera.id == esn:
+                found_camera = camera
+                break
+
+        if found_camera == None:
+            camera = Camera()
+
+        logging.info(f"returning camera {camera} for search query {esn}")
+        return camera
+
 
 
 
@@ -490,7 +503,10 @@ class Device():
         return self.status['connectionStatus'] == "online"
 
     def is_offline(self):
-        return self.status['connectionStatus'] == "deviceOffline" or self.status['connectionStatus'] == "bridgeOffline"
+        return self.status['connectionStatus'] == "deviceOffline" \
+            or self.status['connectionStatus'] == "bridgeOffline" \
+            or self.status['connectionStatus'] == "error"
+
 
     def __repr__(self):
         if self.is_online():
diff --git a/app.py b/app.py
index 1406ebe..c6ef7c4 100644
--- a/app.py
+++ b/app.py
@@ -46,8 +46,17 @@ def index():
         logging.info(f"{check['success']} - check get_current_user")
 
 
+    #logging.info(een.cameras)
+
+
+    # this call could get expensive
+    een.get_list_of_cameras()
+
+    #logging.info(een.cameras)
+
     values = {
-        "current_user": een.current_user
+        "current_user": een.current_user,
+        "cameras":      een.cameras
     }
 
     return render_template('index.html', template_values=values)
@@ -68,7 +77,7 @@ def login_callback():
         # use the include code parameter to complete login process
         oauth_object = een.login_tokens(code)
     
-    
+
     return redirect(url_for('index'))
 
 
@@ -81,5 +90,41 @@ def logout():
     return redirect(url_for('index'))
 
 
+@app.route('/cameras')
+def cameras():
+    if 'een' in session:
+        een = session['een']
+    else:
+        een = EagleEyev3()    
+
+    een.get_list_of_cameras()
+
+    values = {
+        "current_user": een.current_user,
+        "cameras":      een.cameras
+    }
+
+    return render_template('cameras_partial.html', template_values=values)
+
+@app.route('/camera/<esn>')
+def camera_detail(esn=None):
+    if 'een' in session:
+        een = session['een']
+    else:
+        een = EagleEyev3()    
+
+    camera = een.get_camera_by_id(esn)
+
+    values = {
+        "current_user": een.current_user,
+        "camera":       camera,
+        "events":       camera.get_list_of_events()
+    }
+
+    return render_template('camera_detail_partial.html', template_values=values) 
+
+
+
+
 if __name__ == '__main__':
     app.run(host=een.server_host, port=een.server_port)
diff --git a/static/placeholder.png b/static/placeholder.png
new file mode 100644
index 0000000..93a9347
Binary files /dev/null and b/static/placeholder.png differ
diff --git a/templates/base.html b/templates/base.html
index 2c1fe4c..0768068 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,5 +1,4 @@
 
-{% if "X-PJAX" not in request.headers %}
 <!doctype html>
 <html lang="en">
   <head>
@@ -10,7 +9,7 @@
 
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
     {% block title %}
-    <title>classifier.een.cloud</title>
+    <title>status.mcotton.space</title>
     {% endblock %}
 
     <!-- Bootstrap core CSS -->
@@ -61,14 +60,11 @@
  
 
     <main role="main">
-{% endif %}
 
     {% block main %}
       
     {% endblock %}
 
-{% if "X-PJAX" not in request.headers %}
-
     </main>
 
     <footer class="text-muted">
@@ -88,35 +84,14 @@
 
     <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
-    <script src="/static/js/jquery.pjax.js"></script>
+
+     <script src="https://unpkg.com/htmx.org@1.9.2"></script>
 
     <script>
 
       $(document).ready(function() {
 
-        $('#user_mode_toggle').on('click', function(event) {
-          event.stopPropagation();
-
-          $.ajax({
-            type: "POST",
-            url: '/api/v1/user_mode/toggle',
-            dataType: "text",
-            contentType : 'application/json',
-            success: function(data) {
-              //$('#labelModal-add').text('Saved');
-              //$('#labelModal').modal('hide');
-              location.reload();                
-            },
-            error: function(data) {
-              console.log(data)
-              $('#labelModal-add').text('Failed');
-              //$('#labelModal').modal('hide');
-              //location.reload();                
-            }
-          });
-
-
-        });
+        
       });
       
 
@@ -128,4 +103,3 @@
     {% endblock%}
   </body>
 </html>
-{% endif %}
diff --git a/templates/camera_detail_partial.html b/templates/camera_detail_partial.html
new file mode 100644
index 0000000..00f0d6d
--- /dev/null
+++ b/templates/camera_detail_partial.html
@@ -0,0 +1,12 @@
+
+
+    <div class="row">
+        <div class="col-md-6">
+            <h3>{{ template_values['camera'].name }}</h3>
+            <img src="/static/placeholder.png" style="max-height:360px;">
+        </div>
+
+        <div class="col-md-6">
+            <h3>Events</h3>
+        </div>
+    </div>
diff --git a/templates/index.html b/templates/index.html
index 5bf4791..0122365 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,12 +10,16 @@
 
 {% block main %}
 
-<div class="container text-center"> 
-    <div class="row">
-        <div class="col-md-6 offset-3">
-            <h1>Hello {{ template_values['current_user']['firstName'] }} {{ template_values['current_user']['lastName'] }}</h1>
-        </div>
-    </div>
+<div class="container text-center">
+
+    
+    <div class="row" id="camera_list">
+    	{% include 'cameras_partial.html' %}
+	</div>
+
+
+
+
 </div>
 
 {% endblock %}
