diff --git a/install.yml b/install.yml
index c5c82f0..30efd9b 100644
--- a/install.yml
+++ b/install.yml
@@ -1,5 +1,7 @@
 # This file should be committed to your app code.
 version: 1.0
+# This should be greater or equal to your tethys-platform in your environment
+tethys_version: ">=4.0.0"
 # This should match the app - package name in your setup.py
 name: earth_engine
 
@@ -15,4 +17,6 @@ requirements:
       - geojson
   pip:
 
-post:
+  npm:
+
+post:
\ No newline at end of file
diff --git a/setup.py b/setup.py
index 90a817f..7f32563 100644
--- a/setup.py
+++ b/setup.py
@@ -1,16 +1,16 @@
 from setuptools import setup, find_namespace_packages
-from tethys_apps.app_installation import find_resource_files
+from tethys_apps.app_installation import find_all_resource_files
+from tethys_apps.base.app_base import TethysAppBase
 
 # -- Apps Definition -- #
 app_package = 'earth_engine'
-release_package = 'tethysapp-' + app_package
+release_package = f'{TethysAppBase.package_namespace}-{app_package}'
 
 # -- Python Dependencies -- #
 dependencies = []
 
 # -- Get Resource File -- #
-resource_files = find_resource_files('tethysapp/' + app_package + '/templates', 'tethysapp/' + app_package)
-resource_files += find_resource_files('tethysapp/' + app_package + '/public', 'tethysapp/' + app_package)
+resource_files = find_all_resource_files(app_package, TethysAppBase.package_namespace)
 
 
 setup(
diff --git a/tethysapp/earth_engine/__init__.py b/tethysapp/earth_engine/__init__.py
index 8766881..c927d02 100644
--- a/tethysapp/earth_engine/__init__.py
+++ b/tethysapp/earth_engine/__init__.py
@@ -1 +1 @@
-# Included for native namespace package support
\ No newline at end of file
+# Included for native namespace package support
diff --git a/tethysapp/earth_engine/app.py b/tethysapp/earth_engine/app.py
index 23889dc..d368756 100644
--- a/tethysapp/earth_engine/app.py
+++ b/tethysapp/earth_engine/app.py
@@ -1,4 +1,4 @@
-from tethys_sdk.base import TethysAppBase, url_map_maker
+from tethys_sdk.base import TethysAppBase
 
 
 class EarthEngine(TethysAppBase):
@@ -6,49 +6,13 @@ class EarthEngine(TethysAppBase):
     Tethys app class for Earth Engine.
     """
 
-    name = 'Earth Engine'
-    index = 'earth_engine:home'
-    icon = 'earth_engine/images/earth-engine-logo.png'
-    package = 'earth_engine'
+    name = 'Google Earth Engine Tutorial'
+    description = ''
+    package = 'earth_engine'  # WARNING: Do not change this value
+    index = 'home'
+    icon = f'{package}/images/earth-engine-logo.png'
     root_url = 'earth-engine'
     color = '#524745'
-    description = ''
     tags = ''
     enable_feedback = False
-    feedback_emails = []
-
-    def url_maps(self):
-        """
-        Add controllers
-        """
-        UrlMap = url_map_maker(self.root_url)
-
-        url_maps = (
-            UrlMap(
-                name='home',
-                url='earth-engine',
-                controller='earth_engine.controllers.home'
-            ),
-            UrlMap(
-                name='viewer',
-                url='earth-engine/viewer',
-                controller='earth_engine.controllers.viewer'
-            ),
-            UrlMap(
-                name='get_image_collection',
-                url='earth-engine/viewer/get-image-collection',
-                controller='earth_engine.controllers.get_image_collection'
-            ),
-            UrlMap(
-                name='get_time_series_plot',
-                url='earth-engine/viewer/get-time-series-plot',
-                controller='earth_engine.controllers.get_time_series_plot'
-            ),
-            UrlMap(
-                name='about',
-                url='earth-engine/about',
-                controller='earth_engine.controllers.about'
-            )
-        )
-
-        return url_maps
+    feedback_emails = []
\ No newline at end of file
diff --git a/tethysapp/earth_engine/controllers.py b/tethysapp/earth_engine/controllers.py
index 6e59a25..292a2d5 100644
--- a/tethysapp/earth_engine/controllers.py
+++ b/tethysapp/earth_engine/controllers.py
@@ -1,19 +1,19 @@
-import logging
 import datetime as dt
 import geojson
+import logging
+from simplejson.errors import JSONDecodeError
 from django.http import JsonResponse, HttpResponseNotAllowed
 from django.shortcuts import render
-from simplejson.errors import JSONDecodeError
+from tethys_sdk.routing import controller
 from tethys_sdk.gizmos import SelectInput, DatePicker, Button, MapView, MVView, PlotlyView, MVDraw
-from tethys_sdk.permissions import login_required
-from .helpers import generate_figure
 from .gee.methods import get_image_collection_asset, get_time_series_from_image_collection
 from .gee.products import EE_PRODUCTS
+from .helpers import generate_figure
 
 log = logging.getLogger(f'tethys.apps.{__name__}')
 
 
-@login_required()
+@controller
 def home(request):
     """
     Controller for the app home page.
@@ -22,7 +22,7 @@ def home(request):
     return render(request, 'earth_engine/home.html', context)
 
 
-@login_required()
+@controller
 def about(request):
     """
     Controller for the app about page.
@@ -31,10 +31,10 @@ def about(request):
     return render(request, 'earth_engine/about.html', context)
 
 
-@login_required()
+@controller
 def viewer(request):
     """
-    Controller for the app viewer page.
+    Controller for the app home page.
     """
     default_platform = 'modis'
     default_sensors = EE_PRODUCTS[default_platform]
@@ -138,24 +138,10 @@ def viewer(request):
     load_button = Button(
         name='load_map',
         display_text='Load',
-        style='default',
+        style='outline-secondary',
         attributes={'id': 'load_map'}
     )
 
-    clear_button = Button(
-        name='clear_map',
-        display_text='Clear',
-        style='default',
-        attributes={'id': 'clear_map'}
-    )
-
-    plot_button = Button(
-        name='load_plot',
-        display_text='Plot AOI',
-        style='default',
-        attributes={'id': 'load_plot'}
-    )
-
     map_view = MapView(
         height='100%',
         width='100%',
@@ -187,6 +173,21 @@ def viewer(request):
         )
     )
 
+    clear_button = Button(
+        name='clear_map',
+        display_text='Clear',
+        style='outline-secondary',
+        attributes={'id': 'clear_map'},
+        classes='mt-2',
+    )
+
+    plot_button = Button(
+        name='load_plot',
+        display_text='Plot AOI',
+        style='outline-secondary',
+        attributes={'id': 'load_plot'},
+    )
+
     context = {
         'platform_select': platform_select,
         'sensor_select': sensor_select,
@@ -204,7 +205,7 @@ def viewer(request):
     return render(request, 'earth_engine/viewer.html', context)
 
 
-@login_required()
+@controller(url='viewer/get-image-collection')
 def get_image_collection(request):
     """
     Controller to handle image collection requests.
@@ -245,8 +246,7 @@ def get_image_collection(request):
 
     return JsonResponse(response_data)
 
-
-@login_required()
+@controller(url='viewer/get-time-series-plot')
 def get_time_series_plot(request):
     context = {'success': False}
 
diff --git a/tethysapp/earth_engine/gee/cloud_mask.py b/tethysapp/earth_engine/gee/cloud_mask.py
index ac99943..6ffc3bf 100644
--- a/tethysapp/earth_engine/gee/cloud_mask.py
+++ b/tethysapp/earth_engine/gee/cloud_mask.py
@@ -3,7 +3,7 @@
 
 def mask_l8_sr(image):
     """
-    Derived From: https://developers.google.com/earth-engine/datasets/catalog/LANDSAT_LC08_C01_T1_SR
+    Cloud Mask for Landsat 8 surface reflectance. Derived From: https://developers.google.com/earth-engine/datasets/catalog/LANDSAT_LC08_C01_T1_SR
     """
     # Bits 3 and 5 are cloud shadow and cloud, respectively.
     cloudShadowBitMask = (1 << 3)
@@ -19,7 +19,7 @@ def mask_l8_sr(image):
 
 def cloud_mask_l457(image):
     """
-    Derived From: https://developers.google.com/earth-engine/datasets/catalog/LANDSAT_LE07_C01_T1_SR
+    Cloud Mask for Landsat 7 surface reflectance. Derived From: https://developers.google.com/earth-engine/datasets/catalog/LANDSAT_LE07_C01_T1_SR
     """
     qa = image.select('pixel_qa')
 
@@ -35,7 +35,7 @@ def cloud_mask_l457(image):
 
 def mask_s2_clouds(image):
     """
-    Derived from: https://developers.google.com/earth-engine/datasets/catalog/COPERNICUS_S2
+    Cloud Mask for Sentinel 2 surface reflectance. Derived from: https://developers.google.com/earth-engine/datasets/catalog/COPERNICUS_S2
     """
     qa = image.select('QA60')
 
diff --git a/tethysapp/earth_engine/gee/methods.py b/tethysapp/earth_engine/gee/methods.py
index 99d4fa0..ce6a9ab 100644
--- a/tethysapp/earth_engine/gee/methods.py
+++ b/tethysapp/earth_engine/gee/methods.py
@@ -3,10 +3,9 @@
 from ee.ee_exception import EEException
 import geojson
 import pandas as pd
+from .products import EE_PRODUCTS
 from . import params as gee_account
 from . import cloud_mask as cm
-from .products import EE_PRODUCTS
-
 
 log = logging.getLogger(f'tethys.apps.{__name__}')
 
diff --git a/tethysapp/earth_engine/handoff.py b/tethysapp/earth_engine/handoff.py
deleted file mode 100644
index 1e15fb8..0000000
--- a/tethysapp/earth_engine/handoff.py
+++ /dev/null
@@ -1,3 +0,0 @@
-# Define your handoff handlers here
-# for more information, see:
-# http://docs.tethysplatform.org/en/dev/tethys_sdk/handoff.html
\ No newline at end of file
diff --git a/tethysapp/earth_engine/public/css/disclaimer_modal.css b/tethysapp/earth_engine/public/css/disclaimer_modal.css
deleted file mode 100644
index f5d3ff7..0000000
--- a/tethysapp/earth_engine/public/css/disclaimer_modal.css
+++ /dev/null
@@ -1,20 +0,0 @@
-#disclaimer-container {
-  height: 400px;
-  overflow-y: auto;
-}
-
-#sponsors-container {
-  text-align: left;
-}
-
-#sponsors-container img {
-  height: 50px;
-  width: 50px;
-  margin-right: 10px;
-  border-radius: 5px;
-}
-
-#sponsors-container h6 {
-    display: inline-block;
-    margin-right: 10px;
-}
diff --git a/tethysapp/earth_engine/public/css/home.css b/tethysapp/earth_engine/public/css/home.css
index f0cd423..bde0dd0 100644
--- a/tethysapp/earth_engine/public/css/home.css
+++ b/tethysapp/earth_engine/public/css/home.css
@@ -1,3 +1,7 @@
+#inner-app-content {
+  padding: 0;
+}
+
 .info-container {
   background-color: #0000009f;
   box-shadow: 3px 5px 3px rgba(0,0,0,0.35);
@@ -69,4 +73,4 @@
   background-color: #d2dadc;
   background-position: center;
   background-repeat: no-repeat
-}
+}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/public/css/loader.css b/tethysapp/earth_engine/public/css/loader.css
index d23c836..b1f287e 100644
--- a/tethysapp/earth_engine/public/css/loader.css
+++ b/tethysapp/earth_engine/public/css/loader.css
@@ -12,4 +12,4 @@
 
 #loader.show {
     display: block;
