diff --git a/.eslintrc.js b/.eslintrc.js
index a250b4f3..39000f63 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
   extends: [
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     'plugin:vue/essential',
+    'plugin:vuetify/recommended',
     '@vue/standard'
   ],
   rules: {
diff --git a/app-starter/WguAppTemplate.vue b/app-starter/WguAppTemplate.vue
index ca1f6633..4e418ec2 100644
--- a/app-starter/WguAppTemplate.vue
+++ b/app-starter/WguAppTemplate.vue
@@ -25,7 +25,7 @@
 
     <slot name="wgu-before-content" />
     <v-main app>
-      <v-container id="ol-map-container" fluid fill-height class="pa-0">
+      <v-container id="ol-map-container" fluid class="fill-height pa-0">
         <wgu-map />
         <!-- layer loading indicator -->
         <wgu-maploading-status />
diff --git a/package-lock.json b/package-lock.json
index 25f5f388..e62522d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-vue": "^9.17.0",
+        "eslint-plugin-vuetify": "^1.1.0",
         "gh-pages": "^1.1.0",
         "karma": "^6.4.0",
         "karma-chrome-launcher": "^3.1.1",
@@ -49,10 +50,12 @@
         "karma-webpack": "^5.0.0",
         "material-icons": "^1.13.9",
         "portal-vue": "^2.1.7",
+        "roboto-fontface": "*",
         "sass": "^1.32.7",
         "sass-loader": "^12.0.0",
         "sinon": "^9.2.4",
         "sinon-chai": "^3.5.0",
+        "vue-cli-plugin-vuetify": "~2.5.8",
         "vue-template-compiler": "2.7.14"
       },
       "engines": {
@@ -8027,6 +8030,97 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/eslint-plugin-vuetify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-1.1.0.tgz",
+      "integrity": "sha512-I1YRUCGkDqe8F7O0tdf63UZVKtk4734+8fzbZ24YIZKTTyQp/FIR0nSZYG8mPFhTWerzPta7oXNzliBOwP2XeQ==",
+      "dev": true,
+      "dependencies": {
+        "eslint-plugin-vue": "^7.0.0",
+        "requireindex": "^1.2.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0",
+        "vuetify": "^2.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-vuetify/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/eslint-plugin-vuetify/node_modules/eslint-plugin-vue": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.20.0.tgz",
+      "integrity": "sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==",
+      "dev": true,
+      "dependencies": {
+        "eslint-utils": "^2.1.0",
+        "natural-compare": "^1.4.0",
+        "semver": "^6.3.0",
+        "vue-eslint-parser": "^7.10.0"
+      },
+      "engines": {
+        "node": ">=8.10"
+      },
+      "peerDependencies": {
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-vuetify/node_modules/eslint-visitor-keys": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-plugin-vuetify/node_modules/espree": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "acorn-jsx": "^5.2.0",
+        "eslint-visitor-keys": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-vuetify/node_modules/vue-eslint-parser": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
+      "integrity": "sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "eslint-scope": "^5.1.1",
+        "eslint-visitor-keys": "^1.1.0",
+        "espree": "^6.2.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "dev": true,
@@ -13424,6 +13518,58 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/null-loader": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz",
+      "integrity": "sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/null-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/null-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.7",
       "dev": true,
@@ -15281,6 +15427,18 @@
         "node": ">= 4"
       }
     },
+    "node_modules/rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+      "dev": true,
+      "dependencies": {
+        "resolve": "^1.1.6"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "dev": true,
@@ -15464,6 +15622,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/requireindex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.5"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "dev": true,
@@ -15570,6 +15737,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/roboto-fontface": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g==",
+      "dev": true
+    },
     "node_modules/rss-parser": {
       "version": "3.13.0",
       "dev": true,
@@ -16045,6 +16218,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shelljs": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      },
+      "bin": {
+        "shjs": "bin/shjs"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/shellwords": {
       "version": "0.1.1",
       "dev": true,
@@ -17910,6 +18100,61 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-cli-plugin-vuetify": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.5.8.tgz",
+      "integrity": "sha512-uqi0/URJETJBbWlQHD1l0pnY7JN8Ytu+AL1fw50HFlGByPa8/xx+mq19GkFXA9FcwFT01IqEc/TkxMPugchomg==",
+      "dev": true,
+      "dependencies": {
+        "null-loader": "^4.0.1",
+        "semver": "^7.1.2",
+        "shelljs": "^0.8.3"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "sass-loader": {
+          "optional": true
+        },
+        "vuetify-loader": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-cli-plugin-vuetify/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vue-cli-plugin-vuetify/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vue-cli-plugin-vuetify/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/vue-codemod": {
       "version": "0.0.5",
       "dev": true,
@@ -24698,6 +24943,68 @@
         }
       }
     },
+    "eslint-plugin-vuetify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-1.1.0.tgz",
+      "integrity": "sha512-I1YRUCGkDqe8F7O0tdf63UZVKtk4734+8fzbZ24YIZKTTyQp/FIR0nSZYG8mPFhTWerzPta7oXNzliBOwP2XeQ==",
+      "dev": true,
+      "requires": {
+        "eslint-plugin-vue": "^7.0.0",
+        "requireindex": "^1.2.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "eslint-plugin-vue": {
+          "version": "7.20.0",
+          "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.20.0.tgz",
+          "integrity": "sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==",
+          "dev": true,
+          "requires": {
+            "eslint-utils": "^2.1.0",
+            "natural-compare": "^1.4.0",
+            "semver": "^6.3.0",
+            "vue-eslint-parser": "^7.10.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "dev": true
+        },
+        "espree": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+          "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
+          "dev": true,
+          "requires": {
+            "acorn": "^7.1.1",
+            "acorn-jsx": "^5.2.0",
+            "eslint-visitor-keys": "^1.1.0"
+          }
+        },
+        "vue-eslint-parser": {
+          "version": "7.11.0",
+          "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
+          "integrity": "sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==",
+          "dev": true,
+          "requires": {
+            "debug": "^4.1.1",
+            "eslint-scope": "^5.1.1",
+            "eslint-visitor-keys": "^1.1.0",
+            "espree": "^6.2.1",
+            "esquery": "^1.4.0",
+            "lodash": "^4.17.21",
+            "semver": "^6.3.0"
+          }
+        }
+      }
+    },
     "eslint-scope": {
       "version": "5.1.1",
       "dev": true,
@@ -28142,6 +28449,40 @@
         "boolbase": "^1.0.0"
       }
     },
