diff --git a/src/rubintv/handlers/external.py b/src/rubintv/handlers/external.py
index 4b44fb74..2604cff3 100644
--- a/src/rubintv/handlers/external.py
+++ b/src/rubintv/handlers/external.py
@@ -67,6 +67,12 @@ async def get_location_camera(
     return (location, camera)
 
 
+# @external_router.get(
+#     "/api/location/{location_name}/camera/{camera_name}",
+#     response_model=Tuple[Location, Camera],
+# )
+
+
 @external_router.get(
     "/{location_name}", response_class=HTMLResponse, name="location"
 )
@@ -93,7 +99,10 @@ async def get_camera_page(
     location, camera = await get_location_camera(
         location_name, camera_name, request
     )
+    template = "camera"
+    if not camera.online:
+        template = "not_online"
     return templates.TemplateResponse(
-        "camera.jinja",
+        f"{template}.jinja",
         {"request": request, "location": location, "camera": camera},
     )
diff --git a/src/rubintv/templates/_camera.jinja b/src/rubintv/templates/_camera.jinja
new file mode 100644
index 00000000..32603821
--- /dev/null
+++ b/src/rubintv/templates/_camera.jinja
@@ -0,0 +1,12 @@
+{% extends "_layout.jinja" %}
+{% block pagetitle %}
+  <a href="{{
+    url_for('camera',
+    location_name=location.name,
+    camera_name=camera.name)
+  }}">
+    {{ camera.title }}
+  </a>
+  {% block inline_status %}
+  {% endblock inline_status %}
+{% endblock pagetitle %}
diff --git a/src/rubintv/templates/camera.jinja b/src/rubintv/templates/camera.jinja
index 5aa50257..5ade7ed9 100644
--- a/src/rubintv/templates/camera.jinja
+++ b/src/rubintv/templates/camera.jinja
@@ -1,9 +1,74 @@
-{% extends "_layout.jinja" %}
-{% block pagetitle %}
-  {{ camera.title }}
-{% endblock pagetitle %}
+{% extends "_camera.jinja" %}
+{% block pagesubtitle %}
+  Latest
+{% endblock pagesubtitle  %}
+
+{% block undertitle %}
+  {{ date }}
+  <a
+    class="button historical"
+    {# href="{{ url_for('historical', location=location_name.name, camera_name=camera.name) }}" #}
+  >
+    Historical<img src="{{ url_for('static', path='images/history-line.svg') }}">
+  </a>
+{% endblock undertitle %}
 
 {% block breadcrumb %}
-<a href="{{ url_for('home') }}">Home</a>>
-<p>{{ location.title }}</p>
-{% endblock breadcrumb %}
+  <a href="{{ url_for('home') }}">
+    Home
+  </a>>
+  <a href="{{ url_for('location', location_name=location.name) }}">
+    {{ location.title }}
+  </a>>
+  <p>{{ camera.title }}</p>
+{% endblock breadcrumb  %}
+
+{% block content %}
+  <div id="per-day-refreshable" class="columns">
+    {% include "camera_parts/per-day-refresh.jinja" %}
+  </div>
+
+  <section>
+    <nav id="per-image-menu" class="channel-menu" role="navigation">
+      <h3>Current image channels</h3>
+        <ul class="channels flr">
+          {% for channel in camera.channels %}
+            <li class="channel service"
+                id="{{ channel.prefix }}"
+                data-dependent-on="{{ channel.service_dependency }}">
+              <a  class="button button-large {{ channel.name }}"
+                  {# href="{{ url_for('current', location=location.slug, camera=camera.slug, channel=channel.slug) }}" #}
+                  target="_blank">
+                <div class="heartbeat"></div>
+                <span>{{ channel.title }}</span>
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </nav>
+  </section>
+
+  <div class="metadata-status">
+    <h4>metadata service:&nbsp;</h4>
+    <div class="service" id="{{ camera.metadata_slug }}_metadata">
+      <div class="heartbeat"></div>
+    </div>
+  </div>
+
+    <section id="channel-day-data">
+      {# {% include "cameras/data-table-header.jinja" %} #}
+    </section>
+  {% if camera.metadata_headers %}
+    <script type="application/json" id="metadata-headers">
+      {{ camera.metadata_headers|tojson }}
+    </script>
+  {% endif %}
+{% endblock content %}
+
+{% block footer_scripts %}
+  {% if camera.js_entry %}
+    {% set cam_js = "assets/" + camera.js_entry + ".js" %}
+    <script src='{{ url_for("static", path=cam_js) }}'></script>
+  {% endif %}
+  {{ super() }}
+{% endblock footer_scripts  %}
diff --git a/src/rubintv/templates/camera_parts/night-report-link.jinja b/src/rubintv/templates/camera_parts/night-report-link.jinja
new file mode 100644
index 00000000..789ddbe1
--- /dev/null
+++ b/src/rubintv/templates/camera_parts/night-report-link.jinja
@@ -0,0 +1,20 @@
+{% if night_reports_link %}
+  {% set label = camera.night_report_label %}
+  <div id="night_reports_link">
+    <h3>{{ label }}</h3>
+    {% if night_reports_link == "current" %}
+      <a href="{{ url_for('night_reports', location=location.slug, camera=camera.slug) }}" class="button button-large night-report">
+        <img src="{{ url_for('static', path='images/crescent-moon.svg') }}">
+        {{ label }}
+      </a>
+    {% else %}
+    {# show historical button with date #}
+      <a
+        href="{{ url_for('nr_history', location=location.slug, camera=camera.slug, date_str=date|string ) }}"
+        class="button button-large night-report">
+        <img src="{{ url_for('static', path='images/crescent-moon.svg') }}">
+        {{ label }} for {{ date }}
+      </a>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/src/rubintv/templates/camera_parts/per-day-channels.jinja b/src/rubintv/templates/camera_parts/per-day-channels.jinja
new file mode 100644
index 00000000..c7b1d545
--- /dev/null
+++ b/src/rubintv/templates/camera_parts/per-day-channels.jinja
@@ -0,0 +1,21 @@
+ {% if per_day | length %}
+  <nav id="per-night-menu" class="channel-menu" role="navigation">
+    <h3>Per Night Channels</h3>
+    <ul class="channels flr">
+      {% for pd_channel_name in per_day %}
+        <li class="channel">
+          <a  class="button button-large {{ pd_channel_name }}"
+              href="{{ per_day[pd_channel_name] }}">
+            <img src="{{
+              url_for('static', filename='images/' + pd_channel_name + '.svg')
+            }}">
+            {{ camera.per_day_channels[pd_channel_name]['label'] }}
+            <span class="date">
+              {{ date }}
+            </span>
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+{% endif %}
diff --git a/src/rubintv/templates/camera_parts/per-day-refresh.jinja b/src/rubintv/templates/camera_parts/per-day-refresh.jinja
new file mode 100644
index 00000000..b5101358
--- /dev/null
+++ b/src/rubintv/templates/camera_parts/per-day-refresh.jinja
@@ -0,0 +1,2 @@
+{% include "camera_parts/night-report-link.jinja" %}
+{% include "camera_parts/per-day-channels.jinja" %}
diff --git a/src/rubintv/templates/not_online.jinja b/src/rubintv/templates/not_online.jinja
new file mode 100644
index 00000000..16dc45cd
--- /dev/null
+++ b/src/rubintv/templates/not_online.jinja
@@ -0,0 +1,5 @@
+{% extends "_camera.jinja" %}
+
+{% block content %}
+  <h2 class="page-title">Coming soon...</h2>
+{% endblock content %}