diff --git a/modules/dreamview/backend/handlers/image_handler.cc b/modules/dreamview/backend/handlers/image_handler.cc
index 94d8a5a7cf93da72fae1ba8d76b4269bb2fb93f8..5967495f5ee5d87c8df59c738ac0a3d152edbbd4 100644
--- a/modules/dreamview/backend/handlers/image_handler.cc
+++ b/modules/dreamview/backend/handlers/image_handler.cc
@@ -26,10 +26,12 @@ limitations under the License.
 namespace apollo {
 namespace dreamview {
 
+using apollo::drivers::CompressedImage;
 using apollo::drivers::Image;
 
 constexpr double ImageHandler::kImageScale;
 
+template <>
 void ImageHandler::OnImage(const std::shared_ptr<Image> &image) {
   if (requests_ == 0) {
     return;
@@ -39,23 +41,37 @@ void ImageHandler::OnImage(const std::shared_ptr<Image> &image) {
               const_cast<char *>(image->data().data()), image->step());
   cv::cvtColor(mat, mat, cv::COLOR_RGB2BGR);
   cv::resize(
-    mat, mat,
-    cv::Size(static_cast<int>(image->width() * ImageHandler::kImageScale),
-             static_cast<int>(image->height() * ImageHandler::kImageScale)),
-    0, 0, CV_INTER_LINEAR);
+      mat, mat,
+      cv::Size(static_cast<int>(image->width() * ImageHandler::kImageScale),
+               static_cast<int>(image->height() * ImageHandler::kImageScale)),
+      0, 0, CV_INTER_LINEAR);
 
   std::unique_lock<std::mutex> lock(mutex_);
   cv::imencode(".jpg", mat, send_buffer_, std::vector<int>() /* params */);
   cvar_.notify_all();
 }
 
+template <>
+void ImageHandler::OnImage(
+    const std::shared_ptr<CompressedImage> &compressed_image) {
+  std::vector<uint8_t> compressed_raw_data(compressed_image->data().begin(),
+                                           compressed_image->data().end());
+  cv::Mat mat_image = cv::imdecode(compressed_raw_data, CV_LOAD_IMAGE_COLOR);
+  cv::cvtColor(mat_image, mat_image, cv::COLOR_RGB2BGR);
+
+  std::unique_lock<std::mutex> lock(mutex_);
+  cv::imencode(".jpg", mat_image, send_buffer_,
+               std::vector<int>() /* params */);
+  cvar_.notify_all();
+}
+
 void ImageHandler::OnImageFront(const std::shared_ptr<Image> &image) {
   if (FLAGS_use_navigation_mode) {
     OnImage(image);
   }
 }
 
-void ImageHandler::OnImageShort(const std::shared_ptr<Image> &image) {
+void ImageHandler::OnImageShort(const std::shared_ptr<CompressedImage> &image) {
   if (!FLAGS_use_navigation_mode) {
     OnImage(image);
   }
@@ -69,9 +85,9 @@ ImageHandler::ImageHandler()
         OnImageFront(image);
       });
 
-  node_->CreateReader<Image>(
+  node_->CreateReader<CompressedImage>(
       FLAGS_image_short_topic,
-      [this](const std::shared_ptr<Image> &image) {
+      [this](const std::shared_ptr<CompressedImage> &image) {
         OnImageShort(image);
       });
 }
diff --git a/modules/dreamview/backend/handlers/image_handler.h b/modules/dreamview/backend/handlers/image_handler.h
index 16988f21c6c3560d49f24d7e83da61710170af18..0517d4393e9352a694219495f8e1771faf5c9234 100644
--- a/modules/dreamview/backend/handlers/image_handler.h
+++ b/modules/dreamview/backend/handlers/image_handler.h
@@ -55,10 +55,12 @@ class ImageHandler : public CivetHandler {
   bool handleGet(CivetServer *server, struct mg_connection *conn);
 
  private:
-  void OnImage(const std::shared_ptr<apollo::drivers::Image> &image);
+  template <typename SensorMsgsImage>
+  void OnImage(const std::shared_ptr<SensorMsgsImage> &image);
 
   void OnImageFront(const std::shared_ptr<apollo::drivers::Image> &image);
-  void OnImageShort(const std::shared_ptr<apollo::drivers::Image> &image);
+  void OnImageShort(
+      const std::shared_ptr<apollo::drivers::CompressedImage> &image);
 
   std::vector<uint8_t> send_buffer_;
   std::atomic<int> requests_;
diff --git a/modules/dreamview/frontend/src/components/Dreamview.js b/modules/dreamview/frontend/src/components/Dreamview.js
index 00ebe571c5864bfc08c60ab9c33ed88186303d97..3c66abb36c7c48ab42ab36e8b9c4293101d0e457 100644
--- a/modules/dreamview/frontend/src/components/Dreamview.js
+++ b/modules/dreamview/frontend/src/components/Dreamview.js
@@ -88,7 +88,7 @@ export default class Dreamview extends React.Component {
                         <div className="right-pane">
                             {options.showPNCMonitor && options.showVideo &&
                                 <div>
-                                    <Tab><span>Camera Sensor</span></Tab>
+                                    <Tab><span>Camera View</span></Tab>
                                     <CameraVideo />
                                 </div>
                             }
diff --git a/modules/dreamview/frontend/src/components/Tasks/SensorCamera.js b/modules/dreamview/frontend/src/components/Tasks/SensorCamera.js
index 94269e3032100226b2984e764706e543c4e64432..d5ac69ca531a4d943e5215aa34791e67d783b02c 100644
--- a/modules/dreamview/frontend/src/components/Tasks/SensorCamera.js
+++ b/modules/dreamview/frontend/src/components/Tasks/SensorCamera.js
@@ -14,7 +14,7 @@ export default class SensorCamera extends React.Component {
     render() {
         return (
             <div className="card camera">
-                <div className="card-header"><span>Camera Sensor</span></div>
+                <div className="card-header"><span>Camera View</span></div>
                 <div className="card-content-column">
                     <CameraVideo />
                 </div>