diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index 48474e7dc5..908d461e96 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -1 +1,61 @@
-Hello imagery!
+<div class="t-imagery">
+    <!-- Main image -->
+    <div
+        class="l-image-main-wrapper"
+        ng-mouseenter="showLocalControls = true;"
+        ng-mouseleave="showLocalControls = false;"
+        >
+        <div
+            class="l-local-controls s-local-controls"
+            ng-show="showLocalControls"
+             >
+            <a
+               class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+               ng-click="plot.stepBackPanZoom()"
+               ng-show="1"
+               title="Restore previous pan/zoom">
+                <span class="ui-symbol icon">&lt;</span>
+            </a>
+
+            <a
+               class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+               ng-click="plot.unzoom()"
+               ng-show="1"
+               title="Reset pan/zoom">
+                <span class="ui-symbol icon">I</span>
+            </a>
+        </div>
+
+
+
+        <div
+            class="l-image-main s-image-main"
+            ng-class="{ paused:paused, stale:false }"
+            style="background-image:url('http://www.hacskaylo.com/wedding/images/moon-surface-with-ice.jpg');"
+            ></div>
+        <div class="l-image-main-controlbar bar">
+            <div class="left">
+                <a
+                    class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"
+                    ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
+                    ><span class="ui-symbol icon"></span></a>
+                <span class="l-timezone">UTC</span>
+                <span class="l-time">16:03:43</span>
+                <span class="l-date">2020/04/27</span>
+            </div>
+            <div class="right">
+                <a
+                    class="t-btn l-btn s-btn s-icon-btn s-very-subtle pause-play sm"
+                    ng-click="paused = (paused)? false:true"
+                    ng-class="{ paused:paused }"
+                    ><span class="ui-symbol icon"></span></a>
+                <a href=""
+                    class="l-btn s-btn s-icon-btn l-mag s-mag ui-symbol vsm"
+                    ng-click="clipped = false"
+                    ng-show="clipped === true"
+                    title="Not all of image is visible; click to reset."
+                    ></a>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/platform/features/imagery/src/controllers/ImageryController.js b/platform/features/imagery/src/controllers/ImageryController.js
new file mode 100644
index 0000000000..f6fbcdb871
--- /dev/null
+++ b/platform/features/imagery/src/controllers/ImageryController.js
@@ -0,0 +1,82 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function ImageryController($scope, telemetryHandler, telemetryFormatter) {
+            var timestamp = "",
+                imageUrl = "",
+                handle;
+
+            function releaseSubscription() {
+                if (handle) {
+                    handle.unsubscribe();
+                    handle = undefined;
+                }
+            }
+
+            function updateValues() {
+                var imageObject = handle && handle.getTelemetryObjects()[0];
+                if (imageObject) {
+                    timestamp = telemetryFormatter.formatDomainValue(
+                        handle.getDomainValue(imageObject)
+                    );
+                    imageUrl = handle.getRangeValue(imageObject);
+                }
+            }
+
+            // Create a new subscription; telemetrySubscriber gets
+            // to do the meaningful work here.
+            function subscribe(domainObject) {
+                releaseSubscription();
+                timestamp = "";
+                imageUrl = "";
+                handle = domainObject && telemetryHandler.handle(
+                    domainObject,
+                    updateValues,
+                    true // Lossless
+                );
+            }
+
+            // Subscribe to telemetry when a domain object becomes available
+            $scope.$watch('domainObject', subscribe);
+
+            // Unsubscribe when the plot is destroyed
+            $scope.$on("$destroy", releaseSubscription);
+
+            return {
+                getTimestamp: function () {
+                    return timestamp;
+                },
+                getImageUrl: function () {
+                    return imageUrl;
+                }
+            };
+        }
+
+        return ImageryController;
+    }
+);