-}
+}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/public/css/main.css b/tethysapp/earth_engine/public/css/main.css
index b2b732d..be9379d 100644
--- a/tethysapp/earth_engine/public/css/main.css
+++ b/tethysapp/earth_engine/public/css/main.css
@@ -1,4 +1,4 @@
 /* Remove padding on bottom where app-actions section used to be */
 #app-content-wrapper #app-content {
     padding-bottom: 0;
-}
+}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/public/css/map.css b/tethysapp/earth_engine/public/css/map.css
index 6d72cbb..7a0907e 100644
--- a/tethysapp/earth_engine/public/css/map.css
+++ b/tethysapp/earth_engine/public/css/map.css
@@ -6,4 +6,4 @@
 #inner-app-content {
     height: 100%;
     padding: 0;
-}
+}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/public/css/no_nav.css b/tethysapp/earth_engine/public/css/no_nav.css
deleted file mode 100644
index f114ed9..0000000
--- a/tethysapp/earth_engine/public/css/no_nav.css
+++ /dev/null
@@ -1,16 +0,0 @@
-#nav-title-wrapper {
-  margin-left: 15px;
-}
-
-#app-content-wrapper #app-content {
-  height: 100%;
-}
-
-#app-content-wrapper.show-nav #app-content {
-  padding-right: 0;
-  transform: none;
-}
-
-#inner-app-content {
-  padding: 0;
-}
diff --git a/tethysapp/earth_engine/public/css/plot.css b/tethysapp/earth_engine/public/css/plot.css
index 0a02db7..a8d9f45 100644
--- a/tethysapp/earth_engine/public/css/plot.css
+++ b/tethysapp/earth_engine/public/css/plot.css
@@ -1,5 +1,9 @@
 #plot-loader {