+    "null-loader": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz",
+      "integrity": "sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "nwsapi": {
       "version": "2.2.7",
       "dev": true
@@ -29254,6 +29595,15 @@
         "tslib": "^2.0.1"
       }
     },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+      "dev": true,
+      "requires": {
+        "resolve": "^1.1.6"
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "dev": true
@@ -29376,6 +29726,12 @@
       "version": "2.0.0",
       "dev": true
     },
+    "requireindex": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+      "dev": true
+    },
     "requires-port": {
       "version": "1.0.0",
       "dev": true
@@ -29443,6 +29799,12 @@
         "glob": "^7.1.3"
       }
     },
+    "roboto-fontface": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
+      "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g==",
+      "dev": true
+    },
     "rss-parser": {
       "version": "3.13.0",
       "dev": true,
@@ -29750,6 +30112,17 @@
       "version": "1.8.1",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      }
+    },
     "shellwords": {
       "version": "0.1.1",
       "dev": true
@@ -30992,6 +31365,43 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-cli-plugin-vuetify": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.5.8.tgz",
+      "integrity": "sha512-uqi0/URJETJBbWlQHD1l0pnY7JN8Ytu+AL1fw50HFlGByPa8/xx+mq19GkFXA9FcwFT01IqEc/TkxMPugchomg==",
+      "dev": true,
+      "requires": {
+        "null-loader": "^4.0.1",
+        "semver": "^7.1.2",
+        "shelljs": "^0.8.3"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+          "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
+    },
     "vue-codemod": {
       "version": "0.0.5",
       "dev": true,
diff --git a/package.json b/package.json
index c14dc3e8..9931cd3c 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vuetify": "^1.1.0",
     "gh-pages": "^1.1.0",
     "karma": "^6.4.0",
     "karma-chrome-launcher": "^3.1.1",
@@ -61,10 +62,12 @@
     "karma-webpack": "^5.0.0",
     "material-icons": "^1.13.9",
     "portal-vue": "^2.1.7",
+    "roboto-fontface": "*",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "sinon": "^9.2.4",
     "sinon-chai": "^3.5.0",
+    "vue-cli-plugin-vuetify": "~2.5.8",
     "vue-template-compiler": "2.7.14"
   },
   "engines": {
diff --git a/public/embedded.html b/public/embedded.html
index c21c3577..3df9cd48 100644
--- a/public/embedded.html
+++ b/public/embedded.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/public/index.html b/public/index.html
index 62f30cb5..b472ad3e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/src/components/InfoWindow.vue b/src/components/InfoWindow.vue
index 67a37ddf..7d0c0460 100644
--- a/src/components/InfoWindow.vue
+++ b/src/components/InfoWindow.vue
@@ -23,8 +23,8 @@
            </div>
          </v-card-title>
          <v-card-actions>
-           <v-btn flat class="orange--text">Share</v-btn>
-           <v-btn flat class="orange--text">Explore</v-btn>
+           <v-btn text class="orange--text">Share</v-btn>
+           <v-btn text class="orange--text">Explore</v-btn>
          </v-card-actions>
     </v-card>
 
diff --git a/src/components/bglayerswitcher/LayerPreviewImage.vue b/src/components/bglayerswitcher/LayerPreviewImage.vue
index d0756dc4..88afed0b 100644
--- a/src/components/bglayerswitcher/LayerPreviewImage.vue
+++ b/src/components/bglayerswitcher/LayerPreviewImage.vue
@@ -6,10 +6,10 @@
       v-on:error="imgLoaded=false"
       >
       <!-- Fallback if no preview image is available or the image can't be loaded. -->
-      <v-layout v-if="!previewURL || !imgLoaded"
-        fill-height align-center justify-center>
+      <v-row v-if="!previewURL || !imgLoaded"
+        class="fill-height" align="center" justify="center">
         <v-icon x-large>{{previewIcon}}</v-icon>
-      </v-layout>
+      </v-row>
   </v-img>
 </template>
 
diff --git a/src/components/maprecorder/MapRecorderWin.vue b/src/components/maprecorder/MapRecorderWin.vue
index b62791f6..b11a54f1 100644
--- a/src/components/maprecorder/MapRecorderWin.vue
+++ b/src/components/maprecorder/MapRecorderWin.vue
@@ -8,10 +8,10 @@
     <v-expansion-panels :multiple="true" :accordion="true" class="overflow-y-auto">
       <v-expansion-panel>
         <v-expansion-panel-header>
-          <v-layout align-center>
+          <v-row align="center">
             <v-icon class="mr-4">settings</v-icon>
             {{ $t('wgu-maprecorder.options') }}
-          </v-layout>
+          </v-row>
         </v-expansion-panel-header>
         <v-expansion-panel-content>
           <v-card
@@ -82,8 +82,8 @@
 
     <v-card-actions class="pb-5">
       <v-row
-        align-center
-        justify-center
+        align="center"
+        justify="center"
         no-gutters
         class="px-3"
       >
diff --git a/src/main.js b/src/main.js
index d89ebe98..1bd5936a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
 // The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+// (runtime-only or standalone) has been set in vue.config.js with runtimeCompiler.
 import Vue from 'vue';
 import Vuetify from 'vuetify';
 import PortalVue from 'portal-vue'
 import VueI18n from 'vue-i18n';
+import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import '@mdi/font/css/materialdesignicons.css'
 import 'material-icons/iconfont/material-icons.css'
 import '../node_modules/ol/ol.css';