-    margin: 65px 84px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    flex-direction: column;
 }
 
 #plot-loader p {
@@ -9,3 +13,8 @@
 #plot-modal .modal-body {
     min-height: 480px;
 }
+
+.modal-dialog {
+    max-width: 70vw;
+    margin: 1.75rem auto;
+}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/public/images/icon.gif b/tethysapp/earth_engine/public/images/icon.gif
deleted file mode 100644
index 5c8236e..0000000
Binary files a/tethysapp/earth_engine/public/images/icon.gif and /dev/null differ
diff --git a/tethysapp/earth_engine/public/js/gee_datasets.js b/tethysapp/earth_engine/public/js/gee_datasets.js
index d7063c7..4b717bd 100644
--- a/tethysapp/earth_engine/public/js/gee_datasets.js
+++ b/tethysapp/earth_engine/public/js/gee_datasets.js
@@ -76,7 +76,6 @@ var GEE_DATASETS = (function() {
             }
         });
 
-
         $('#start_date').on('change', function() {
             let start_date = $('#start_date').val();
 
@@ -121,10 +120,10 @@ var GEE_DATASETS = (function() {
         if (!m_platform in EE_PRODUCTS) {
             alert('Unknown platform selected.');
         }
-
+    
         // Clear sensor options
         $('#sensor').select2().empty();
-
+    
         // Set the Sensor Options
         let first_option = true;
         for (var sensor in EE_PRODUCTS[m_platform]) {
@@ -133,7 +132,7 @@ var GEE_DATASETS = (function() {
             $('#sensor').append(new_option);
             first_option = false;
         }
-
+    
         // Trigger a sensor change event to update select box
         $('#sensor').trigger('change');
         update_date_bounds();
@@ -143,12 +142,12 @@ var GEE_DATASETS = (function() {
         if (!m_platform in EE_PRODUCTS || !m_sensor in EE_PRODUCTS[m_platform]) {
             alert('Unknown platform or sensor selected.');
         }
-
+    
         // Clear product options
         $('#product').select2().empty();
-
+    
         let first_option = true;
-
+    
         // Set the Product Options
         for (var product in EE_PRODUCTS[m_platform][m_sensor]) {
             let product_display_name = EE_PRODUCTS[m_platform][m_sensor][product]['display'];
@@ -156,7 +155,7 @@ var GEE_DATASETS = (function() {
             $('#product').append(new_option);
             first_option = false;
         }
-
+    
         // Trigger a product change event to update select box
         $('#product').trigger('change');
         update_date_bounds();
@@ -166,24 +165,24 @@ var GEE_DATASETS = (function() {
         // Get new date picker bounds for the current product
         let earliest_valid_date = EE_PRODUCTS[m_platform][m_sensor][m_product]['start_date'];
         let latest_valid_date = EE_PRODUCTS[m_platform][m_sensor][m_product]['end_date'];
-
+    
         // Get current values of date pickers
         let current_start_date = $('#start_date').val();
         let current_end_date = $('#end_date').val();
-
+    
         // Convert to Dates objects for comparison
         let date_evd = Date.parse(earliest_valid_date);
         let date_lvd = Date.parse(latest_valid_date) ? (latest_valid_date) : Date.now();
         let date_csd = Date.parse(current_start_date);
         let date_ced = Date.parse(current_end_date);
-
+    
         // Don't reset currently selected dates if they fall within the new date range
         let reset_current_dates = true;
-
+    
         if (date_csd >= date_evd && date_csd <= date_lvd && date_ced >= date_evd && date_ced <= date_lvd) {
             reset_current_dates = false;
         }
-
+    
         // Update start date datepicker bounds
         $('#start_date').datepicker('setStartDate', earliest_valid_date);
         $('#start_date').datepicker('setEndDate', latest_valid_date);
@@ -191,7 +190,7 @@ var GEE_DATASETS = (function() {
             $('#start_date').datepicker('update', INITIAL_START_DATE);
             m_start_date = INITIAL_START_DATE;
         }
-
+    
         // Update end date datepicker bounds
         $('#end_date').datepicker('setStartDate', earliest_valid_date);
         $('#end_date').datepicker('setEndDate', latest_valid_date);
@@ -199,7 +198,7 @@ var GEE_DATASETS = (function() {
             $('#end_date').datepicker('update', INITIAL_END_DATE);
             m_end_date = INITIAL_END_DATE;
         }
-
+    
         console.log('Date Bounds Changed To: ' + earliest_valid_date + ' - ' + latest_valid_date);
     };
 
@@ -219,14 +218,14 @@ var GEE_DATASETS = (function() {
     // Map Methods
     update_map = function() {
         let data = collect_data();
-
+    
         let xhr = $.ajax({
             type: 'POST',
             url: 'get-image-collection/',
             dataType: 'json',
             data: data
         });
-
+    
         xhr.done(function(response) {
             if (response.success) {
                 console.log(response.url);
@@ -250,25 +249,25 @@ var GEE_DATASETS = (function() {
             url: url,
             attributions: '<a href="https://earthengine.google.com" target="_">Google Earth Engine</a>'
         });
-
+    
         source.on('tileloadstart', function() {
             $('#loader').addClass('show');
         });
-
+    
         source.on('tileloadend', function() {
             $('#loader').removeClass('show');
         });
-
+    
         source.on('tileloaderror', function() {
             $('#loader').removeClass('show');
         });
-
+    
         m_gee_layer = new ol.layer.Tile({
             source: source,
             opacity: 0.7
         });
-
-        // Insert below the draw layer (so drawn polygons and points render on top of data layer).
+    
+        // Insert below the draw layer (so drawn polygons and points render on top of the data layer).
         m_map.getLayers().insertAt(1, m_gee_layer);
     };
 
@@ -288,9 +287,9 @@ var GEE_DATASETS = (function() {
 
     update_plot = function() {
         let data = collect_data();
-
+    
         show_plot_modal();
-
+    
         $('#plot-container').load('get-time-series-plot/', data);
     };
 
@@ -332,4 +331,4 @@ var GEE_DATASETS = (function() {
 
     return public_interface;
 
-}()); // End of package wrapper
+}()); // End of package wrapper
\ No newline at end of file
diff --git a/tethysapp/earth_engine/public/js/main.js b/tethysapp/earth_engine/public/js/main.js
index 510998b..b0f978c 100644
--- a/tethysapp/earth_engine/public/js/main.js
+++ b/tethysapp/earth_engine/public/js/main.js
@@ -30,4 +30,4 @@ $(function() {
             }
         }
     });
-}); //document ready;
+}); //document ready;
\ No newline at end of file
diff --git a/tethysapp/earth_engine/templates/earth_engine/about.html b/tethysapp/earth_engine/templates/earth_engine/about.html
index 41c383a..b2390bf 100644
--- a/tethysapp/earth_engine/templates/earth_engine/about.html
+++ b/tethysapp/earth_engine/templates/earth_engine/about.html
@@ -1,13 +1,13 @@
-{% extends "earth_engine/base.html" %}
+{% extends "tethys_apps/app_header_content.html" %}
 {% load static %}
 
 {% block styles %}
   {{ block.super }}
-  <link rel="stylesheet" href="{% static 'earth_engine/css/no_nav.css' %}" />
   <link rel="stylesheet" href="{% static 'earth_engine/css/about.css' %}" />
 {% endblock %}
 
-{% block app_navigation_override %}
+{% block header_buttons %}
+  {% include "earth_engine/header_buttons.html" %}
 {% endblock %}
 
 {% block app_content %}
@@ -15,43 +15,48 @@
     <div class="page-header">
       <h1>About Earth Engine</h1>
       <h1><small>Sit Amet Consectetur Adipiscing</small></h1>
-    </div>
-    <div class="row">
-      <!-- Left Column -->
-      <div class="col-md-8">
-        <div class="about-content">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Congue quisque egestas diam in arcu cursus euismod. Auctor neque vitae tempus quam pellentesque nec nam. Erat imperdiet sed euismod nisi porta lorem. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed blandit libero volutpat sed cras ornare. Convallis tellus id interdum velit laoreet id. Amet mauris commodo quis imperdiet massa tincidunt. Mi bibendum neque egestas congue quisque egestas diam in. Enim nec dui nunc mattis enim ut tellus elementum sagittis. Cursus mattis molestie a iaculis at erat pellentesque. Ut tellus elementum sagittis vitae et leo.</p>
-          <h6>Eu Consequat ac Felis</h6>
-          <p>Eu consequat ac felis donec et odio. Eget arcu dictum varius duis at consectetur lorem. Lorem ipsum dolor sit amet consectetur. Turpis egestas integer eget aliquet nibh praesent. Mattis rhoncus urna neque viverra justo nec. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Convallis posuere morbi leo urna molestie at elementum eu. Fermentum et sollicitudin ac orci phasellus egestas tellus. Convallis aenean et tortor at risus. Morbi tristique senectus et netus et malesuada fames ac. Sed vulputate mi sit amet mauris commodo quis. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Id cursus metus aliquam eleifend mi in nulla. Proin fermentum leo vel orci porta non pulvinar neque laoreet. Lobortis mattis aliquam faucibus purus in massa tempor. Varius vel pharetra vel turpis nunc.</p>
-          <p><b>Mauris rhoncus aenean vel elit:</b> Blandit aliquam etiam erat velit. Auctor neque vitae tempus quam pellentesque nec nam. Augue mauris augue neque gravida in fermentum et. Tempus urna et pharetra pharetra. Vel turpis nunc eget lorem. Vitae nunc sed velit dignissim. Enim tortor at auctor urna nunc id. Pellentesque habitant morbi tristique senectus et netus et. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus.</p>
-          <p><b>Blandit turpis cursus in hac habitasse platea:</b> Tellus elementum sagittis vitae et leo duis ut diam quam. Amet nisl purus in mollis nunc sed. Ac feugiat sed lectus vestibulum. Suscipit adipiscing bibendum est ultricies integer quis. Tortor pretium viverra suspendisse potenti nullam ac tortor. Blandit turpis cursus in hac. Id porta nibh venenatis cras sed felis eget velit. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Aliquet enim tortor at auctor urna nunc id. Fringilla ut morbi tincidunt augue interdum velit euismod in. In arcu cursus euismod quis viverra nibh. Vulputate ut pharetra sit amet. Purus in massa tempor nec. Pellentesque massa placerat duis ultricies lacus sed. Integer feugiat scelerisque varius morbi enim. Vitae tempus quam pellentesque nec nam.</p>
-          <p><b>Sed cras ornare arcu dui vivamus arcu:</b> Pellentesque adipiscing commodo elit at. Fusce id velit ut tortor pretium viverra. Nunc vel risus commodo viverra. Dui faucibus in ornare quam viverra orci sagittis eu volutpat. Aliquet nibh praesent tristique magna. Purus sit amet volutpat consequat. Gravida neque convallis a cras. Aenean euismod elementum nisi quis eleifend. At tellus at urna condimentum mattis pellentesque id nibh tortor. Sit amet massa vitae tortor. Volutpat lacus laoreet non curabitur gravida arcu ac. Vulputate dignissim suspendisse in est ante. Tempor commodo ullamcorper a lacus vestibulum. Quis vel eros donec ac odio tempor. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Metus aliquam eleifend mi in.</p>'
+      <div class="row">
+        <!-- Left Column -->
+        <div class="col-md-8">
+          <div class="about-content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Congue quisque egestas diam in arcu cursus euismod. Auctor neque vitae tempus quam pellentesque nec nam. Erat imperdiet sed euismod nisi porta lorem. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Sed blandit libero volutpat sed cras ornare. Convallis tellus id interdum velit laoreet id. Amet mauris commodo quis imperdiet massa tincidunt. Mi bibendum neque egestas congue quisque egestas diam in. Enim nec dui nunc mattis enim ut tellus elementum sagittis. Cursus mattis molestie a iaculis at erat pellentesque. Ut tellus elementum sagittis vitae et leo.</p>
+            <h6>Eu Consequat ac Felis</h6>
+            <p>Eu consequat ac felis donec et odio. Eget arcu dictum varius duis at consectetur lorem. Lorem ipsum dolor sit amet consectetur. Turpis egestas integer eget aliquet nibh praesent. Mattis rhoncus urna neque viverra justo nec. Iaculis urna id volutpat lacus laoreet non curabitur gravida arcu. Convallis posuere morbi leo urna molestie at elementum eu. Fermentum et sollicitudin ac orci phasellus egestas tellus. Convallis aenean et tortor at risus. Morbi tristique senectus et netus et malesuada fames ac. Sed vulputate mi sit amet mauris commodo quis. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Id cursus metus aliquam eleifend mi in nulla. Proin fermentum leo vel orci porta non pulvinar neque laoreet. Lobortis mattis aliquam faucibus purus in massa tempor. Varius vel pharetra vel turpis nunc.</p>
+            <p><b>Mauris rhoncus aenean vel elit:</b> Blandit aliquam etiam erat velit. Auctor neque vitae tempus quam pellentesque nec nam. Augue mauris augue neque gravida in fermentum et. Tempus urna et pharetra pharetra. Vel turpis nunc eget lorem. Vitae nunc sed velit dignissim. Enim tortor at auctor urna nunc id. Pellentesque habitant morbi tristique senectus et netus et. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus.</p>
+            <p><b>Blandit turpis cursus in hac habitasse platea:</b> Tellus elementum sagittis vitae et leo duis ut diam quam. Amet nisl purus in mollis nunc sed. Ac feugiat sed lectus vestibulum. Suscipit adipiscing bibendum est ultricies integer quis. Tortor pretium viverra suspendisse potenti nullam ac tortor. Blandit turpis cursus in hac. Id porta nibh venenatis cras sed felis eget velit. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Aliquet enim tortor at auctor urna nunc id. Fringilla ut morbi tincidunt augue interdum velit euismod in. In arcu cursus euismod quis viverra nibh. Vulputate ut pharetra sit amet. Purus in massa tempor nec. Pellentesque massa placerat duis ultricies lacus sed. Integer feugiat scelerisque varius morbi enim. Vitae tempus quam pellentesque nec nam.</p>
+            <p><b>Sed cras ornare arcu dui vivamus arcu:</b> Pellentesque adipiscing commodo elit at. Fusce id velit ut tortor pretium viverra. Nunc vel risus commodo viverra. Dui faucibus in ornare quam viverra orci sagittis eu volutpat. Aliquet nibh praesent tristique magna. Purus sit amet volutpat consequat. Gravida neque convallis a cras. Aenean euismod elementum nisi quis eleifend. At tellus at urna condimentum mattis pellentesque id nibh tortor. Sit amet massa vitae tortor. Volutpat lacus laoreet non curabitur gravida arcu ac. Vulputate dignissim suspendisse in est ante. Tempor commodo ullamcorper a lacus vestibulum. Quis vel eros donec ac odio tempor. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Metus aliquam eleifend mi in.</p>'
+          </div>
         </div>
-      </div>
-      <!-- End Left Column -->
-      <!-- Right Column -->
-      <div class="col-md-4">
-        <div class="about-imgs">
-          <img class="about-img" src="http://placeimg.com/360/200/nature">
-          <img class="about-img" src="http://placeimg.com/360/250/nature">
-          <img class="about-img" src="http://placeimg.com/360/300/nature">
+        <!-- End Left Column -->
+        <!-- Right Column -->
+        <div class="col-md-4">
+          <div class="about-imgs">
+            <img class="about-img" src="http://placeimg.com/360/200/nature">
+            <img class="about-img" src="http://placeimg.com/360/250/nature">
+            <img class="about-img" src="http://placeimg.com/360/300/nature">
+          </div>
         </div>
+        <!-- End Right Column -->
       </div>
-      <!-- End Right Column -->
-    </div>
-    <div class="row">
-      <div class="col-md-12">
-        <div class="about-footer-content">
-          <h3>Sponsors</h3>
-          <img src="https://via.placeholder.com/50/0000ff/000000?text=1">
-          <img src="https://via.placeholder.com/50/00ff00/000000?text=2">
-          <img src="https://via.placeholder.com/50/ff0000/000000?text=3">
-          <img src="https://via.placeholder.com/50/00ffff/000000?text=4">
-          <img src="https://via.placeholder.com/50/ffff00/000000?text=5">
-          <img src="https://via.placeholder.com/50/ff8800/000000?text=6">
-          <img src="https://via.placeholder.com/50/8800ff/000000?text=7">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="about-footer-content">
+            <h3>Sponsors</h3>
+            <img src="https://via.placeholder.com/50/0000ff/000000?text=1">
+            <img src="https://via.placeholder.com/50/00ff00/000000?text=2">
+            <img src="https://via.placeholder.com/50/ff0000/000000?text=3">
+            <img src="https://via.placeholder.com/50/00ffff/000000?text=4">
+            <img src="https://via.placeholder.com/50/ffff00/000000?text=5">
+            <img src="https://via.placeholder.com/50/ff8800/000000?text=6">
+            <img src="https://via.placeholder.com/50/8800ff/000000?text=7">
+          </div>
         </div>
       </div>
     </div>
   </div>
 {% endblock %}
+
+{% block after_app_content %}
+  {{ block.super }}
+  {% include "earth_engine/disclaimer.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/templates/earth_engine/base.html b/tethysapp/earth_engine/templates/earth_engine/base.html
index 3bf2e2b..6ca00b0 100644
--- a/tethysapp/earth_engine/templates/earth_engine/base.html
+++ b/tethysapp/earth_engine/templates/earth_engine/base.html
@@ -13,29 +13,20 @@
 {% block app_title %}{{ tethys_app.name }}{% endblock %}
 
 {% block header_buttons %}
-  {{ block.super }}
-  <div class="header-button glyphicon-button">
-    <a href="{% url 'earth_engine:home' %}" title="Home"><span class="glyphicon glyphicon-home"></span></a>
-  </div>
-  <div class="header-button glyphicon-button">
-    <a href="{% url 'earth_engine:about' %}" title="About"><span class="glyphicon glyphicon-info-sign"></span></a>
-  </div>
-  <div class="header-button glyphicon-button">
-    <a data-toggle="modal" data-target="#disclaimer-modal" title="Disclaimer"><span class="glyphicon glyphicon-warning-sign"></span></a>
-  </div>
+  {% include "earth_engine/header_buttons.html" %}
 {% endblock %}
 
 {% block app_navigation_items %}
-  <li class="title">App Navigation</li>
-  <li class="active"><a href="">Home</a></li>
-  <li><a href="">Jobs</a></li>
-  <li><a href="">Results</a></li>
-  <li class="title">Steps</li>
-  <li><a href="">1. The First Step</a></li>
-  <li><a href="">2. The Second Step</a></li>
-  <li><a href="">3. The Third Step</a></li>
-  <li class="separator"></li>
-  <li><a href="">Get Started</a></li>
+  <li class="nav-item title">App Navigation</li>
+  <li class="nav-item active"><a class="nav-link" href="">Home</a></li>
+  <li class="nav-item"><a class="nav-link" href="">Jobs</a></li>
+  <li class="nav-item"><a class="nav-link" href="">Results</a></li>
+  <li class="nav-item title">Steps</li>
+  <li class="nav-item"><a class="nav-link" href="">1. The First Step</a></li>
+  <li class="nav-item"><a class="nav-link" href="">2. The Second Step</a></li>
+  <li class="nav-item"><a class="nav-link" href="">3. The Third Step</a></li>
+  <li class="nav-item separator"></li>
+  <li class="nav-item"><a class="nav-link" href="">Get Started</a></li>
 {% endblock %}
 
 {% block app_content %}
@@ -44,51 +35,17 @@
 {% block app_actions_override %}
 {% endblock %}
 
+{% block after_app_content %}
+  {{ block.super }}
+  {% include "earth_engine/disclaimer.html" %}
+{% endblock %}
+
 {% block content_dependent_styles %}
   {{ block.super }}
   <link href="{% static 'earth_engine/css/main.css' %}" rel="stylesheet"/>
-  <link href="{% static 'earth_engine/css/disclaimer_modal.css' %}" rel="stylesheet"/>
 {% endblock %}
 
 {% block scripts %}
   {{ block.super }}
   <script src="{% static 'earth_engine/js/main.js' %}" type="text/javascript"></script>
-{% endblock %}
-
-{# Use the after_app_content block for modals #}
-{% block after_app_content %}
-  {{ block.super }}
-  <!-- Info Modal -->
-  <div class="modal fade" id="disclaimer-modal" tabindex="-1" role="dialog" aria-labelledby="disclaimer-modal-label">
-    <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h2 class="modal-title" id="disclaimer-modal-label">Disclaimer</h2>
-        </div>
-        <div class="modal-body">
-          <div id="disclaimer-container">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed ipsum mollis, congue metus vitae, fringilla tortor. Cras non magna tempus, pretium nibh a, accumsan sapien. Quisque quis diam justo. Mauris ut diam molestie, scelerisque nibh ac, convallis mauris. Sed risus ex, blandit eu lectus vitae, vulputate fermentum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pretium sagittis arcu at aliquet. Quisque quis sodales urna. Suspendisse nisl odio, facilisis ac iaculis quis, accumsan non justo. Nunc eu porttitor neque.</p>
-            <p>Sed vel nisl leo. Quisque venenatis erat nec erat laoreet, ac vulputate magna sodales. Ut in enim finibus, finibus orci sit amet, feugiat erat. Vivamus id lorem arcu. Integer lacus lorem, rhoncus vitae elit eu, vestibulum placerat nibh. Ut eget lectus in quam blandit molestie nec et leo. Ut augue libero, commodo id ligula sit amet, placerat molestie enim. Cras justo odio, vulputate id odio non, ultricies mollis sem. Integer et vestibulum erat, eu dictum nunc. Donec eu diam ac ligula aliquam egestas in non lectus. Nullam quis arcu eget massa feugiat sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla quis urna efficitur, sagittis ante eget, accumsan nulla.</p>
-            <p>Pellentesque tempor neque in odio ullamcorper, a varius lectus euismod. Donec odio nunc, mollis aliquam imperdiet eget, lacinia sit amet dui. Morbi quis pellentesque lorem. Nam volutpat vestibulum ex vel interdum. Etiam accumsan luctus felis gravida sodales. Praesent malesuada lectus tortor, at maximus velit fringilla sed. Ut consequat nisl ut pretium egestas.</p>
-            <p>Quisque tincidunt ex a sem sagittis molestie. Nunc pellentesque et tortor quis lobortis. Etiam eget justo risus. Nunc a lobortis quam, id varius ante. Maecenas at rhoncus enim. Maecenas aliquam non elit quis tempor. Morbi eu ligula imperdiet, imperdiet neque non, faucibus eros. Vivamus ac sollicitudin nunc. Vivamus sagittis ut orci eu auctor. Nulla sit amet facilisis felis, eu tincidunt sapien. Nulla sit amet dignissim nisi. Cras pellentesque rutrum rhoncus. Nulla nibh erat, congue sit amet feugiat in, eleifend at massa. Maecenas risus massa, placerat non velit vel, laoreet cursus nunc.</p>
-            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ultricies accumsan elit vel volutpat. Proin nec nibh ac dolor tempor sollicitudin. Praesent nisi elit, placerat eget diam nec, viverra euismod felis. Nunc accumsan nulla non eros bibendum, mollis hendrerit enim cursus. In ex lorem, hendrerit ut nibh nec, vestibulum placerat massa. Proin at odio non nisl eleifend venenatis ut at tortor.</p>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <div id="sponsors-container">
-            <h6>Sponsors:</h6>
-            <img src="https://via.placeholder.com/50/0000ff/000000?text=1">
-            <img src="https://via.placeholder.com/50/00ff00/000000?text=2">
-            <img src="https://via.placeholder.com/50/ff0000/000000?text=3">
-            <img src="https://via.placeholder.com/50/00ffff/000000?text=4">
-            <img src="https://via.placeholder.com/50/ffff00/000000?text=5">
-            <img src="https://via.placeholder.com/50/ff8800/000000?text=6">
-            <img src="https://via.placeholder.com/50/8800ff/000000?text=7">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- End Info Modal -->
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/templates/earth_engine/disclaimer.html b/tethysapp/earth_engine/templates/earth_engine/disclaimer.html
new file mode 100644
index 0000000..78b9e17
--- /dev/null
+++ b/tethysapp/earth_engine/templates/earth_engine/disclaimer.html
@@ -0,0 +1,58 @@
+<style>
+  #disclaimer-modal .modal-dialog {
+    max-width: 600px;
+  }
+
+  #disclaimer-container {
+    height: 400px;
+    overflow-y: auto;
+  }
+  
+  #sponsors-container {
+    text-align: left;
+  }
+  
+  #sponsors-container img {
+    height: 50px;
+    width: 50px;
+    margin-right: 10px;
+    border-radius: 5px;
+  }
+  
+  #sponsors-container h6 {
+    display: inline-block;
+    margin-right: 10px;
+  }
+</style>
+
+<div class="modal fade" id="disclaimer-modal" tabindex="-1" role="dialog" aria-labelledby="disclaimer-modal-label">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title" id="disclaimer-modal-label">Disclaimer</h2>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div id="disclaimer-container">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed ipsum mollis, congue metus vitae, fringilla tortor. Cras non magna tempus, pretium nibh a, accumsan sapien. Quisque quis diam justo. Mauris ut diam molestie, scelerisque nibh ac, convallis mauris. Sed risus ex, blandit eu lectus vitae, vulputate fermentum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer pretium sagittis arcu at aliquet. Quisque quis sodales urna. Suspendisse nisl odio, facilisis ac iaculis quis, accumsan non justo. Nunc eu porttitor neque.</p>
+          <p>Sed vel nisl leo. Quisque venenatis erat nec erat laoreet, ac vulputate magna sodales. Ut in enim finibus, finibus orci sit amet, feugiat erat. Vivamus id lorem arcu. Integer lacus lorem, rhoncus vitae elit eu, vestibulum placerat nibh. Ut eget lectus in quam blandit molestie nec et leo. Ut augue libero, commodo id ligula sit amet, placerat molestie enim. Cras justo odio, vulputate id odio non, ultricies mollis sem. Integer et vestibulum erat, eu dictum nunc. Donec eu diam ac ligula aliquam egestas in non lectus. Nullam quis arcu eget massa feugiat sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla quis urna efficitur, sagittis ante eget, accumsan nulla.</p>
+          <p>Pellentesque tempor neque in odio ullamcorper, a varius lectus euismod. Donec odio nunc, mollis aliquam imperdiet eget, lacinia sit amet dui. Morbi quis pellentesque lorem. Nam volutpat vestibulum ex vel interdum. Etiam accumsan luctus felis gravida sodales. Praesent malesuada lectus tortor, at maximus velit fringilla sed. Ut consequat nisl ut pretium egestas.</p>
+          <p>Quisque tincidunt ex a sem sagittis molestie. Nunc pellentesque et tortor quis lobortis. Etiam eget justo risus. Nunc a lobortis quam, id varius ante. Maecenas at rhoncus enim. Maecenas aliquam non elit quis tempor. Morbi eu ligula imperdiet, imperdiet neque non, faucibus eros. Vivamus ac sollicitudin nunc. Vivamus sagittis ut orci eu auctor. Nulla sit amet facilisis felis, eu tincidunt sapien. Nulla sit amet dignissim nisi. Cras pellentesque rutrum rhoncus. Nulla nibh erat, congue sit amet feugiat in, eleifend at massa. Maecenas risus massa, placerat non velit vel, laoreet cursus nunc.</p>
+          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam ultricies accumsan elit vel volutpat. Proin nec nibh ac dolor tempor sollicitudin. Praesent nisi elit, placerat eget diam nec, viverra euismod felis. Nunc accumsan nulla non eros bibendum, mollis hendrerit enim cursus. In ex lorem, hendrerit ut nibh nec, vestibulum placerat massa. Proin at odio non nisl eleifend venenatis ut at tortor.</p>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <div id="sponsors-container">
+          <h6>Sponsors:</h6>
+          <img src="https://via.placeholder.com/50/0000ff/000000?text=1">
+          <img src="https://via.placeholder.com/50/00ff00/000000?text=2">
+          <img src="https://via.placeholder.com/50/ff0000/000000?text=3">
+          <img src="https://via.placeholder.com/50/00ffff/000000?text=4">
+          <img src="https://via.placeholder.com/50/ffff00/000000?text=5">
+          <img src="https://via.placeholder.com/50/ff8800/000000?text=6">
+          <img src="https://via.placeholder.com/50/8800ff/000000?text=7">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/tethysapp/earth_engine/templates/earth_engine/header_buttons.html b/tethysapp/earth_engine/templates/earth_engine/header_buttons.html
new file mode 100644
index 0000000..8f6661d
--- /dev/null
+++ b/tethysapp/earth_engine/templates/earth_engine/header_buttons.html
@@ -0,0 +1,9 @@
+<div class="header-button glyphicon-button">
+  <a href="{% url 'earth_engine:home' %}" title="Home"><i class="bi bi-house-door-fill"></i></a>
+</div>
+<div class="header-button glyphicon-button">
+  <a href="{% url 'earth_engine:about' %}" title="About"><i class="bi bi-info-circle-fill"></i></a>
+</div>
+<div class="header-button glyphicon-button">
+  <a data-bs-toggle="modal" data-bs-target="#disclaimer-modal" title="Disclaimer"><i class="bi bi-exclamation-diamond-fill"></i></a>
+</div>
\ No newline at end of file
diff --git a/tethysapp/earth_engine/templates/earth_engine/home.html b/tethysapp/earth_engine/templates/earth_engine/home.html
index a091c89..eca72b3 100644
--- a/tethysapp/earth_engine/templates/earth_engine/home.html
+++ b/tethysapp/earth_engine/templates/earth_engine/home.html
@@ -1,21 +1,21 @@
-{% extends "earth_engine/base.html" %}
+{% extends "tethys_apps/app_header_content.html" %}
 {% load tethys_gizmos static %}
 
 {% block styles %}
   {{ block.super }}
-  <link rel="stylesheet" href="{% static 'earth_engine/css/no_nav.css' %}" />
   <link rel="stylesheet" href="{% static 'earth_engine/css/home.css' %}" />
 {% endblock %}
 
-{% block app_navigation_override %}
+{% block header_buttons %}
+  {% include "earth_engine/header_buttons.html" %}
 {% endblock %}
 
 {% block app_content %}
 <div  id="home-content-container" class="container-fluid">
   <div class="row">
     <div class="col-md-8">
-      <div class="info-container">
-        <h2 id="about-container" class="info-title">About</h2>
+      <div id="about-container" class="info-container">
+        <h2 class="info-title">About</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet. Morbi tincidunt augue interdum velit euismod in pellentesque.</p>
         <p>Ac felis donec et odio pellentesque. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sed euismod nisi porta lorem mollis. Nisi scelerisque eu ultrices vitae. Sit amet consectetur adipiscing elit duis. At in tellus integer feugiat scelerisque varius morbi enim.</p>
         <img id="feature-image" src="{% static 'earth_engine/images/earth-engine-viewer.png' %}">
@@ -26,35 +26,37 @@ <h2 id="about-container" class="info-title">About</h2>
         <div class="col-md-12">
           <div id="resources-container" class="info-container">
             <h2 class="info-title">Resources</h2>
-            <div class="media">
-              <div class="media-left">
+            <div class="d-flex align-items-center">
+              <div class="flex-shrink-0">
                 <a href="#coast">
-                  <img class="media-object" src="{% static 'earth_engine/images/coast_80_80.jpg' %}" alt="">
+                  <img class="media-object" src="{% static 'earth_engine/images/coast_80_80.jpg' %}" alt="coast">
                 </a>
               </div>
-              <div class="media-body">
+              <div class="media-body flex-grow-1 ms-3">
                 <h4 class="media-heading">Lorem Ipsum Dolor</h4>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
               </div>
             </div>
-            <div class="media">
-              <div class="media-left">
+
+            <div class="d-flex align-items-center mt-2">
+              <div class="flex-shrink-0">
                 <a href="#condensation">
-                  <img class="media-object" src="{% static 'earth_engine/images/condensation_80_80.jpg' %}" alt="">
+                  <img class="media-object" src="{% static 'earth_engine/images/condensation_80_80.jpg' %}" alt="condensation">
                 </a>
               </div>
-              <div class="media-body">
+              <div class="media-body flex-grow-1 ms-3">
                 <h4 class="media-heading">Ut Enim Ad Minim</h4>
                 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </div>
             </div>
-            <div class="media">
-              <div class="media-left">
+
+            <div class="d-flex align-items-center mt-2">
+              <div class="flex-shrink-0">
                 <a href="#waterfall">
-                  <img class="media-object" src="{% static 'earth_engine/images/waterfall_80_80.jpg' %}" alt="">
+                  <img class="media-object" src="{% static 'earth_engine/images/waterfall_80_80.jpg' %}" alt="waterfall">
                 </a>
               </div>
-              <div class="media-body">
+              <div class="media-body flex-grow-1 ms-3">
                 <h4 class="media-heading">Duis Aute Irure</h4>
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
               </div>
@@ -64,17 +66,19 @@ <h4 class="media-heading">Duis Aute Irure</h4>
       </div>
       <div class="row">
         <div class="col-md-12">
-          <div class="info-container">
+          <div class="media-body info-container">
             <h2 class="info-title">Get Started</h2>
             <p>Press the button below to launch the viewer</p>
             <a id="get-started-btn" href="{% url 'earth_engine:viewer' %}">Launch Viewer</a>
           </div>
         </div>
-       </div>
+      </div>
     </div>
   </div>
 </div>
 {% endblock %}
 
-
-
+{% block after_app_content %}
+  {{ block.super }}
+  {% include "earth_engine/disclaimer.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/templates/earth_engine/plot.html b/tethysapp/earth_engine/templates/earth_engine/plot.html
index 0c84710..383985d 100644
--- a/tethysapp/earth_engine/templates/earth_engine/plot.html
+++ b/tethysapp/earth_engine/templates/earth_engine/plot.html
@@ -8,4 +8,4 @@
   <div class="alert alert-danger" role="alert">
     <span>{{ error }}</span>
   </div>
-{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/templates/earth_engine/viewer.html b/tethysapp/earth_engine/templates/earth_engine/viewer.html
index 8905164..2c9da66 100644
--- a/tethysapp/earth_engine/templates/earth_engine/viewer.html
+++ b/tethysapp/earth_engine/templates/earth_engine/viewer.html
@@ -1,13 +1,6 @@
 {% extends "earth_engine/base.html" %}
 {% load tethys_gizmos static %}
 
-{% block content_dependent_styles %}
-    {{ block.super }}
-    <link rel="stylesheet" href="{% static 'earth_engine/css/map.css' %}" />
-    <link rel="stylesheet" href="{% static 'earth_engine/css/loader.css' %}" />
-    <link rel="stylesheet" href="{% static 'earth_engine/css/plot.css' %}" />
-{% endblock %}
-
 {% block import_gizmos %}
   {% import_gizmo_dependency plotly_view %}
 {% endblock %}
@@ -23,7 +16,7 @@
   <p class="help">Change variables to select a data product, then press "Load" to add that product to the map.</p>
   {% gizmo load_button %}
   {% gizmo clear_button %}
-  <p class="help">Draw an area of interest or drop a point, the press "Plot AOI" to view a plot of the data.</p>
+  <p class="help mt-2">Draw an area of interest or drop a point, the press "Plot AOI" to view a plot of the data.</p>
   {% gizmo plot_button %}
 {% endblock %}
 
@@ -39,8 +32,8 @@
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h5 class="modal-title" id="plot-modal-label">Area of Interest Plot</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
           <div id="plot-container"></div>
@@ -59,3 +52,10 @@ <h5 class="modal-title" id="plot-modal-label">Area of Interest Plot</h5>
   {{ block.super }}
   <script src="{% static 'earth_engine/js/gee_datasets.js' %}" type="text/javascript"></script>
 {% endblock %}
+
+{% block content_dependent_styles %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static 'earth_engine/css/map.css' %}" />
+    <link rel="stylesheet" href="{% static 'earth_engine/css/loader.css' %}" />
+    <link rel="stylesheet" href="{% static 'earth_engine/css/plot.css' %}" />
+{% endblock %}
\ No newline at end of file
diff --git a/tethysapp/earth_engine/tests/tests.py b/tethysapp/earth_engine/tests/tests.py
index e3e1e4e..24d629d 100644
--- a/tethysapp/earth_engine/tests/tests.py
+++ b/tethysapp/earth_engine/tests/tests.py
@@ -1,24 +1,19 @@
 # Most of your test classes should inherit from TethysTestCase
 from tethys_sdk.testing import TethysTestCase
 
-# Use if your app has persistent stores that will be tested against.
-# Your app class from app.py must be passed as an argument to the TethysTestCase functions to both
-# create and destroy the temporary persistent stores for your app used during testing
-# from ..app import EarthEngine
-
-# Use if you'd like a simplified way to test rendered HTML templates.
-# You likely need to install BeautifulSoup, as it is not included by default in Tethys Platform
-#    1. Open a terminal
-#    2. Enter command ". /usr/lib/tethys/bin/activate" to activate the Tethys python environment
-#    3. Enter command "pip install beautifulsoup4"
-# For help, see https://www.crummy.com/software/BeautifulSoup/bs4/doc/
+# For testing rendered HTML templates it may be helpful to use BeautifulSoup.
 # from bs4 import BeautifulSoup
+# For help, see https://www.crummy.com/software/BeautifulSoup/bs4/doc/
+
 
 """
-To run any tests:
-    1. Open a terminal
-    2. Enter command ". /usr/lib/tethys/bin/activate" to activate the Tethys python environment
-    3. In portal_config.yml make sure that the default database user is set to tethys_super or is a super user of the database
+To run tests for an app:
+
+    1. Open a terminal and activate the Tethys environment::
+
+        conda activate tethys
+
+    2. In portal_config.yml make sure that the default database user is set to tethys_super or is a super user of the database
         DATABASES:
             default:
                 ENGINE: django.db.backends.postgresql_psycopg2
@@ -28,28 +23,15 @@
                 HOST: 127.0.0.1
                 PORT: 5435
 
-    4. Enter tethys test command.
-       The general form is: "tethys test -f tethys_apps.tethysapp.<app_name>.<folder_name>.<file_name>.<class_name>.<function_name>"
-       See below for specific examples
-
-        To run all tests across this app:
-            Test command: "tethys test -f tethys_apps.tethysapp.earth_engine"
+    3. From the root directory of your app, run the ``tethys manage test`` command::
 
-        To run all tests in this file:
-            Test command: "tethys test -f tethys_apps.tethysapp.earth_engine.tests.tests"
+        tethys manage test tethysapp/<app_name>/tests
 
-        To run tests in the EarthEngineTestCase class:
-            Test command: "tethys test -f tethys_apps.tethysapp.earth_engine.tests.tests.EarthEngineTestCase"
-
-        To run only the test_if_tethys_platform_is_great function in the EarthEngineTestCase class:
-            Test command: "tethys test -f tethys_apps.tethysapp.earth_engine.tests.tests.EarthEngineTestCase.test_if_tethys_platform_is_great"
 
 To learn more about writing tests, see:
-    https://docs.djangoproject.com/en/1.9/topics/testing/overview/#writing-tests
-    https://docs.python.org/2.7/library/unittest.html#module-unittest
+    https://docs.tethysplatform.org/en/stable/tethys_sdk/testing.html
 """
 
-
 class EarthEngineTestCase(TethysTestCase):
     """
     In this class you may define as many functions as you'd like to test different aspects of your app.