diff --git a/.eslintrc.js b/.eslintrc.js
index 0c8fb30d..d55a120a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,64 +1,112 @@
 module.exports = {
-  'env': {
-    'browser': true,
-    'node': true,
-    'es2021': true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
   },
-  'extends': [
+  extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/recommended',
   ],
-  'parserOptions': {
-    "parser": "@typescript-eslint/parser",
-    "project": "./tsconfig.json",
-    'extraFileExtensions': [ '.vue' ]
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    project: './tsconfig.json',
+    extraFileExtensions: ['.vue'],
   },
-  'plugins': [
-    'vue',
-  ],
-  'rules': {
-    'max-len': ['error', {
-      'code': 100,
-      // Fixes errors in HTML files with long links
-      'ignoreUrls': true,
-    }],
+  plugins: ['vue'],
+  rules: {
+    'max-len': [
+      'error',
+      {
+        code: 100,
+        // Fixes errors in HTML files with long links
+        ignoreUrls: true,
+      },
+    ],
+
+    // Disable stylistic rules that interfere with Prettier
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/html-self-closing': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/html-indent': 'off',
 
     'vue/multi-word-component-names': ['off'],
     // This rule is for Vue3, and Gridsome uses Vue2
     'vue/no-deprecated-filter': ['off'],
     // Don't make <g-link> multiline, it adds spaces
-    "vue/multiline-html-element-content-newline": ["error", {
-      "ignores": [
-        "g-link",
-        // Original inline elements from: https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json
-        "a", "abbr", "audio", "b", "bdi", "bdo", "canvas", "cite", "code", "data", "del", "dfn", "em", "i", "iframe", "ins", "kbd", "label", "map", "mark", "noscript", "object", "output", "picture", "q", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "svg", "time", "u", "var", "video"
-      ],
-    }],
-    "vue/singleline-html-element-content-newline": ["error", {
-      "externalIgnores": ["g-link"]
-    }],
+    'vue/multiline-html-element-content-newline': [
+      'error',
+      {
+        ignores: [
+          'g-link',
+          // Original inline elements from: https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json
+          'a',
+          'abbr',
+          'audio',
+          'b',
+          'bdi',
+          'bdo',
+          'canvas',
+          'cite',
+          'code',
+          'data',
+          'del',
+          'dfn',
+          'em',
+          'i',
+          'iframe',
+          'ins',
+          'kbd',
+          'label',
+          'map',
+          'mark',
+          'noscript',
+          'object',
+          'output',
+          'picture',
+          'q',
+          'ruby',
+          's',
+          'samp',
+          'small',
+          'span',
+          'strong',
+          'sub',
+          'sup',
+          'svg',
+          'time',
+          'u',
+          'var',
+          'video',
+        ],
+      },
+    ],
 
     '@typescript-eslint/indent': ['error', 2],
-    "semi": ["error", "always"],
-    "arrow-parens": ["error", "always"],
-    "comma-dangle": ["error", "always-multiline"],
+    semi: ['error', 'always'],
+    'arrow-parens': ['error', 'always'],
+    'comma-dangle': ['error', 'always-multiline'],
 
-    "@typescript-eslint/explicit-function-return-type": ["error", {
-      "allowExpressions": true,
-      "allowHigherOrderFunctions": true,
-      "allowTypedFunctionExpressions": true
-    }]
+    '@typescript-eslint/explicit-function-return-type': [
+      'error',
+      {
+        allowExpressions: true,
+        allowHigherOrderFunctions: true,
+        allowTypedFunctionExpressions: true,
+      },
+    ],
   },
-  'overrides': [
+  overrides: [
     {
-      'files': ['*.vue', 'declarations/*.ts'],
-      'rules': {
-        'indent': 'off',
+      files: ['*.vue', 'declarations/*.ts'],
+      rules: {
+        indent: 'off',
         '@typescript-eslint/indent': 'off',
         '@typescript-eslint/no-var-requires': 0,
-      }
-    }
-  ]
+      },
+    },
+  ],
 };
diff --git a/.github/workflows/eslint.yml b/.github/workflows/linting.yml
similarity index 78%
rename from .github/workflows/eslint.yml
rename to .github/workflows/linting.yml
index eca608b7..d30c53a1 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/linting.yml
@@ -1,20 +1,24 @@
+###
+### GitHub action to run linting (ESLint & Prettier)
+###
+
 # ESLint is a tool for identifying and reporting on patterns
 # found in ECMAScript/JavaScript code.
 # More details at https://github.com/eslint/eslint
 # and https://eslint.org
 
-name: ESLint
+name: ESLint & Prettier
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
-  eslint:
-    name: Run ESLint scanning
+  linting:
+    name: Run ESLint & Prettier
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -33,9 +37,12 @@ jobs:
         run: yarn install
 
       - name: Run ESLint
-        run: yarn lint-ci
+        run: yarn eslint-ci
         continue-on-error: true
 
+      - name: Run Prettier
+        run: yarn prettier . --check
+
       - name: Upload analysis results to GitHub
         uses: github/codeql-action/upload-sarif@v2
         with:
diff --git a/.github/workflows/pytest.yml b/.github/workflows/pytest.yml
index ebea6994..bb09991b 100644
--- a/.github/workflows/pytest.yml
+++ b/.github/workflows/pytest.yml
@@ -4,10 +4,10 @@ name: Pytest Data Tests
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
   pytest:
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..c6d72715
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+# Ignore built files
+dist
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..544138be
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/README.md b/README.md
index 4692f18d..e1ef228e 100644
--- a/README.md
+++ b/README.md
@@ -63,7 +63,7 @@ When you see the above output, it means the site is now running and now you can
 
 ### Run Front-End Linting
 
-To run linting with auto-fix, run the following command:
+To run linting with auto-fixing (ESLint + Prettier), run the following command:
 
 ```bash
 docker-compose run --rm electrify-chicago yarn lint-fix
@@ -72,7 +72,7 @@ docker-compose run --rm electrify-chicago yarn lint-fix
 ### Run Data Processing
 
 1. If you update the raw data CSVs or the data scripts that post-process them (like if you are adding
-a new statistical analysis), you need to re-run the data processing.
+   a new statistical analysis), you need to re-run the data processing.
 
 2. To then process a new CSV file (at `src/data/source/ChicagoEnergyBenchmarking.csv`), you need to run the following command:
 
@@ -93,8 +93,9 @@ docker-compose run --rm electrify-chicago bash create_test_data.sh
 ```bash
 docker-compose run --rm electrify-chicago python -m pytest
 ```
+
 3. Run the following command for individual unit test suite (where YOUR_FILE_NAME is something like
-`test_clean_all_years`):
+   `test_clean_all_years`):
 
 ```bash
 docker-compose run --rm electrify-chicago python -m pytest tests/data/scripts/unit/YOUR_FILE_NAME.py
@@ -107,7 +108,7 @@ docker-compose run --rm electrify-chicago python -m pytest tests/data/scripts/un
 If there's a new large building owner to add, simply:
 
 1. **Add the building owner in the `BuildingOwners` constant** in `buildings-custom-info.constant.vue` -
-this defines metadata about the owner like their name and logo URLs
+   this defines metadata about the owner like their name and logo URLs
 
 Example:
 
@@ -122,8 +123,8 @@ iit: {
 ```
 
 2. **Tag buildings they own in the `BuildingsCustomInfo` constant** (in the same
-`buildings-custom-info.constant.vue` file) - this associates a given building (by its numeric unique
-ID, found under its address on its details page), with a given owner.
+   `buildings-custom-info.constant.vue` file) - this associates a given building (by its numeric unique
+   ID, found under its address on its details page), with a given owner.
 
 Example:
 
@@ -133,7 +134,7 @@ Example:
 ```
 
 3. **Setup their route by adding the new owner's ID (key) to `BuildingOwnerIds`** (in
-`gridsome.server.js`) - this tells Gridsome to create a route for this given slug
+   `gridsome.server.js`) - this tells Gridsome to create a route for this given slug
 
 Example:
 
@@ -141,7 +142,7 @@ Example:
 const BuildingOwnerIds = [
   'iit',
   // ...
-]
+];
 ```
 
 **Note:** You'll have to restart your `yarn develop` after step 3 to see changes, since
@@ -149,8 +150,8 @@ const BuildingOwnerIds = [
 
 ### Adding Building Images
 
-1. **Find A Suitable Image* -- Building images can be sourced from Google Maps or a source that allows redistribution, like
-Wikimedia.
+1. \*_Find A Suitable Image_ -- Building images can be sourced from Google Maps or a source that allows redistribution, like
+   Wikimedia.
 
 2 **Process the Image**
 
@@ -162,12 +163,11 @@ We should reasonably crop images if needed and then scale them to be EITHER:
 Make sure to export it as a `.jpg` image at a quality level of 70, which should ensure a reasonable
 file size under 200 kB.
 
-**Store the image in `/static/building-imgs/`.
+\*\*Store the image in `/static/building-imgs/`.
 
 3. **Tell The Site There's a Building Image** - Follow the pattern of other buildings in the
-`building-images.constant.vue`, providing an attribution URL, the image file name, and specify
-whether it's a tall (portrait) image and whether it's from Google Maps.
-
+   `building-images.constant.vue`, providing an attribution URL, the image file name, and specify
+   whether it's a tall (portrait) image and whether it's from Google Maps.
 
 4. **Confirm the image is visible and looks good** - and that's all there is to it!
 
diff --git a/docker-compose.yml b/docker-compose.yml
index fae95a02..02fc07d6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,7 +7,7 @@ services:
       context: .
       dockerfile: Dockerfile
     ports:
-      - "8080:8080"
+      - '8080:8080'
     entrypoint: /app/docker-entrypoint.sh
     volumes:
       - .:/app
diff --git a/gridsome.config.js b/gridsome.config.js
index fb7ce1f5..e10b5524 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -12,16 +12,14 @@ const path = require('path');
  * @param {string} rule A rule?
  */
 function addStyleResource(rule) {
-  rule.use('style-resource')
-      .loader('style-resources-loader')
-      .options({
-        patterns: [
-          path.resolve(__dirname, './src/scss/*.scss'),
-        ],
-      });
+  rule
+    .use('style-resource')
+    .loader('style-resources-loader')
+    .options({
+      patterns: [path.resolve(__dirname, './src/scss/*.scss')],
+    });
 }
 
-
 module.exports = {
   siteName: 'Electrify Chicago',
   plugins: [
diff --git a/gridsome.server.js b/gridsome.server.js
index c41c74c8..cb50e812 100644
--- a/gridsome.server.js
+++ b/gridsome.server.js
@@ -9,7 +9,7 @@
  * From fetching CSV data:
  * https://gridsome.org/docs/fetching-data/#csv
  */
-const {readFileSync} = require('fs');
+const { readFileSync } = require('fs');
 const parse = require('csv-parse/sync').parse;
 
 const DataDirectory = './src/data/dist/';
@@ -36,7 +36,7 @@ const BuildingOwnerIds = [
   'npu',
 ];
 
-module.exports = function(api) {
+module.exports = function (api) {
   // Use the Data Store API here: https://gridsome.org/docs/data-store-api/
   api.loadSource(async (actions) => {
     loadBuildingBenchmarkData(actions);
@@ -47,13 +47,13 @@ module.exports = function(api) {
   api.createPages(({ createPage }) => {
     // Create pages for building owners. This could be a dynamic route, but making it this way
     // should let them get statically built as expected
-    BuildingOwnerIds.forEach(ownerId => {
+    BuildingOwnerIds.forEach((ownerId) => {
       createPage({
         path: `/owner/${ownerId}`,
         component: './src/templates/BuildingOwner.vue',
         context: { ownerId },
-      })
-    })
+      });
+    });
   });
 };
 
@@ -63,7 +63,10 @@ module.exports = function(api) {
  * @param {unknown} actions The actions class?
  */
 function loadBuildingBenchmarkData(actions) {
-  const latestBenchmarksRaw = readFileSync(`${DataDirectory}${BuildingEmissionsDataFile}`, 'utf8');
+  const latestBenchmarksRaw = readFileSync(
+    `${DataDirectory}${BuildingEmissionsDataFile}`,
+    'utf8',
+  );
 
   /**
    * Load in building benchmarks and expose as Buildings collection
@@ -73,12 +76,15 @@ function loadBuildingBenchmarkData(actions) {
     skip_empty_lines: true,
   });
 
-  const collection = actions.addCollection({typeName: 'Building'});
+  const collection = actions.addCollection({ typeName: 'Building' });
 
   for (const building of LatestBenchmarksData) {
     // Make a slugSource that is the property name or the address as a fallback (skip one letter
     // names, e.g. '-)
-    building.slugSource = building.PropertyName.length > 1 ? building.PropertyName : building.Address;
+    building.slugSource =
+      building.PropertyName.length > 1
+        ? building.PropertyName
+        : building.Address;
 
     if (!building.slugSource || typeof building.slugSource !== 'string') {
       throw new Error('No building slug source (name or address)!', building);
@@ -88,14 +94,16 @@ function loadBuildingBenchmarkData(actions) {
   }
 }
 
-
 /**
  * Load in the historic benchmark data
  *
  * @param {unknown} actions The actions class?
  */
 function loadHistoricBenchmarkDat(actions) {
-  const historicBenchmarksRaw = readFileSync(`${DataDirectory}${HistoricBenchmarkingDataFile}`, 'utf8');
+  const historicBenchmarksRaw = readFileSync(
+    `${DataDirectory}${HistoricBenchmarkingDataFile}`,
+    'utf8',
+  );
 
   /**
    * Load in building benchmarks and expose as Buildings collection
diff --git a/package.json b/package.json
index 78fa9f69..ff77eda3 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,10 @@
     "build": "gridsome build",
     "develop": "gridsome develop",
     "explore": "gridsome explore",
-    "lint": "yarn eslint --ext .ts,.vue ./src",
-    "lint-ci": "yarn lint --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif",
-    "lint-fix": "yarn lint --fix"
+    "eslint-ci": "yarn eslint-base --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif",
+    "eslint-base": "yarn eslint --ext .ts,.vue ./src",
+    "lint": "yarn eslint-base && npx prettier . --check",
+    "lint-fix": "yarn eslint-base --fix && npx prettier . --write"
   },
   "dependencies": {
     "csv-parse": "^5.3.6",
@@ -39,6 +40,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.9.0",
     "gridsome-plugin-typescript": "^0.4.0",
+    "prettier": "3.4.2",
     "sass": "^1.59.3",
     "sass-loader": "^10.1.1",
     "style-resources-loader": "^1.5.0",
diff --git a/src/common-functions.vue b/src/common-functions.vue
index 051b09f7..204aa28f 100644
--- a/src/common-functions.vue
+++ b/src/common-functions.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-export default { };
+export default {};
 
 export interface IBuildingBenchmarkStat {
   count: number;
@@ -32,7 +32,6 @@ export interface IPropertyStats {
   [statKey: string]: IPropertyStat;
 }
 
-
 /**
  * An individual building object
  *
@@ -46,7 +45,6 @@ export interface IBuilding {
   Latitude: string;
   Longitude: string;
 
-
   NaturalGasUse: string;
   DistrictSteamUse: string;
 
@@ -54,7 +52,9 @@ export interface IBuilding {
 }
 
 /** How GraphQL passes back a building */
-export interface IBuildingNode { node: IBuilding }
+export interface IBuildingNode {
+  node: IBuilding;
+}
 
 export interface IHistoricData {
   ID: string;
@@ -95,7 +95,10 @@ export const RankConfig = {
  * Returns a string rank for very bad buildings, or null if not in top 50
  * worst
  */
-export function getRankLabel(statRank: number, isSquareFootage: boolean): string | null {
+export function getRankLabel(
+  statRank: number,
+  isSquareFootage: boolean,
+): string | null {
   if (isSquareFootage) {
     return 'Largest';
   } else if (statRank <= RankConfig.AlarmRankMax) {
@@ -111,8 +114,11 @@ export function getRankLabel(statRank: number, isSquareFootage: boolean): string
  * Returns a string rank for very bad buildings per primary property
  * type, or null if not in top 50 worst
  */
-export function getRankLabelByProperty(statRank: number, isSquareFootage: boolean,
-  propertyTag: string): string | null {
+export function getRankLabelByProperty(
+  statRank: number,
+  isSquareFootage: boolean,
+  propertyTag: string,
+): string | null {
   if (isSquareFootage) {
     return `Largest of ${propertyTag}`;
   } else if (statRank <= RankConfig.AlarmRankMax) {
@@ -146,7 +152,9 @@ export const RankedColumns = [
  * @return {number|null}
  */
 export function getStatRankInverted(
-  statKey: string, statRank: number, buildingStats: IBuildingBenchmarkStats,
+  statKey: string,
+  statRank: number,
+  buildingStats: IBuildingBenchmarkStats,
 ): number | null {
   if (statRank) {
     const countForStat = buildingStats[statKey].count;
@@ -175,7 +183,7 @@ export function getStatRankInverted(
 export function getOverallRankEmoji(
   building: IBuilding,
   buildingStats: IBuildingBenchmarkStats,
-): { msg: string, emoji: string } | null {
+): { msg: string; emoji: string } | null {
   let worstEmoji: string | null = null;
   let hasTrophyCategory = false;
 
@@ -184,7 +192,11 @@ export function getOverallRankEmoji(
   RankedColumns.forEach((columnKey) => {
     const val = building[columnKey + 'Rank'];
     const statRank = parseFloat((val ?? '').toString());
-    const statRankInverted = getStatRankInverted(columnKey, statRank, buildingStats);
+    const statRankInverted = getStatRankInverted(
+      columnKey,
+      statRank,
+      buildingStats,
+    );
 
     // Ignore the column if rank is NaN
     if (typeof statRank !== 'number' || isNaN(statRank)) {
@@ -194,10 +206,16 @@ export function getOverallRankEmoji(
     if (statRank <= RankConfig.AlarmRankMax) {
       // Alarm is always the worst, so we override
       worstEmoji = RankConfig.AlarmEmoji;
-    } else if (statRank <= RankConfig.FlagRankMax && worstEmoji !== RankConfig.AlarmEmoji) {
+    } else if (
+      statRank <= RankConfig.FlagRankMax &&
+      worstEmoji !== RankConfig.AlarmEmoji
+    ) {
       // If the worstEmoji isn't the alarm and we meet the flag rank, set to flag
       worstEmoji = RankConfig.FlagEmoji;
-    } else if (statRankInverted && statRankInverted <= RankConfig.TrophyRankInvertedMax) {
+    } else if (
+      statRankInverted &&
+      statRankInverted <= RankConfig.TrophyRankInvertedMax
+    ) {
       hasTrophyCategory = true;
     }
   });
@@ -211,7 +229,10 @@ export function getOverallRankEmoji(
   } else if (worstEmoji) {
     return {
       emoji: worstEmoji,
-      msg: worstEmoji === RankConfig.AlarmEmoji ? RankConfig.AlarmMsg : RankConfig.FlagMsg,
+      msg:
+        worstEmoji === RankConfig.AlarmEmoji
+          ? RankConfig.AlarmMsg
+          : RankConfig.FlagMsg,
     };
   }
 
@@ -224,7 +245,8 @@ export function getOverallRankEmoji(
  */
 export const UtilityCosts = {
   year: 2021,
-  source: 'https://www.bls.gov/regions/midwest/news-release/AverageEnergyPrices_Chicago.htm',
+  source:
+    'https://www.bls.gov/regions/midwest/news-release/AverageEnergyPrices_Chicago.htm',
   electricCostPerKWh: 0.143,
   gasCostPerTherm: 1.192,
 };
@@ -239,7 +261,10 @@ export const UtilityCosts = {
  * Keating nat gas cost: $708,860.13
  * Keating electric cost: $82,898.53
  */
-export function estimateUtilitySpend(energyUseKbtu: number, isElectric: boolean): number {
+export function estimateUtilitySpend(
+  energyUseKbtu: number,
+  isElectric: boolean,
+): number {
   const kwhToKbtuMult = 3.412; // 1kWh = 3.412 kBtu
   const thermToKbtuMult = 99.976; // 1th = 99.976 kBtu
 
@@ -250,7 +275,6 @@ export function estimateUtilitySpend(energyUseKbtu: number, isElectric: boolean)
 
   const estimateRaw = costPerKbtu * energyUseKbtu;
 
-
   // If > $1,000 round to the nearest 100 (e.g. $12,345 -> $12,000)
   if (estimateRaw > 1_000) {
     return Math.round(estimateRaw / 1_000) * 1_000;
diff --git a/src/components/BuildingImage.vue b/src/components/BuildingImage.vue
index 7b33d1aa..b5e22b85 100644
--- a/src/components/BuildingImage.vue
+++ b/src/components/BuildingImage.vue
@@ -5,22 +5,15 @@
     :class="{ '-tall': Boolean(buildingImg.isTall) }"
   >
     <!-- TODO: Figure out how to do alt text for these images - skipping for now -->
-    <img
-      :src="buildingImg.imgUrl"
-      alt=""
-    >
+    <img :src="buildingImg.imgUrl" alt="" />
 
     <p class="attribution">
       <strong>Attribution:</strong>
       {{ buildingImg.fromGoogleMaps ? '© Google ' + currentYear : '' }}
-      <a
-        ref="noopener"
-        :href="buildingImg.attributionUrl"
-        target="_blank"
-      >
+      <a ref="noopener" :href="buildingImg.attributionUrl" target="_blank">
         Image Source
-        <NewTabIcon />
-      </a>. Cropped from original.
+        <NewTabIcon /> </a
+      >. Cropped from original.
     </p>
   </div>
 </template>
@@ -28,8 +21,11 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import {IBuilding} from '../common-functions.vue';
-import { getBuildingImage, IBuildingImage } from '../constants/building-images.constant.vue';
+import { IBuilding } from '../common-functions.vue';
+import {
+  getBuildingImage,
+  IBuildingImage,
+} from '../constants/building-images.constant.vue';
 import NewTabIcon from './NewTabIcon.vue';
 
 /**
@@ -42,7 +38,7 @@ import NewTabIcon from './NewTabIcon.vue';
   },
 })
 export default class BuildingImage extends Vue {
-  @Prop({required: true}) building!: IBuilding;
+  @Prop({ required: true }) building!: IBuilding;
 
   /**
    * Returns the image object associated with this image
@@ -52,19 +48,22 @@ export default class BuildingImage extends Vue {
   }
 
   get currentYear(): number {
-    return (new Date()).getFullYear();
+    return new Date().getFullYear();
   }
 }
 </script>
 
 <style lang="scss">
 .building-img-cont {
-
   &.-tall {
     text-align: right;
 
-    img { max-height: 35rem; }
-    p { text-align: left; }
+    img {
+      max-height: 35rem;
+    }
+    p {
+      text-align: left;
+    }
   }
 
   img {
@@ -78,7 +77,9 @@ export default class BuildingImage extends Vue {
   }
 
   @media (max-width: $mobile-max-width) {
-    &.-tall { text-align: left; }
+    &.-tall {
+      text-align: left;
+    }
   }
 }
 </style>
diff --git a/src/components/BuildingsTable.vue b/src/components/BuildingsTable.vue
index 3194008d..5e733d26 100644
--- a/src/components/BuildingsTable.vue
+++ b/src/components/BuildingsTable.vue
@@ -6,7 +6,6 @@ import OverallRankEmoji from './OverallRankEmoji.vue';
 import OwnerLogo from './OwnerLogo.vue';
 import { IBuilding, IBuildingBenchmarkStats } from '../common-functions.vue';
 
-
 // This simple JSON is a lot easier to just use directly than going through GraphQL and it's
 // tiny
 import BuildingBenchmarkStats from '../data/dist/building-benchmark-stats.json';
@@ -20,72 +19,51 @@ import BuildingBenchmarkStats from '../data/dist/building-benchmark-stats.json';
 })
 export default class BuildingsTable extends Vue {
   /** Expose stats to template */
-  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats = BuildingBenchmarkStats;
+  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats =
+    BuildingBenchmarkStats;
 
-  @Prop({required:true}) buildings!: Array<{ node: IBuilding }>;
+  @Prop({ required: true }) buildings!: Array<{ node: IBuilding }>;
 
-  @Prop({default: false}) showSquareFootage!: boolean;
+  @Prop({ default: false }) showSquareFootage!: boolean;
 
-  @Prop({default: false}) showGasUse!: boolean;
+  @Prop({ default: false }) showGasUse!: boolean;
 
-  @Prop({default: false}) showElectricityUse!: boolean;
+  @Prop({ default: false }) showElectricityUse!: boolean;
 }
 </script>
 
 <template>
   <div class="buildings-table-cont">
-    <table :class="{ '-wide': showSquareFootage || showGasUse || showElectricityUse }">
+    <table
+      :class="{
+        '-wide': showSquareFootage || showGasUse || showElectricityUse,
+      }"
+    >
       <thead>
         <tr>
-          <th scope="col">
-            Name / Address
-          </th>
-          <th
-            scope="col"
-            class="prop-type"
-          >
-            Primary Property Type
-          </th>
-          <th v-if="showSquareFootage">
-            Square Footage
-          </th>
-          <th
-            v-if="showGasUse"
-            scope="col"
-            class="numeric wide-col"
-          >
-            Fossil Gas Use<br>
+          <th scope="col">Name / Address</th>
+          <th scope="col" class="prop-type">Primary Property Type</th>
+          <th v-if="showSquareFootage">Square Footage</th>
+          <th v-if="showGasUse" scope="col" class="numeric wide-col">
+            Fossil Gas Use<br />
             <span class="unit">(kBtu)</span>
           </th>
-          <th
-            v-if="showElectricityUse"
-            scope="col"
-            class="numeric wide-col"
-          >
-            Electricity Use<br>
+          <th v-if="showElectricityUse" scope="col" class="numeric wide-col">
+            Electricity Use<br />
             <span class="unit">(kBtu)</span>
           </th>
-          <th
-            scope="col"
-            class="numeric wide-col"
-          >
-            GHG Intensity<br>
+          <th scope="col" class="numeric wide-col">
+            GHG Intensity<br />
             <span class="unit">(kg CO<sub>2</sub> eq./sqft)</span>
           </th>
-          <th
-            scope="col"
-            class="numeric wide-col"
-          >
-            Total GHG Emissions<br>
+          <th scope="col" class="numeric wide-col">
+            Total GHG Emissions<br />
             <span class="unit">(tons CO<sub>2</sub> eq.)</span>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          v-for="edge in buildings"
-          :key="edge.node.id"
-        >
+        <tr v-for="edge in buildings" :key="edge.node.id">
           <td class="property-name">
             <g-link :to="edge.node.path">
               {{ edge.node.PropertyName || edge.node.Address }}
@@ -94,10 +72,7 @@ export default class BuildingsTable extends Vue {
               :building="edge.node"
               :stats="BuildingBenchmarkStats"
             />
-            <OwnerLogo
-              :building="edge.node"
-              :is-small="true"
-            />
+            <OwnerLogo :building="edge.node" :is-small="true" />
 
             <div class="prop-address">
               {{ edge.node.Address }}
@@ -106,10 +81,7 @@ export default class BuildingsTable extends Vue {
           <td>{{ edge.node.PrimaryPropertyType }}</td>
 
           <!-- Square footage is optional, only shown on BiggestBuildings -->
-          <td
-            v-if="showSquareFootage"
-            class="numeric"
-          >
+          <td v-if="showSquareFootage" class="numeric">
             <template v-if="edge.node.GrossFloorArea">
               <RankText
                 :building="edge.node"
@@ -119,15 +91,10 @@ export default class BuildingsTable extends Vue {
                 stat-key="GrossFloorArea"
               />
             </template>
-            <template v-else>
-              -
-            </template>
+            <template v-else> - </template>
           </td>
 
-          <td
-            v-if="showGasUse"
-            class="numeric"
-          >
+          <td v-if="showGasUse" class="numeric">
             <template v-if="edge.node.NaturalGasUse">
               <RankText
                 :building="edge.node"
@@ -137,14 +104,9 @@ export default class BuildingsTable extends Vue {
                 stat-key="NaturalGasUse"
               />
             </template>
-            <template v-else>
-              -
-            </template>
+            <template v-else> - </template>
           </td>
-          <td
-            v-if="showElectricityUse"
-            class="numeric"
-          >
+          <td v-if="showElectricityUse" class="numeric">
             <template v-if="edge.node.ElectricityUse">
               <RankText
                 :building="edge.node"
@@ -154,9 +116,7 @@ export default class BuildingsTable extends Vue {
                 stat-key="ElectricityUse"
               />
             </template>
-            <template v-else>
-              -
-            </template>
+            <template v-else> - </template>
           </td>
 
           <!-- GHG Intensity is shown on all tables -->
@@ -169,9 +129,7 @@ export default class BuildingsTable extends Vue {
                 :unit="'kg/sqft'"
               />
             </template>
-            <template v-else>
-              -
-            </template>
+            <template v-else> - </template>
           </td>
           <td class="numeric">
             <template v-if="edge.node.TotalGHGEmissions">
@@ -183,9 +141,7 @@ export default class BuildingsTable extends Vue {
                 :unit="'tons'"
               />
             </template>
-            <template v-else>
-              -
-            </template>
+            <template v-else> - </template>
           </td>
         </tr>
       </tbody>
@@ -214,7 +170,9 @@ export default class BuildingsTable extends Vue {
       min-width: 88rem;
 
       // Wide columns shouldn't be as wide if we have more of them
-      .wide-col { width: 17%; }
+      .wide-col {
+        width: 17%;
+      }
     }
 
     a {
@@ -228,7 +186,9 @@ export default class BuildingsTable extends Vue {
       position: sticky;
       top: 0;
 
-      tr { background-color: $grey-dark; }
+      tr {
+        background-color: $grey-dark;
+      }
 
       th {
         text-align: left;
@@ -244,18 +204,31 @@ export default class BuildingsTable extends Vue {
       }
     }
 
-    th, td {
+    th,
+    td {
       padding: 0.75rem;
       line-height: 1.25;
 
-      &:first-of-type { padding-left: 1rem; }
-      &:last-of-type { padding-right: 1rem; }
-      &.numeric { text-align: right; }
-      &.wide-col { width: 20%; }
-      &.prop-type { width: 12rem; }
+      &:first-of-type {
+        padding-left: 1rem;
+      }
+      &:last-of-type {
+        padding-right: 1rem;
+      }
+      &.numeric {
+        text-align: right;
+      }
+      &.wide-col {
+        width: 20%;
+      }
+      &.prop-type {
+        width: 12rem;
+      }
     }
 
-    tr:nth-of-type(2n + 2) { background-color: $grey; }
+    tr:nth-of-type(2n + 2) {
+      background-color: $grey;
+    }
 
     .prop-address {
       font-size: 0.75em;
@@ -277,7 +250,10 @@ export default class BuildingsTable extends Vue {
         font-size: 0.825rem;
         padding: 0.5rem 0.25rem;
       }
-      td.property-name, td.property-address { width: 10rem; }
+      td.property-name,
+      td.property-address {
+        width: 10rem;
+      }
     }
   }
 }
diff --git a/src/components/DataDisclaimer.vue b/src/components/DataDisclaimer.vue
index c2a981eb..447dbde6 100644
--- a/src/components/DataDisclaimer.vue
+++ b/src/components/DataDisclaimer.vue
@@ -1,29 +1,27 @@
 <template>
   <details class="data-disclaimer">
-    <summary>
-      Note: Data From Large Buildings in {{ LatestDataYear }}
-    </summary>
+    <summary>Note: Data From Large Buildings in {{ LatestDataYear }}</summary>
 
     <div class="details-content">
       <p class="constrained">
-        <strong>Note:</strong> This data only includes buildings whose emissions are reported
-        under the
+        <strong>Note:</strong> This data only includes buildings whose emissions
+        are reported under the
         <a
           href="https://www.chicago.gov/city/en/progs/env/building-energy-benchmarking---transparency.html"
           target="_blank"
           rel="noopener"
         >
-          Chicago Energy Benchmarking Ordinance<NewTabIcon />
-        </a>. According to the City &ldquo;As of 2016,
-        this list includes all commercial, institutional, and residential buildings larger than
-        50,000 square feet.&rdquo; This dataset is also then filtered to only buildings with
-        reported emissions > 1,000 metric tons CO<sub>2</sub> equivalent.
+          Chicago Energy Benchmarking Ordinance<NewTabIcon /> </a
+        >. According to the City &ldquo;As of 2016, this list includes all
+        commercial, institutional, and residential buildings larger than 50,000
+        square feet.&rdquo; This dataset is also then filtered to only buildings
+        with reported emissions > 1,000 metric tons CO<sub>2</sub> equivalent.
       </p>
 
       <p class="constrained">
-        The latest year of data is from {{ LatestDataYear }}, but we update the site regularly when
-        new data is available, and some buildings may have failed to report that year, and only have
-        older data available.
+        The latest year of data is from {{ LatestDataYear }}, but we update the
+        site regularly when new data is available, and some buildings may have
+        failed to report that year, and only have older data available.
       </p>
 
       <p>
@@ -45,7 +43,7 @@ import { Component, Vue } from 'vue-property-decorator';
 
 @Component({
   name: 'DataDisclaimer',
-  components: {NewTabIcon},
+  components: { NewTabIcon },
 })
 export default class DataDisclaimer extends Vue {
   readonly LatestDataYear: number = LatestDataYear;
@@ -58,10 +56,17 @@ export default class DataDisclaimer extends Vue {
   margin-bottom: 1rem;
   font-size: 0.825rem;
 
-  summary, .details-content { padding: 0.5rem 1rem; }
+  summary,
+  .details-content {
+    padding: 0.5rem 1rem;
+  }
 
-  summary { font-weight: bold; }
+  summary {
+    font-weight: bold;
+  }
 
-  p { margin-top: 0.5em; }
+  p {
+    margin-top: 0.5em;
+  }
 }
 </style>
diff --git a/src/components/DataSourceFootnote.vue b/src/components/DataSourceFootnote.vue
index 9e42007e..c6393799 100644
--- a/src/components/DataSourceFootnote.vue
+++ b/src/components/DataSourceFootnote.vue
@@ -20,9 +20,8 @@ import NewTabIcon from './NewTabIcon.vue';
  */
 export default {
   name: 'DataSourceFootnote',
-  components: {NewTabIcon},
+  components: { NewTabIcon },
 };
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/components/EmailBuildingModal.vue b/src/components/EmailBuildingModal.vue
index d51eeb17..2d66117c 100644
--- a/src/components/EmailBuildingModal.vue
+++ b/src/components/EmailBuildingModal.vue
@@ -1,92 +1,55 @@
 <template>
-  <Popup
-    class="email-this-building"
-    @close="close()"
-  >
+  <Popup class="email-this-building" @close="close()">
     <div class="header">
-      <img
-        src="/email.svg"
-        alt=""
-      >
-      <h1 autofocus>
-        Email This Building
-      </h1>
+      <img src="/email.svg" alt="" />
+      <h1 autofocus>Email This Building</h1>
     </div>
 
     <div class="email-prompt-wrapper">
-      <h1 class="prompt">
-        Do you know this building's owner?
-      </h1>
+      <h1 class="prompt">Do you know this building's owner?</h1>
       <p class="description">
         Send them an email asking about their electrification plan!
       </p>
       <div class="email-this-building-subheader">
         <h2>Subject</h2>
 
-        <button
-          class="copy-btn"
-          @click="copySubject"
-        >
+        <button class="copy-btn" @click="copySubject">
           Copy Subject
-          <img
-            src="/copy.svg"
-            alt=""
-          >
+          <img src="/copy.svg" alt="" />
         </button>
 
         <!-- Will say 'Copied' after copying -->
-        <div
-          ref="subj-copied"
-          aria-live="polite"
-          class="copy-notice"
-        />
+        <div ref="subj-copied" aria-live="polite" class="copy-notice" />
       </div>
-      <p
-        ref="email-subj"
-        class="email-box"
-      >
+      <p ref="email-subj" class="email-box">
         What Is Our Building's Plan For Saving Energy & Reducing Emissions?
       </p>
       <div class="email-this-building-subheader">
         <h2>Body</h2>
 
-        <button
-          class="copy-btn"
-          @click="copyBody"
-        >
+        <button class="copy-btn" @click="copyBody">
           Copy Body
-          <img
-            src="/copy.svg"
-            alt=""
-          >
+          <img src="/copy.svg" alt="" />
         </button>
 
         <!-- Will say 'Copied' after copying -->
-        <div
-          ref="body-copied"
-          aria-live="polite"
-          class="copy-notice"
-        />
+        <div ref="body-copied" aria-live="polite" class="copy-notice" />
       </div>
-      <div
-        ref="email-body"
-        class="email-box -body"
-      >
-        <p>
-          Dear sir or madam,
-        </p>
+      <div ref="email-body" class="email-box -body">
+        <p>Dear sir or madam,</p>
         <p>
           My name is <span class="to-replace">_NAME_</span>, and I am an
           <span class="to-replace">_OWNER/OCCUPANT/OTHER_</span> of
           {{ building.PropertyName }}.
         </p>
         <p>
-          I've been reading about {{ building.PropertyName }}'s emissions and energy use,
-          and I wanted to learn more about your plans to improve our energy efficiency,
-          electrify the building, and reduce our emissions. Well insulated all-electric
-          buildings have lower energy bills, cleaner air, and are more comfortable for their
-          occupants, and I want to make sure there is a concrete plan to make
-          {{ building.PropertyName }} one of those buildings!
+          I've been reading about {{ building.PropertyName }}'s emissions and
+          energy use, and I wanted to learn more about your plans to improve our
+          energy efficiency, electrify the building, and reduce our emissions.
+          Well insulated all-electric buildings have lower energy bills, cleaner
+          air, and are more comfortable for their occupants, and I want to make
+          sure there is a concrete plan to make {{ building.PropertyName }} one
+          of those buildings!
         </p>
         <p>
           You can see more at
@@ -105,15 +68,15 @@ import Popup from '../components/layout/Popup.vue';
 /**
  * A modal to email a given building
  */
- @Component({
+@Component({
   components: {
     Popup,
   },
- })
+})
 export default class EmailBuildingModal extends Vue {
   readonly CopyNoticeDurMs: number = 1500;
 
-  @Prop({required: true}) building!: IBuilding;
+  @Prop({ required: true }) building!: IBuilding;
 
   /** Emit on modal close */
   @Emit()
@@ -121,13 +84,15 @@ export default class EmailBuildingModal extends Vue {
     return true;
   }
 
-  copyElementTextToClipboard(contentRef: HTMLElement, noticeRef: HTMLElement): void {
+  copyElementTextToClipboard(
+    contentRef: HTMLElement,
+    noticeRef: HTMLElement,
+  ): void {
     try {
       const content = contentRef.innerText;
       navigator.clipboard.writeText(content);
       this.showCopiedNotice(noticeRef);
-    }
-    catch (error) {
+    } catch (error) {
       console.error(error);
     }
   }
@@ -144,21 +109,21 @@ export default class EmailBuildingModal extends Vue {
       noticeElem.classList.remove('-visible');
 
       // Wait till after the animation to remove the text
-      setTimeout(() => noticeElem.innerText = '', 300);
+      setTimeout(() => (noticeElem.innerText = ''), 300);
     }, this.CopyNoticeDurMs);
   }
 
   copyBody(): void {
     this.copyElementTextToClipboard(
-        this.$refs['email-body'] as HTMLElement,
-        this.$refs['body-copied'] as HTMLElement,
+      this.$refs['email-body'] as HTMLElement,
+      this.$refs['body-copied'] as HTMLElement,
     );
   }
 
   copySubject(): void {
     this.copyElementTextToClipboard(
-        this.$refs['email-subj'] as HTMLElement,
-        this.$refs['subj-copied'] as HTMLElement,
+      this.$refs['email-subj'] as HTMLElement,
+      this.$refs['subj-copied'] as HTMLElement,
     );
   }
 }
@@ -185,10 +150,14 @@ dialog.email-this-building {
     color: $white;
     padding: 1.5rem;
 
-    img { height: 2rem; }
+    img {
+      height: 2rem;
+    }
   }
 
-  h2 { margin-top: 1rem; }
+  h2 {
+    margin-top: 1rem;
+  }
 
   .email-prompt-wrapper {
     padding: 2rem;
@@ -215,7 +184,10 @@ dialog.email-this-building {
       margin-left: 0.5rem;
       margin-bottom: 0.2rem;
 
-      &:hover, &:focus { background-color: $blue-very-dark; }
+      &:hover,
+      &:focus {
+        background-color: $blue-very-dark;
+      }
 
       img {
         height: 0.75rem;
@@ -230,7 +202,9 @@ dialog.email-this-building {
     opacity: 0;
     transition: opacity 0.3s; // fade in text
 
-    &.-visible { opacity: 1; }
+    &.-visible {
+      opacity: 1;
+    }
   }
 
   .email-box {
@@ -238,9 +212,13 @@ dialog.email-this-building {
     padding: 0.75rem;
     border-radius: $brd-rad-small;
 
-    &.-body { padding: 1rem 0.75rem}
+    &.-body {
+      padding: 1rem 0.75rem;
+    }
 
-    p + p { margin-top: 1em; }
+    p + p {
+      margin-top: 1em;
+    }
 
     .to-replace {
       font-weight: 700;
@@ -250,7 +228,9 @@ dialog.email-this-building {
 
   /** Mobile Styling */
   @media (max-width: $mobile-max-width) {
-    h1 { font-size: 1.5rem; }
+    h1 {
+      font-size: 1.5rem;
+    }
   }
 }
 </style>
diff --git a/src/components/EmissionsBreakdownGraph.vue b/src/components/EmissionsBreakdownGraph.vue
index 25c8d525..fb9d6a59 100644
--- a/src/components/EmissionsBreakdownGraph.vue
+++ b/src/components/EmissionsBreakdownGraph.vue
@@ -8,8 +8,7 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
     NewTabIcon,
   },
 })
-export default class EmissionsBreakdownGraph extends Vue {
-}
+export default class EmissionsBreakdownGraph extends Vue {}
 </script>
 
 <template>
@@ -24,7 +23,7 @@ export default class EmissionsBreakdownGraph extends Vue {
         69% buildings
         24% transportation
         7% waste"
-    >
+    />
 
     <p class="footnote">
       <a
@@ -38,5 +37,4 @@ export default class EmissionsBreakdownGraph extends Vue {
   </div>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/components/HistoricalBuildingDataTable.vue b/src/components/HistoricalBuildingDataTable.vue
index 8b211ccf..829795c5 100644
--- a/src/components/HistoricalBuildingDataTable.vue
+++ b/src/components/HistoricalBuildingDataTable.vue
@@ -3,26 +3,20 @@
     <table class="historical-data">
       <thead>
         <tr>
-          <th scope="col">
-            Year
-          </th>
-          <th
-            v-if="renderedColumns.includes('GrossFloorArea')"
-            scope="col"
-          >
+          <th scope="col">Year</th>
+          <th v-if="renderedColumns.includes('GrossFloorArea')" scope="col">
             Floor Area <span class="unit">sqft</span>
           </th>
           <th
             v-if="renderedColumns.includes('ChicagoEnergyRating')"
             scope="col"
           >
-            Chicago Energy<br> Rating
+            Chicago Energy<br />
+            Rating
           </th>
-          <th
-            v-if="renderedColumns.includes('ENERGYSTARScore')"
-            scope="col"
-          >
-            Energy Star<br> Score
+          <th v-if="renderedColumns.includes('ENERGYSTARScore')" scope="col">
+            Energy Star<br />
+            Score
           </th>
           <th scope="col">
             GHG Intensity <span class="unit">kg CO<sub>2</sub>e / sqft</span>
@@ -30,29 +24,17 @@
           <th scope="col">
             GHG Emissions <span class="unit">metric tons CO<sub>2</sub>e</span>
           </th>
-          <th scope="col">
-            Source EUI <span class="unit">kBTU / sqft</span>
-          </th>
+          <th scope="col">Source EUI <span class="unit">kBTU / sqft</span></th>
 
-          <th scope="col">
-            Electricity Use <span class="unit">kBTU</span>
-          </th>
-          <th scope="col">
-            Fossil Gas Use <span class="unit">kBTU</span>
-          </th>
-          <th
-            v-if="renderedColumns.includes('DistrictSteamUse')"
-            scope="col"
-          >
+          <th scope="col">Electricity Use <span class="unit">kBTU</span></th>
+          <th scope="col">Fossil Gas Use <span class="unit">kBTU</span></th>
+          <th v-if="renderedColumns.includes('DistrictSteamUse')" scope="col">
             District Steam Use <span class="unit">kBTU</span>
           </th>
         </tr>
       </thead>
       <tbody>
-        <tr
-          v-for="benchmark in historicBenchmarks"
-          :key="benchmark.DataYear"
-        >
+        <tr v-for="benchmark in historicBenchmarks" :key="benchmark.DataYear">
           <td>{{ benchmark.DataYear }}</td>
           <td v-if="renderedColumns.includes('GrossFloorArea')">
             {{ benchmark.GrossFloorArea | optionalInt }}
@@ -82,7 +64,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import {IHistoricData} from '../common-functions.vue';
+import { IHistoricData } from '../common-functions.vue';
 
 /**
  * A component that given an array of a building's benchmarking renders
@@ -96,7 +78,7 @@ import {IHistoricData} from '../common-functions.vue';
      *
      * Ex: null -> '-', '12345.67' -> '12,345'
      */
-     optionalInt(value: string) {
+    optionalInt(value: string) {
       if (!value) {
         return '-';
       }
@@ -114,7 +96,7 @@ import {IHistoricData} from '../common-functions.vue';
   },
 })
 export default class BuildingImage extends Vue {
-  @Prop({required: true}) historicBenchmarks!: Array<IHistoricData>;
+  @Prop({ required: true }) historicBenchmarks!: Array<IHistoricData>;
 
   renderedColumns: Array<string> = [];
 
@@ -128,7 +110,9 @@ export default class BuildingImage extends Vue {
       // A column is empty if it's all empty string or '0', so skip it if so. Some columns switch
       // between both, like Natural Gas Use on Merch Mart, which we also want to ignore
       return !this.historicBenchmarks.every((datum) => {
-        return (datum as any)[colKey] === '' || (datum as any)[colKey] === '0.0';
+        return (
+          (datum as any)[colKey] === '' || (datum as any)[colKey] === '0.0'
+        );
       });
     });
 
@@ -162,13 +146,16 @@ table.historical-data {
     font-weight: normal;
   }
 
-  th, td {
+  th,
+  td {
     padding: 0.5rem 0.75rem;
     text-align: left;
   }
 
   thead {
-    tr { background-color: $grey; }
+    tr {
+      background-color: $grey;
+    }
 
     th {
       line-height: 1.25;
@@ -176,6 +163,8 @@ table.historical-data {
     }
   }
 
-  tbody tr:nth-of-type(even) { background-color: $grey-light; }
+  tbody tr:nth-of-type(even) {
+    background-color: $grey-light;
+  }
 }
 </style>
diff --git a/src/components/NewTabIcon.vue b/src/components/NewTabIcon.vue
index 75cac95a..eb43e8fd 100644
--- a/src/components/NewTabIcon.vue
+++ b/src/components/NewTabIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <img
-    class="new-tab-icon"
-    src="/new-tab.svg"
-    alt="(opens in a new tab)"
-  >
+  <img class="new-tab-icon" src="/new-tab.svg" alt="(opens in a new tab)" />
 </template>
 
 <script lang="ts">
diff --git a/src/components/OverallRankEmoji.vue b/src/components/OverallRankEmoji.vue
index b6a6b151..ca465a16 100644
--- a/src/components/OverallRankEmoji.vue
+++ b/src/components/OverallRankEmoji.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="overall-rank-emoji-cont"
-    :class="{ '-large': largeView }"
-  >
+  <div class="overall-rank-emoji-cont" :class="{ '-large': largeView }">
     <span
       v-if="overallRank"
       class="emoji overall-rank-emoji"
@@ -33,7 +30,11 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import {getOverallRankEmoji, IBuilding, IBuildingBenchmarkStats} from '../common-functions.vue';
+import {
+  getOverallRankEmoji,
+  IBuilding,
+  IBuildingBenchmarkStats,
+} from '../common-functions.vue';
 import { getBuildingImage } from '../constants/building-images.constant.vue';
 import { LatestDataYear } from '../constants/globals.vue';
 
@@ -43,13 +44,13 @@ import { LatestDataYear } from '../constants/globals.vue';
  */
 @Component
 export default class OverallRankEmoji extends Vue {
-  @Prop({required: true}) building!: IBuilding;
-  @Prop({required: true}) stats!: IBuildingBenchmarkStats;
+  @Prop({ required: true }) building!: IBuilding;
+  @Prop({ required: true }) stats!: IBuildingBenchmarkStats;
 
   /** Whether this is a large view of the emoji (e.g. in the title of the details page) */
-  @Prop({default: false}) largeView!: boolean;
+  @Prop({ default: false }) largeView!: boolean;
 
-  get overallRank(): { msg: string, emoji: string } | null {
+  get overallRank(): { msg: string; emoji: string } | null {
     return getOverallRankEmoji(this.building, this.stats);
   }
 
@@ -74,10 +75,14 @@ export default class OverallRankEmoji extends Vue {
     cursor: help;
   }
 
-  .overall-rank-emoji { font-size: 0.925em; }
+  .overall-rank-emoji {
+    font-size: 0.925em;
+  }
 
   &.-large {
-    .overall-rank-emoji { font-size: 0.8em; }
+    .overall-rank-emoji {
+      font-size: 0.8em;
+    }
   }
 }
 </style>
diff --git a/src/components/OwnerLogo.vue b/src/components/OwnerLogo.vue
index 69a62488..442f7554 100644
--- a/src/components/OwnerLogo.vue
+++ b/src/components/OwnerLogo.vue
@@ -5,23 +5,13 @@
     class="owner-cont"
     :class="{
       '-small': isSmall,
-      '-unknown': !owner
+      '-unknown': !owner,
     }"
   >
     <div v-if="owner && !isSmall">
-      <g-link
-        v-if="owner"
-        :to="'/owner/' + owner.key"
-      >
-        <img
-          v-if="!isSmall"
-          :src="ownerLogoSrc"
-          :alt="owner.name"
-        >
-        <div
-          v-if="!isSmall"
-          class="owner-label"
-        />
+      <g-link v-if="owner" :to="'/owner/' + owner.key">
+        <img v-if="!isSmall" :src="ownerLogoSrc" :alt="owner.name" />
+        <div v-if="!isSmall" class="owner-label" />
 
         View All Tagged {{ owner.nameShort }} Buildings
       </g-link>
@@ -34,16 +24,14 @@
     <!-- If small view should short building name -->
     <span v-if="owner && isSmall">({{ owner.nameShort }})</span>
 
-    <div v-if="!owner && !isSmall">
-      Not Tagged
-    </div>
+    <div v-if="!owner && !isSmall">Not Tagged</div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import {IBuilding} from '../common-functions.vue';
+import { IBuilding } from '../common-functions.vue';
 import {
   IBuildingOwner,
   BuildingOwners,
@@ -56,7 +44,7 @@ import { getBuildingCustomInfo } from '../constants/buildings-custom-info.consta
  */
 @Component
 export default class OwnerLogo extends Vue {
-  @Prop({required: true}) building!: IBuilding;
+  @Prop({ required: true }) building!: IBuilding;
   @Prop({ default: false }) isSmall!: boolean;
 
   /**
@@ -89,7 +77,10 @@ export default class OwnerLogo extends Vue {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 
-  &.-small, &.-unknown { margin: 0; }
+  &.-small,
+  &.-unknown {
+    margin: 0;
+  }
 
   &.-small {
     display: inline-block;
@@ -103,6 +94,8 @@ export default class OwnerLogo extends Vue {
     font-size: 0.75rem;
   }
 
-  img { width: 20rem; }
+  img {
+    width: 20rem;
+  }
 }
 </style>
diff --git a/src/components/RankText.vue b/src/components/RankText.vue
index 40dc5a10..486f9132 100644
--- a/src/components/RankText.vue
+++ b/src/components/RankText.vue
@@ -1,13 +1,11 @@
 <template>
   <div class="rank-text">
     <div class="stat-value">
-      <span v-if="shouldRound">{{ Math.round(statValue).toLocaleString() }}</span>
+      <span v-if="shouldRound">{{
+        Math.round(statValue).toLocaleString()
+      }}</span>
       <span v-else>{{ statValue.toFixed(1) }}</span>
-      <span
-        v-if="unit"
-        class="unit"
-        v-html="' ' + unit"
-      />
+      <span v-if="unit" class="unit" v-html="' ' + unit" />
 
       <!-- Show icons for below or above average if we have an average for this stat -->
       <template v-if="stats[statKey]">
@@ -16,36 +14,34 @@
           :src="isSquareFootage ? '/arrow-up-neutral.svg' : '/arrow-up-bad.svg'"
           width="20"
           title="Above median building"
-        >
+        />
         <img
           v-else
-          :src="isSquareFootage ? '/arrow-down-neutral.svg' : '/arrow-down-good.svg'"
+          :src="
+            isSquareFootage ? '/arrow-down-neutral.svg' : '/arrow-down-good.svg'
+          "
           width="20"
           title="Below median building"
-        >
+        />
       </template>
     </div>
 
     <div class="rank-label">
       <!-- Only show the rank if in the top 50, #102th highest _ doesn't mean much -->
-      <div
-        v-if="statRank && statRank <= RankConfig.FlagRankMax"
-        class="rank"
-      >
+      <div v-if="statRank && statRank <= RankConfig.FlagRankMax" class="rank">
         <span class="rank-num">#{{ statRank }}</span> {{ rankLabel }}
       </div>
       <!-- Don't show percentile if the top 10, it'll just be 'Higher than 100%' -->
-      <div
-        v-else-if="typeof statRankPercent === 'number'"
-        class="percentile"
-      >
+      <div v-else-if="typeof statRankPercent === 'number'" class="percentile">
         <!-- If stat rank is < 50%, invert it.
           E.g higher than of other buildings becomes less than 99% of buildings-->
         <template v-if="statRankPercent > 50">
           Highest {{ 100 - statRankPercent }}%
         </template>
         <!-- Show lowest 30 instead of percentiles -->
-        <template v-else-if="statRankInverted <= RankConfig.TrophyRankInvertedMax">
+        <template
+          v-else-if="statRankInverted <= RankConfig.TrophyRankInvertedMax"
+        >
           #{{ statRankInverted }} Lowest in Chicago*
         </template>
         <template v-else>
@@ -60,7 +56,11 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-import { RankConfig, IBuilding, IBuildingBenchmarkStats } from '../common-functions';
+import {
+  RankConfig,
+  IBuilding,
+  IBuildingBenchmarkStats,
+} from '../common-functions';
 
 /**
  * A  tile that can show the stats for a building, including whether it's
@@ -68,13 +68,13 @@ import { RankConfig, IBuilding, IBuildingBenchmarkStats } from '../common-functi
  */
 @Component
 export default class RankText extends Vue {
-  @Prop({required: true}) building!: IBuilding;
+  @Prop({ required: true }) building!: IBuilding;
 
-  @Prop({required: true}) statKey!: string;
+  @Prop({ required: true }) statKey!: string;
 
-  @Prop({required: true}) stats!: IBuildingBenchmarkStats;
+  @Prop({ required: true }) stats!: IBuildingBenchmarkStats;
 
-  @Prop({default: false}) shouldRound!: boolean;
+  @Prop({ default: false }) shouldRound!: boolean;
 
   @Prop() unit?: string;
 
@@ -82,8 +82,10 @@ export default class RankText extends Vue {
   RankConfig = RankConfig;
 
   get isAboveMedian(): boolean {
-    return typeof this.building[this.statKey] &&
-      this.building[this.statKey] as number > this.stats[this.statKey].median;
+    return (
+      typeof this.building[this.statKey] &&
+      (this.building[this.statKey] as number) > this.stats[this.statKey].median
+    );
   }
 
   get isSquareFootage(): boolean {
@@ -123,7 +125,9 @@ export default class RankText extends Vue {
   }
 
   get statRankPercent(): number | null {
-    const statRankPercent = this.building[this.statKey + 'PercentileRank'] as number;
+    const statRankPercent = this.building[
+      this.statKey + 'PercentileRank'
+    ] as number;
 
     if (!statRankPercent) {
       return null;
@@ -139,7 +143,9 @@ export default class RankText extends Vue {
   .stat-value {
     white-space: nowrap;
 
-    .unit { font-size: smaller; }
+    .unit {
+      font-size: smaller;
+    }
 
     img {
       width: 1.25em;
@@ -148,8 +154,13 @@ export default class RankText extends Vue {
     }
   }
 
-  .rank, .percentile { font-size: x-small; }
+  .rank,
+  .percentile {
+    font-size: x-small;
+  }
 
-  .rank-label { margin-top: 0.25rem; }
+  .rank-label {
+    margin-top: 0.25rem;
+  }
 }
 </style>
diff --git a/src/components/ReportingTile.vue b/src/components/ReportingTile.vue
index b1150526..739f4fb0 100644
--- a/src/components/ReportingTile.vue
+++ b/src/components/ReportingTile.vue
@@ -2,11 +2,10 @@
   <div class="reporting-tile">
     <p class="headline">
       Years Reported
-      <span class="score">{{ reportedYearsCount }}/{{ reportingHistory.length }}</span>
-      <span
-        class="grade-letter"
-        :class="`-${grade}` | lowercase"
+      <span class="score"
+        >{{ reportedYearsCount }}/{{ reportingHistory.length }}</span
       >
+      <span class="grade-letter" :class="`-${grade}` | lowercase">
         {{ grade }}
       </span>
     </p>
@@ -17,39 +16,37 @@
         :key="item.year"
         class="reporting-tile-item"
       >
-        <div
-          class="marker"
-          :class="{ '-reported': item.isReported }"
-        >
+        <div class="marker" :class="{ '-reported': item.isReported }">
           <img
             v-if="item.isReported"
             src="/checkmark.svg"
             :alt="`${item.year} data reported`"
             class="reported"
-          >
+          />
           <img
             v-else
             src="/cross.svg"
             :alt="`${item.year} data not reported`"
-          >
+          />
         </div>
         <p>{{ item.year }}</p>
       </li>
     </ul>
 
     <p class="footnote">
-      <strong>Note:</strong> Buildings are marked as reporting when we have greenhouse gas intensity
-      values for them, but some buildings are missing GHG intensity values but have reported the
-      underlying energy use data, but we're unsure why this is the case.
+      <strong>Note:</strong> Buildings are marked as reporting when we have
+      greenhouse gas intensity values for them, but some buildings are missing
+      GHG intensity values but have reported the underlying energy use data, but
+      we're unsure why this is the case.
     </p>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { IHistoricData } from "../common-functions.vue";
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { IHistoricData } from '../common-functions.vue';
 
-import { LatestDataYear } from "../constants/globals.vue";
+import { LatestDataYear } from '../constants/globals.vue';
 
 /**
  * A tile that shows the reporting history of a building. For each year, it shows a
@@ -80,11 +77,11 @@ export default class ReportingTile extends Vue {
 
   get grade(): string {
     const gradeRanges = [
-      { min: 0.9, grade: "A" },
-      { min: 0.8, grade: "B" },
-      { min: 0.7, grade: "C" },
-      { min: 0.6, grade: "D" },
-      { min: 0, grade: "F" },
+      { min: 0.9, grade: 'A' },
+      { min: 0.8, grade: 'B' },
+      { min: 0.7, grade: 'C' },
+      { min: 0.6, grade: 'D' },
+      { min: 0, grade: 'F' },
     ];
 
     const score = this.reportedYearsCount / this.reportingHistory.length;
@@ -152,7 +149,7 @@ export default class ReportingTile extends Vue {
     margin-bottom: 0.25rem;
 
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       top: 50%;
       left: 50%;
diff --git a/src/components/StatTile.vue b/src/components/StatTile.vue
index 3a2d08b9..c3da29c1 100644
--- a/src/components/StatTile.vue
+++ b/src/components/StatTile.vue
@@ -20,18 +20,16 @@
 
       <!-- The actual stat value-->
       <div class="stat-value">
-        {{ statValue }} <span
-          class="unit"
-          v-html="unit"
-        />
+        {{ statValue }} <span class="unit" v-html="unit" />
       </div>
 
-      <div
-        v-if="costEstimate"
-        class="bill-estimate"
-      >
-        <strong>Est. {{ statKey === 'NaturalGasUse' ? 'Gas' : 'Electric' }} Bill:</strong>
-        ${{ Math.round(costEstimate).toLocaleString() }} for {{ building.DataYear }}**
+      <div v-if="costEstimate" class="bill-estimate">
+        <strong
+          >Est.
+          {{ statKey === 'NaturalGasUse' ? 'Gas' : 'Electric' }} Bill:</strong
+        >
+        ${{ Math.round(costEstimate).toLocaleString() }} for
+        {{ building.DataYear }}**
       </div>
 
       <!-- Only show the rank if in the top 50, #102th highest _ doesn't mean much -->
@@ -44,7 +42,11 @@
 
       <!-- Rank amongst property type -->
       <div
-        v-if="propertyStatRank && propertyStatRank <= RankConfig.FlagRankMax && propertyRankLabel"
+        v-if="
+          propertyStatRank &&
+          propertyStatRank <= RankConfig.FlagRankMax &&
+          propertyRankLabel
+        "
         class="property-rank"
       >
         #{{ propertyStatRank }} {{ propertyRankLabel }}
@@ -52,8 +54,11 @@
 
       <!-- If in the lowest 30, show that unless square footage (TODO: Move to GreatRankMax) -->
       <div
-        v-if="!isSquareFootage && statRankInverted
-          && statRankInverted <= RankConfig.TrophyRankInvertedMax"
+        v-if="
+          !isSquareFootage &&
+          statRankInverted &&
+          statRankInverted <= RankConfig.TrophyRankInvertedMax
+        "
         class="rank"
       >
         #{{ statRankInverted }} Lowest in Chicago* 🏆
@@ -64,12 +69,16 @@
         v-if="!isSquareFootage && propertyStatRankInverted"
         class="property-rank"
       >
-        #{{ propertyStatRankInverted }} Lowest of {{ pluralismForPropertyType }} 🏆
+        #{{ propertyStatRankInverted }} Lowest of
+        {{ pluralismForPropertyType }} 🏆
       </div>
 
       <!-- Only show percentile if we don't have a flag or alarm -->
       <div
-        v-if="typeof statRankPercent === 'number' && statRank > RankConfig.FlagRankMax"
+        v-if="
+          typeof statRankPercent === 'number' &&
+          statRank > RankConfig.FlagRankMax
+        "
         class="percentile"
       >
         <!-- If stat rank is < 50%, invert it.
@@ -78,30 +87,21 @@
           Higher than {{ statRankPercent }}% of all buildings
         </template>
         <!-- Only show lower than X% if not getting a trophy-->
-        <template v-else-if="statRankInverted > RankConfig.TrophyRankInvertedMax">
+        <template
+          v-else-if="statRankInverted > RankConfig.TrophyRankInvertedMax"
+        >
           <!-- Never show lower than 100%, top out at 100%-->
           Lower than {{ Math.min(99, 100 - statRankPercent) }}% of all buildings
         </template>
       </div>
 
-      <div
-        v-if="medianMultipleMsgCityWide"
-        class="median-comparison"
-      >
+      <div v-if="medianMultipleMsgCityWide" class="median-comparison">
         <div>
           <!-- Only show median multiple if the building stat is > 0, otherwise it's 1/infinity -->
-          <span
-            v-if="statValue !== '0'"
-            class="val"
-          >
+          <span v-if="statValue !== '0'" class="val">
             {{ medianMultipleMsgCityWide }} median
           </span>
-          <span
-            v-else
-            class="median-label"
-          >
-            Median Chicago Building
-          </span>
+          <span v-else class="median-label"> Median Chicago Building </span>
 
           <div class="median-val">
             {{ stats[statKey].median.toLocaleString() }}
@@ -111,34 +111,28 @@
 
         <div v-if="medianMultiplePropertyType">
           <!-- Only show median multiple if the building stat is > 0, otherwise it's 1/infinity -->
-          <span
-            v-if="statValue !== '0'"
-            class="val"
-          >
+          <span v-if="statValue !== '0'" class="val">
             {{ medianMultiplePropertyType }} median {{ propertyType }}
           </span>
-          <span
-            v-else
-            class="median-label"
-          >
-            Median {{ propertyType }}
-          </span>
+          <span v-else class="median-label"> Median {{ propertyType }} </span>
 
           <div class="median-val">
-            {{ BuildingStatsByPropertyType[propertyType][statKey].median.toLocaleString() }}
+            {{
+              BuildingStatsByPropertyType[propertyType][
+                statKey
+              ].median.toLocaleString()
+            }}
             <span v-html="unit" />
           </div>
         </div>
       </div>
-      <p
-        v-else
-        class="no-stat-msg"
-      >
+      <p v-else class="no-stat-msg">
         Most buildings don't use
         <span v-if="statKey === 'DistrictSteamUse'">district steam</span>
-        <span v-else-if="statKey === 'DistrictChilledWaterUse'">district chilling</span>
-        <span v-else>this</span>,
-        so we don't currently have comparison data.
+        <span v-else-if="statKey === 'DistrictChilledWaterUse'"
+          >district chilling</span
+        >
+        <span v-else>this</span>, so we don't currently have comparison data.
       </p>
 
       <!-- Fossil Gas specific message -->
@@ -147,27 +141,26 @@
         class="no-gas-msg"
       >
         <div v-if="fullyGasFree">
-          <div class="bold">
-            This Building Didn't Burn Any Fossil Gas! 🎉
-          </div>
+          <div class="bold">This Building Didn't Burn Any Fossil Gas! 🎉</div>
 
           <p class="smaller">
-            This building burned no fossil gas on-site and isn't connected to a district heating
-            system, meaning it's fully electric! View <g-link to="/biggest-gas-free-buildings">
-              Chicago's Biggest Gas Free Buildings
-            </g-link>.
+            This building burned no fossil gas on-site and isn't connected to a
+            district heating system, meaning it's fully electric! View
+            <g-link to="/biggest-gas-free-buildings">
+              Chicago's Biggest Gas Free Buildings </g-link
+            >.
           </p>
         </div>
         <div v-else>
-          <div class="bold">
-            This Building Uses District Heating ❗
-          </div>
+          <div class="bold">This Building Uses District Heating ❗</div>
 
           <p class="smaller">
-            Although this building didn't burn any fossil gas on site, it's connected to a district
-            heating system, a centralized system for heating multiple buildings. District heating
-            systems can be fully electric, but in Chicago most district heating systems are fossil
-            gas powered, meaning this building was most likely still heated with fossil gas.
+            Although this building didn't burn any fossil gas on site, it's
+            connected to a district heating system, a centralized system for
+            heating multiple buildings. District heating systems can be fully
+            electric, but in Chicago most district heating systems are fossil
+            gas powered, meaning this building was most likely still heated with
+            fossil gas.
           </p>
         </div>
       </div>
@@ -176,8 +169,8 @@
       Not Reported
 
       <p class="empty-notice">
-        This data was not reported for this building, which <em>likely</em> means a value of zero
-        for this field.
+        This data was not reported for this building, which
+        <em>likely</em> means a value of zero for this field.
       </p>
     </template>
   </div>
@@ -185,7 +178,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import buildingStatsByPropertyType from "../data/dist/building-statistics-by-property-type.json";
+import buildingStatsByPropertyType from '../data/dist/building-statistics-by-property-type.json';
 
 import {
   estimateUtilitySpend,
@@ -202,38 +195,41 @@ import SparkLine, { INumGraphPoint } from './graphs/SparkLine.vue';
 /**
  * A group of all the core stats by property type (e.g. GHG intensity median)
  */
-export interface IStatsByPropertyType
-{
+export interface IStatsByPropertyType {
   [propertyType: string]: IPropertyStats;
 }
 
 /**
-  * A  tile that can show the stats for a building, including whether it's
-  * doing better or worse than median, it's rank and percentile rank
-  */
+ * A  tile that can show the stats for a building, including whether it's
+ * doing better or worse than median, it's rank and percentile rank
+ */
 @Component({
   components: {
     SparkLine,
   },
 })
 export default class StatTile extends Vue {
-  @Prop({required: true}) building!: IBuilding;
-  @Prop({required: true}) statKey!: string;
-  @Prop({required: true}) stats!: IBuildingBenchmarkStats;
-  @Prop({required: true}) unit!: string;
+  @Prop({ required: true }) building!: IBuilding;
+  @Prop({ required: true }) statKey!: string;
+  @Prop({ required: true }) stats!: IBuildingBenchmarkStats;
+  @Prop({ required: true }) unit!: string;
   @Prop() historicData?: Array<IHistoricData>;
 
-  readonly BuildingStatsByPropertyType: IStatsByPropertyType = buildingStatsByPropertyType;
+  readonly BuildingStatsByPropertyType: IStatsByPropertyType =
+    buildingStatsByPropertyType;
   readonly RankConfig: typeof RankConfig = RankConfig;
 
-  readonly ColsToHideComparison = ['DistrictSteamUse', 'DistrictChilledWaterUse'];
+  readonly ColsToHideComparison = [
+    'DistrictSteamUse',
+    'DistrictChilledWaterUse',
+  ];
 
   /** The historical data for this stat, for passing to SparkLine */
   historicStatData: Array<INumGraphPoint> = [];
 
   /** The primary property type of the current building as it shows in the data */
   get propertyType(): string {
-    return this.building["PrimaryPropertyType"];
+    return this.building['PrimaryPropertyType'];
   }
 
   /**
@@ -241,17 +237,24 @@ export default class StatTile extends Vue {
    * through a district heating system.
    */
   get fullyGasFree(): boolean {
-    return parseFloat(this.building.NaturalGasUse) === 0
-      && parseFloat(this.building.DistrictSteamUse) === 0;
+    return (
+      parseFloat(this.building.NaturalGasUse) === 0 &&
+      parseFloat(this.building.DistrictSteamUse) === 0
+    );
   }
 
   /** The estimated cost for the given utility */
   get costEstimate(): number | null {
     if (this.statKey === 'ElectricityUse') {
-      return estimateUtilitySpend(parseFloat(this.building[this.statKey] as string), true);
-    }
-    else if (this.statKey === 'NaturalGasUse') {
-      return estimateUtilitySpend(parseFloat(this.building[this.statKey] as string), false);
+      return estimateUtilitySpend(
+        parseFloat(this.building[this.statKey] as string),
+        true,
+      );
+    } else if (this.statKey === 'NaturalGasUse') {
+      return estimateUtilitySpend(
+        parseFloat(this.building[this.statKey] as string),
+        false,
+      );
     }
 
     return null;
@@ -262,38 +265,54 @@ export default class StatTile extends Vue {
     let pluralismForProperty;
     let curPropertyType = this.propertyType;
 
-    if (["Adult Education", "Outpatient Rehabilitation/Physical Therapy", "Performing Arts",
-      "Multifamily Housing"].includes(curPropertyType))
-    {
-      pluralismForProperty = curPropertyType + " Buildings";
-    }
-    else if (["College/University", "Laboratory", "Mixed Use Property",
-      "Residence Hall/Dormitory", "Residential Care Facility", "Senior Care Community",
-      "Senior Living Community", "Worship Facility"].includes(curPropertyType))
-    {
-      pluralismForProperty = curPropertyType.slice(0, -1) + "ies";
-    }
-    else if (curPropertyType == "Hospital (General Medical & Surgical)")
-    {
-      pluralismForProperty = "Hospitals (General Medical & Surgical)";
-    }
-    else if (["Other", "Other - Education", "Other - Entertainment/Public Assembly",
-      "Other - Mall", "Other - Public Services", "Other - Recreation",
-      "Other - Specialty Hospital"].includes(curPropertyType))
-    {
+    if (
+      [
+        'Adult Education',
+        'Outpatient Rehabilitation/Physical Therapy',
+        'Performing Arts',
+        'Multifamily Housing',
+      ].includes(curPropertyType)
+    ) {
+      pluralismForProperty = curPropertyType + ' Buildings';
+    } else if (
+      [
+        'College/University',
+        'Laboratory',
+        'Mixed Use Property',
+        'Residence Hall/Dormitory',
+        'Residential Care Facility',
+        'Senior Care Community',
+        'Senior Living Community',
+        'Worship Facility',
+      ].includes(curPropertyType)
+    ) {
+      pluralismForProperty = curPropertyType.slice(0, -1) + 'ies';
+    } else if (curPropertyType == 'Hospital (General Medical & Surgical)') {
+      pluralismForProperty = 'Hospitals (General Medical & Surgical)';
+    } else if (
+      [
+        'Other',
+        'Other - Education',
+        'Other - Entertainment/Public Assembly',
+        'Other - Mall',
+        'Other - Public Services',
+        'Other - Recreation',
+        'Other - Specialty Hospital',
+      ].includes(curPropertyType)
+    ) {
       pluralismForProperty = curPropertyType;
-    }
-    else
-    {
-      pluralismForProperty = curPropertyType + "s";
+    } else {
+      pluralismForProperty = curPropertyType + 's';
     }
 
     return pluralismForProperty;
   }
 
   get isAboveMedian(): boolean {
-    return this.building[this.statKey] !== null &&
-      this.building[this.statKey] as number > this.stats[this.statKey].median;
+    return (
+      this.building[this.statKey] !== null &&
+      (this.building[this.statKey] as number) > this.stats[this.statKey].median
+    );
   }
 
   /**
@@ -308,7 +327,9 @@ export default class StatTile extends Vue {
       return false;
     }
 
-    return this.building[this.statKey] as number > statMean + statStdDeviation;
+    return (
+      (this.building[this.statKey] as number) > statMean + statStdDeviation
+    );
   }
 
   // Square footage isn't directly climate related, so we show stats but treat it as
@@ -323,7 +344,7 @@ export default class StatTile extends Vue {
    *
    * TODO: Move into a generic math helper
    */
-  medianMultipleMsg(median:number, statValueNum:number): string | null {
+  medianMultipleMsg(median: number, statValueNum: number): string | null {
     if (median) {
       const medianMult = statValueNum / median;
 
@@ -334,7 +355,7 @@ export default class StatTile extends Vue {
         return medianMult.toFixed(1) + 'x';
       } else if (medianMult < 0.5) {
         // If the multiple is < 1, make a fraction (e.g. 1/5 the median)
-        return `1/${Math.round(1 / medianMult )}`;
+        return `1/${Math.round(1 / medianMult)}`;
       } else {
         return medianMult.toFixed(1) + 'x';
       }
@@ -355,7 +376,8 @@ export default class StatTile extends Vue {
     if (!this.BuildingStatsByPropertyType[this.propertyType]) {
       return null;
     }
-    const median = this.BuildingStatsByPropertyType[this.propertyType][this.statKey]?.median;
+    const median =
+      this.BuildingStatsByPropertyType[this.propertyType][this.statKey]?.median;
     const statValueNum = parseFloat(this.building[this.statKey] as string);
 
     return this.medianMultipleMsg(median, statValueNum);
@@ -416,11 +438,13 @@ export default class StatTile extends Vue {
 
     let amountToRank = 0;
 
-    Object.entries(PropertiesToAwardByMinTypeSize).forEach(([min, propToRank]) => {
-      if (numBuildingsOfType >= parseInt(min)) {
-        amountToRank = propToRank;
-      }
-    });
+    Object.entries(PropertiesToAwardByMinTypeSize).forEach(
+      ([min, propToRank]) => {
+        if (numBuildingsOfType >= parseInt(min)) {
+          amountToRank = propToRank;
+        }
+      },
+    );
 
     return amountToRank;
   }
@@ -429,7 +453,9 @@ export default class StatTile extends Vue {
    * Return the rank of a building in its property, IF it should be rendered
    */
   get propertyStatRank(): number | null {
-    const statRank = this.building[this.statKey + 'RankByPropertyType'] as string;
+    const statRank = this.building[
+      this.statKey + 'RankByPropertyType'
+    ] as string;
 
     if (statRank && parseFloat(statRank) <= this.propertiesToAwardThisType) {
       return Math.round(parseFloat(statRank));
@@ -450,15 +476,19 @@ export default class StatTile extends Vue {
     }
 
     const numBuildingsOfType: number = propertyStats[this.statKey]?.count;
-    const statRank = this.building[this.statKey + 'RankByPropertyType'] as string;
+    const statRank = this.building[
+      this.statKey + 'RankByPropertyType'
+    ] as string;
 
     if (statRank) {
       const statRankNum = Math.round(parseFloat(statRank));
       // Rank 100/100 should invert to #1 lowest, not #0
-      const rankInverted =  numBuildingsOfType - statRankNum + 1;
+      const rankInverted = numBuildingsOfType - statRankNum + 1;
 
       // Only return the inverted rank if it's bad enough for this category
-      return rankInverted <= this.propertiesToAwardThisType ? rankInverted : null;
+      return rankInverted <= this.propertiesToAwardThisType
+        ? rankInverted
+        : null;
     }
 
     return null;
@@ -477,8 +507,11 @@ export default class StatTile extends Vue {
       return null;
     }
 
-    return getRankLabelByProperty(this.propertyStatRank, this.isSquareFootage,
-      this.pluralismForPropertyType);
+    return getRankLabelByProperty(
+      this.propertyStatRank,
+      this.isSquareFootage,
+      this.pluralismForPropertyType,
+    );
   }
 
   // Returns a number 1 - 4 for how concerned we should be about this stat
@@ -501,7 +534,7 @@ export default class StatTile extends Vue {
     // Very high concern if top 10
     if (statRank <= 10) {
       return 4;
-    // High concern if top 30 or well above mean
+      // High concern if top 30 or well above mean
     } else if (statRank <= 30 || this.isOneStdDeviationAboveMean) {
       return 3;
     } else if (this.isAboveMedian) {
@@ -516,7 +549,9 @@ export default class StatTile extends Vue {
   }
 
   get statRankPercent(): number | null {
-    const statRankPercent = this.building[this.statKey + 'PercentileRank'] as number;
+    const statRankPercent = this.building[
+      this.statKey + 'PercentileRank'
+    ] as number;
 
     if (!statRankPercent) {
       return null;
@@ -533,7 +568,9 @@ export default class StatTile extends Vue {
         y: this.parseStatValueForGraph(datum),
       }));
 
-      const zeroOrNanOnly = this.historicStatData.every((datum) => datum.y === 0 || isNaN(datum.y));
+      const zeroOrNanOnly = this.historicStatData.every(
+        (datum) => datum.y === 0 || isNaN(datum.y),
+      );
 
       if (zeroOrNanOnly) {
         this.historicStatData = [];
@@ -547,12 +584,13 @@ export default class StatTile extends Vue {
    * GHG intensity)
    */
   parseStatValueForGraph(datum: IHistoricData): number {
-    const statValFloat = parseFloat((datum)[this.statKey as keyof IHistoricData] as string);
+    const statValFloat = parseFloat(
+      datum[this.statKey as keyof IHistoricData] as string,
+    );
 
     if (statValFloat > 1_000) {
       return Math.round(statValFloat);
-    }
-    else {
+    } else {
       return statValFloat;
     }
   }
@@ -576,9 +614,13 @@ export default class StatTile extends Vue {
     border-color: red;
   }
   // Also be pretty subtle for indicating medium attributes
-  &.-medium { border-color: #935700; }
+  &.-medium {
+    border-color: #935700;
+  }
   // Very subtly highlight good attributes
-  &.-good { border-color: green; }
+  &.-good {
+    border-color: green;
+  }
   // Highlight best in class buildings
   &.-great {
     border-color: green;
@@ -607,13 +649,19 @@ export default class StatTile extends Vue {
       font-weight: normal;
       font-size: 1.125rem;
     }
-    img { vertical-align: -0.25rem; }
+    img {
+      vertical-align: -0.25rem;
+    }
   }
 
   // Apply a semi-bold to rank
-  .rank { font-weight: 500; }
+  .rank {
+    font-weight: 500;
+  }
 
-  .property-rank { font-size: small; }
+  .property-rank {
+    font-size: small;
+  }
 
   .bill-estimate {
     margin-bottom: 0.25rem;
@@ -631,14 +679,19 @@ export default class StatTile extends Vue {
       font-weight: 500;
     }
 
-    .median-val  { font-size: small; }
+    .median-val {
+      font-size: small;
+    }
     .median-label {
       font-size: 0.825rem;
       font-weight: 600;
     }
   }
 
-  .median, .percentile { font-size: 0.75rem; }
+  .median,
+  .percentile {
+    font-size: 0.75rem;
+  }
 
   .percentile {
     font-weight: normal;
@@ -652,7 +705,9 @@ export default class StatTile extends Vue {
   .no-gas-msg {
     margin-top: 0.75rem;
 
-    p { margin: 0.25rem 0 0; }
+    p {
+      margin: 0.25rem 0 0;
+    }
   }
 
   .no-stat-msg {
diff --git a/src/components/graphs/BarGraph.vue b/src/components/graphs/BarGraph.vue
index 738c068b..68aeb2f5 100644
--- a/src/components/graphs/BarGraph.vue
+++ b/src/components/graphs/BarGraph.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="bar-graph-cont">
-    <div
-      class="label"
-      v-html="graphTitle"
-    />
+    <div class="label" v-html="graphTitle" />
 
     <svg id="bar-graph"><!-- D3 inserts here --></svg>
   </div>
@@ -23,9 +20,9 @@ export interface IGraphPoint {
  */
 @Component({})
 export default class BarGraph extends Vue {
-  @Prop({required: true}) graphTitle!: string;
+  @Prop({ required: true }) graphTitle!: string;
 
-  @Prop({required: true}) graphData!: Array<IGraphPoint>;
+  @Prop({ required: true }) graphData!: Array<IGraphPoint>;
 
   @Watch('graphData')
   onDataChanged(): void {
@@ -41,17 +38,22 @@ export default class BarGraph extends Vue {
   svg!: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
 
   mounted(): void {
-    const outerWidth = this.width + this.graphMargins.left + this.graphMargins.right;
-    const outerHeight = this.height + this.graphMargins.top + this.graphMargins.bottom;
+    const outerWidth =
+      this.width + this.graphMargins.left + this.graphMargins.right;
+    const outerHeight =
+      this.height + this.graphMargins.top + this.graphMargins.bottom;
 
     this.svg = d3
-      .select("svg#bar-graph")
-      .attr("width", outerWidth)
-      .attr("height", outerHeight)
-      .attr("viewBox", `0 0 ${outerWidth} ${outerHeight}`)
-      .attr("preserveAspectRatio", "xMidYMid meet")
-      .append("g")
-        .attr("transform", `translate(${this.graphMargins.left},${this.graphMargins.top})`);
+      .select('svg#bar-graph')
+      .attr('width', outerWidth)
+      .attr('height', outerHeight)
+      .attr('viewBox', `0 0 ${outerWidth} ${outerHeight}`)
+      .attr('preserveAspectRatio', 'xMidYMid meet')
+      .append('g')
+      .attr(
+        'transform',
+        `translate(${this.graphMargins.left},${this.graphMargins.top})`,
+      );
 
     this.renderGraph();
   }
@@ -71,32 +73,33 @@ export default class BarGraph extends Vue {
 
     const y = d3
       .scaleLinear()
-      .domain([ 0, d3.max(yVals) as number])
+      .domain([0, d3.max(yVals) as number])
       .rangeRound([this.height, 0]);
 
     // Render X axis
-    this.svg.append("g")
-      .attr("transform", `translate(0, ${this.height})`)
+    this.svg
+      .append('g')
+      .attr('transform', `translate(0, ${this.height})`)
       .call(d3.axisBottom(x))
-      .selectAll("text")
-        .attr("transform", "translate(-10,0)rotate(-45)")
-        .style("text-anchor", "end");
+      .selectAll('text')
+      .attr('transform', 'translate(-10,0)rotate(-45)')
+      .style('text-anchor', 'end');
 
     // Render Y axis
-    this.svg.append("g")
-      .call(d3.axisLeft(y));
+    this.svg.append('g').call(d3.axisLeft(y));
 
-    this.svg.selectAll("mybar")
+    this.svg
+      .selectAll('mybar')
       .data(this.graphData)
       .enter()
-      .append("rect")
-        .attr("x", (d) => {
-          return x(d.x.toString() as string) as number;
-        })
-        .attr("y", (d) => y(d.y))
-        .attr("width", x.bandwidth())
-        .attr("height", (d) => this.height - y(d.y))
-        .attr("fill", "#69b3a2");
+      .append('rect')
+      .attr('x', (d) => {
+        return x(d.x.toString() as string) as number;
+      })
+      .attr('y', (d) => y(d.y))
+      .attr('width', x.bandwidth())
+      .attr('height', (d) => this.height - y(d.y))
+      .attr('fill', '#69b3a2');
   }
 }
 </script>
diff --git a/src/components/graphs/PieChart.vue b/src/components/graphs/PieChart.vue
index 631dca79..8ef63d42 100644
--- a/src/components/graphs/PieChart.vue
+++ b/src/components/graphs/PieChart.vue
@@ -22,7 +22,7 @@ export interface IPieSlice {
  */
 @Component({})
 export default class PieChart extends Vue {
-  @Prop({required: true}) graphData!: Array<IPieSlice>;
+  @Prop({ required: true }) graphData!: Array<IPieSlice>;
 
   @Watch('graphData')
   onDataChanged(): void {
@@ -37,17 +37,19 @@ export default class PieChart extends Vue {
   svg!: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
 
   mounted(): void {
-    const outerWidth = this.width + this.graphMargins.left + this.graphMargins.right;
-    const outerHeight = this.height + this.graphMargins.top + this.graphMargins.bottom;
+    const outerWidth =
+      this.width + this.graphMargins.left + this.graphMargins.right;
+    const outerHeight =
+      this.height + this.graphMargins.top + this.graphMargins.bottom;
 
     this.svg = d3
-      .select("svg#pie-chart")
-      .attr("width", outerWidth)
-      .attr("height", outerHeight)
-      .attr("viewBox", `0 0 ${outerWidth} ${outerHeight}`)
-      .attr("preserveAspectRatio", "xMidYMid meet")
-      .append("g")
-        .attr("transform", `translate(${this.width / 2},${this.height / 2})`);
+      .select('svg#pie-chart')
+      .attr('width', outerWidth)
+      .attr('height', outerHeight)
+      .attr('viewBox', `0 0 ${outerWidth} ${outerHeight}`)
+      .attr('preserveAspectRatio', 'xMidYMid meet')
+      .append('g')
+      .attr('transform', `translate(${this.width / 2},${this.height / 2})`);
 
     this.renderGraph();
   }
@@ -60,45 +62,46 @@ export default class PieChart extends Vue {
     const labelRadius = 150;
 
     // Compute the position of each group on the pie:
-    var pie = d3.pie()
-      .value((d: any) => d.value);
+    var pie = d3.pie().value((d: any) => d.value);
     var dataReady = pie(this.graphData as any);
 
     // shape helper to build arcs:
-    var arcGenerator = d3.arc()
-      .innerRadius(0)
-      .outerRadius(radius);
+    var arcGenerator = d3.arc().innerRadius(0).outerRadius(radius);
 
-    var labelArcGenerator = d3.arc()
+    var labelArcGenerator = d3
+      .arc()
       .innerRadius(radius)
       .outerRadius(labelRadius);
 
     // Build the pie chart: Basically, each part of the pie is a path that we build using the
     // arc function.
-    this.svg.selectAll('mySlices')
+    this.svg
+      .selectAll('mySlices')
       .data(dataReady)
       .enter()
       .append('path')
-          .attr('d', arcGenerator as any)
-          .attr('fill', (d) => (d.data as unknown as IPieSlice).color);
-
+      .attr('d', arcGenerator as any)
+      .attr('fill', (d) => (d.data as unknown as IPieSlice).color);
 
     // Calculate total value for % calculation
     let totalValue = 0;
-    this.graphData.forEach((d) => totalValue += d.value);
+    this.graphData.forEach((d) => (totalValue += d.value));
 
     /** Add pie chart labels */
-    this.svg.selectAll('mySlices')
+    this.svg
+      .selectAll('mySlices')
       .data(dataReady)
       .enter()
       .append('text')
       .html((d) => {
         // Convert degrees to rads
-        const thresholdRadians = 5 / 360 * 2 * Math.PI;
+        const thresholdRadians = (5 / 360) * 2 * Math.PI;
 
         // If we have a lot of small slices, we skip those labels so they don't collide
-        if (this.graphData.length > 2
-          && (d.endAngle - d.startAngle) <  thresholdRadians) {
+        if (
+          this.graphData.length > 2 &&
+          d.endAngle - d.startAngle < thresholdRadians
+        ) {
           return '';
         }
 
@@ -110,8 +113,8 @@ export default class PieChart extends Vue {
 
         return label;
       })
-      .attr('class', () => this.graphData.length === 1 ? '-only-slice' : '')
-      .attr("transform", (d) => {
+      .attr('class', () => (this.graphData.length === 1 ? '-only-slice' : ''))
+      .attr('transform', (d) => {
         // If we have only 1 slice (e.g. 100% electric, like Marina Towers), place dead center,
         // otherwise use secondary arc centroid
         if (this.graphData.length === 1) {
@@ -120,18 +123,19 @@ export default class PieChart extends Vue {
 
         return `translate(${labelArcGenerator.centroid(d as unknown as d3.DefaultArcObject)})`;
       })
-      .style("text-anchor", (d) => {
+      .style('text-anchor', (d) => {
         // Center single slice label
-        if (this.graphData.length === 1) { return 'middle'; }
+        if (this.graphData.length === 1) {
+          return 'middle';
+        }
 
         // are we past the center?
-        return (d.endAngle + d.startAngle) / 2 > Math.PI ?
-            "end" : "start";
+        return (d.endAngle + d.startAngle) / 2 > Math.PI ? 'end' : 'start';
       });
   }
 
   calculatePercentage(value: number, total: number): string {
-    const percentage = value / total * 100;
+    const percentage = (value / total) * 100;
 
     if (percentage < 1) {
       return '< 1';
@@ -139,8 +143,7 @@ export default class PieChart extends Vue {
     // If > 99%, we don't want to round to 100% so we can show there's other slices
     else if (percentage > 99 && percentage < 100) {
       return Math.floor(percentage).toString();
-    }
-    else {
+    } else {
       return Math.round(percentage).toString();
     }
   }
@@ -159,13 +162,17 @@ export default class PieChart extends Vue {
       stroke-width: 0.25rem;
     }
 
-    text.-only-slice { font-size: 1.5rem; }
+    text.-only-slice {
+      font-size: 1.5rem;
+    }
   }
 
   tspan.percent {
     font-weight: bold;
     font-size: 1.3em;
   }
-  tspan.label { font-size: 0.65em; }
+  tspan.label {
+    font-size: 0.65em;
+  }
 }
 </style>
diff --git a/src/components/graphs/SparkLine.vue b/src/components/graphs/SparkLine.vue
index 3ef8a5e2..a895319e 100644
--- a/src/components/graphs/SparkLine.vue
+++ b/src/components/graphs/SparkLine.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    :id="svgContPrefix + randomId"
-    class="spark-graph-cont"
-  >
+  <div :id="svgContPrefix + randomId" class="spark-graph-cont">
     <svg :id="svgIdPrefix + randomId"><!-- D3 inserts here --></svg>
   </div>
 </template>
@@ -22,19 +19,21 @@ export interface INumGraphPoint {
  */
 @Component({})
 export default class BarGraph extends Vue {
-  @Prop({required: true}) graphTitle!: string;
+  @Prop({ required: true }) graphTitle!: string;
 
-  @Prop({required: true}) graphData!: Array<INumGraphPoint>;
+  @Prop({ required: true }) graphData!: Array<INumGraphPoint>;
 
   /** A unit to append to the min and max values (e.g. "tons") */
-  @Prop({required: true}) unit?: string;
+  @Prop({ required: true }) unit?: string;
 
   readonly svgIdPrefix = 'spark-svg-';
   readonly svgContPrefix = 'spark-cont-';
 
   /* Strip HTML from the unit (just <sub> for CO2) and simplify by dropping 'metric' */
   get unitCleaned(): string {
-    if (!this.unit) { return ''; }
+    if (!this.unit) {
+      return '';
+    }
 
     return this.unit
       .replace('<sub>', '<tspan class="sub" dy="0.5em">')
@@ -72,17 +71,22 @@ export default class BarGraph extends Vue {
   svg!: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
 
   mounted(): void {
-    const outerWidth = this.width + this.graphMargins.left + this.graphMargins.right;
-    const outerHeight = this.height + this.graphMargins.top + this.graphMargins.bottom;
+    const outerWidth =
+      this.width + this.graphMargins.left + this.graphMargins.right;
+    const outerHeight =
+      this.height + this.graphMargins.top + this.graphMargins.bottom;
 
     this.svg = d3
       .select(`svg#${this.svgIdPrefix}${this.randomId}`)
-      .attr("width", outerWidth)
-      .attr("height", outerHeight)
-      .attr("viewBox", `0 0 ${outerWidth} ${outerHeight}`)
-      .attr("preserveAspectRatio", "xMidYMid meet")
-      .append("g")
-        .attr("transform", `translate(${this.graphMargins.left},${this.graphMargins.top})`);
+      .attr('width', outerWidth)
+      .attr('height', outerHeight)
+      .attr('viewBox', `0 0 ${outerWidth} ${outerHeight}`)
+      .attr('preserveAspectRatio', 'xMidYMid meet')
+      .append('g')
+      .attr(
+        'transform',
+        `translate(${this.graphMargins.left},${this.graphMargins.top})`,
+      );
 
     this.calculateMinAndMaxPoints();
     this.setupTooltip();
@@ -93,7 +97,7 @@ export default class BarGraph extends Vue {
    * Get the global min and max points, which we show on the graph with their values to act as a
    * replacement for the y-axis
    */
-   calculateMinAndMaxPoints(): void {
+  calculateMinAndMaxPoints(): void {
     const yVals: Array<number> = this.graphData.map((d) => d.y);
     const minAndMaxPoints: Array<INumGraphPoint> = [];
 
@@ -119,7 +123,9 @@ export default class BarGraph extends Vue {
     const cleanedData = this.graphData.filter((d) => !isNaN(d.y));
 
     // TODO: Fix passed years being strings and remove this conversion
-    cleanedData.forEach((point: INumGraphPoint) => point.x = parseInt(point.x.toString()));
+    cleanedData.forEach(
+      (point: INumGraphPoint) => (point.x = parseInt(point.x.toString())),
+    );
 
     const xVals: Array<number> = cleanedData.map((d) => d.x);
     const yVals: Array<number> = cleanedData.map((d) => d.y);
@@ -134,130 +140,136 @@ export default class BarGraph extends Vue {
 
     const y = d3
       .scaleLinear()
-      .domain([ d3.min(yVals) as number, d3.max(yVals) as number])
+      .domain([d3.min(yVals) as number, d3.max(yVals) as number])
       .rangeRound([this.height, 0]);
 
     // Render X axis
-    this.svg.append("g")
+    this.svg
+      .append('g')
       .attr('class', 'x-axis')
-      .attr("transform", `translate(0, ${this.height + this.xAxisOffset})`)
+      .attr('transform', `translate(0, ${this.height + this.xAxisOffset})`)
       .call(
-        d3.axisBottom(x)
+        d3
+          .axisBottom(x)
           .tickFormat(d3.format('d'))
           // For spark line, only show first and last year (e.g. 2018 and 2022)
           .tickValues(d3.extent(xVals) as [number, number])
           .tickSizeOuter(0), // make the x-axis a flat line, with no tick marks at the ends
       )
-      .selectAll("text")
-        .attr("text-anchor", (d) =>  d === maxYear ? 'end' : 'start')
-        // shift label a bit further from the axis line
-        .attr("dy", "0.85em");
+      .selectAll('text')
+      .attr('text-anchor', (d) => (d === maxYear ? 'end' : 'start'))
+      // shift label a bit further from the axis line
+      .attr('dy', '0.85em');
 
     // Render Y axis
-    this.svg.append("g")
+    this.svg
+      .append('g')
       .attr('class', 'y-axis')
-      .call(
-        d3.axisLeft(y)
-          .tickValues(d3.extent(yVals) as [number, number]),
-    );
+      .call(d3.axisLeft(y).tickValues(d3.extent(yVals) as [number, number]));
 
     // Add the line
-    this.svg.append("path")
+    this.svg
+      .append('path')
       .datum(cleanedData)
-      .attr("fill", "none")
-      .attr("stroke", "black")
-      .attr("stroke-width", 8)
-      .attr("d", (d3.line() as any)
-        .x((d: INumGraphPoint) => x(d.x))
-        .y((d: INumGraphPoint) => y(d.y)),
-        );
+      .attr('fill', 'none')
+      .attr('stroke', 'black')
+      .attr('stroke-width', 8)
+      .attr(
+        'd',
+        (d3.line() as any)
+          .x((d: INumGraphPoint) => x(d.x))
+          .y((d: INumGraphPoint) => y(d.y)),
+      );
 
     if (this.minAndMaxPoints) {
       // Add all valid points, we'll then use CSS to hide all but the min and max unless hovered
       this.svg
-        .append("g")
-        .selectAll("dot")
+        .append('g')
+        .selectAll('dot')
         .data(cleanedData.filter((d) => !isNaN(d.y)))
         .enter()
-        .append("circle")
-          .attr('class', (d) => {
-            const isMinMax = d.x === this.minAndMaxPoints![0].x
-              || d.x === this.minAndMaxPoints![1].x;
-
-            return isMinMax ? 'dot -min-max' : 'dot';
-          })
-          .attr("cx", (d) => x(d.x))
-          .attr("cy", (d) => y(d.y))
-          .attr("r", this.DotRadius)
-          .attr("fill", "black")
-          .attr('tabindex', '0')
-          .on("mouseover", this.mouseover.bind(this))
-          .on("focusin", (event: Event, d) => this.focus(event, d))
-          .on("blur", this.mouseleave.bind(this))
-          .on("mousemove", (event: MouseEvent, d) => this.mousemove(event, d))
-          .on("mouseleave", this.mouseleave.bind(this));
+        .append('circle')
+        .attr('class', (d) => {
+          const isMinMax =
+            d.x === this.minAndMaxPoints![0].x ||
+            d.x === this.minAndMaxPoints![1].x;
+
+          return isMinMax ? 'dot -min-max' : 'dot';
+        })
+        .attr('cx', (d) => x(d.x))
+        .attr('cy', (d) => y(d.y))
+        .attr('r', this.DotRadius)
+        .attr('fill', 'black')
+        .attr('tabindex', '0')
+        .on('mouseover', this.mouseover.bind(this))
+        .on('focusin', (event: Event, d) => this.focus(event, d))
+        .on('blur', this.mouseleave.bind(this))
+        .on('mousemove', (event: MouseEvent, d) => this.mousemove(event, d))
+        .on('mouseleave', this.mouseleave.bind(this));
 
       // Add the value labels for the min and max points
       this.svg
-        .append("g")
-        .selectAll("pointLabels")
+        .append('g')
+        .selectAll('pointLabels')
         .data(this.minAndMaxPoints)
         .enter()
-        .append("text")
-          .attr("cx", (d) => x(d.x))
-          .attr("cy", (d) => y(d.y))
-          // Put the text at the position of the last point
-          .attr("transform", (d) => {
-            let xPos = x(d.x);
-            let yPos = y(d.y);
-
-            // The min point should have its label below
-            if (d.x === this.minAndMaxPoints![0].x) {
-              yPos += this.LabelFontSize * 1.5;
-
-              return `translate(${xPos},${yPos})`;
-            }
-            // The max point has its label above
-            else {
-              yPos -= this.LabelFontSize * 0.5;
-
-              return `translate(${xPos},${yPos})`;
-            }
-          })
-          .attr("text-anchor", (d) => {
-            // Points near the right edge of the graph should have text going left from the point,
-            // otherwise go right (e.g. first year)
-            // e.g. we have data from 2020 to 2024, the 3/4 year is 2023
-            // (2020 + (0.75 * (2024 - 2020))
-            const threeQuartersYear = Math.ceil(minYear + (0.75 * (maxYear - minYear)));
-            const halfwayYear = Math.ceil(minYear + (0.5 * (maxYear - minYear)));
-
-            // If the min point is more than 3/4 along in the graph, it's near enough to the end
-            // that we align text to the left of the dot, otherwise to the start
-            if (d.x >= threeQuartersYear) {
-              return 'end';
-            }
-            // If it's say 2/3 along the graph, it may still hit the right edge, so center
-            else if (d.x > halfwayYear) {
-              return 'middle';
-            }
-            else {
-              return 'start';
-            }
-          })
-          .html((d) => `<tspan class="bold">${d.y.toLocaleString()}</tspan>`)
-          .style("fill", "black")
-          .style("font-size", this.LabelFontSize);
+        .append('text')
+        .attr('cx', (d) => x(d.x))
+        .attr('cy', (d) => y(d.y))
+        // Put the text at the position of the last point
+        .attr('transform', (d) => {
+          let xPos = x(d.x);
+          let yPos = y(d.y);
+
+          // The min point should have its label below
+          if (d.x === this.minAndMaxPoints![0].x) {
+            yPos += this.LabelFontSize * 1.5;
+
+            return `translate(${xPos},${yPos})`;
+          }
+          // The max point has its label above
+          else {
+            yPos -= this.LabelFontSize * 0.5;
+
+            return `translate(${xPos},${yPos})`;
+          }
+        })
+        .attr('text-anchor', (d) => {
+          // Points near the right edge of the graph should have text going left from the point,
+          // otherwise go right (e.g. first year)
+          // e.g. we have data from 2020 to 2024, the 3/4 year is 2023
+          // (2020 + (0.75 * (2024 - 2020))
+          const threeQuartersYear = Math.ceil(
+            minYear + 0.75 * (maxYear - minYear),
+          );
+          const halfwayYear = Math.ceil(minYear + 0.5 * (maxYear - minYear));
+
+          // If the min point is more than 3/4 along in the graph, it's near enough to the end
+          // that we align text to the left of the dot, otherwise to the start
+          if (d.x >= threeQuartersYear) {
+            return 'end';
+          }
+          // If it's say 2/3 along the graph, it may still hit the right edge, so center
+          else if (d.x > halfwayYear) {
+            return 'middle';
+          } else {
+            return 'start';
+          }
+        })
+        .html((d) => `<tspan class="bold">${d.y.toLocaleString()}</tspan>`)
+        .style('fill', 'black')
+        .style('font-size', this.LabelFontSize);
     }
   }
 
   /** Create the empty tooltip element we fill later */
   setupTooltip(): void {
     // create a tooltip
-    this.tooltip = d3.select(`#${this.svgContPrefix}${this.randomId}`)
-      .append("div")
-        .style("opacity", 0)
-        .attr("class", "tooltip");
+    this.tooltip = d3
+      .select(`#${this.svgContPrefix}${this.randomId}`)
+      .append('div')
+      .style('opacity', 0)
+      .attr('class', 'tooltip');
   }
 
   focus(event: Event, datum: INumGraphPoint): void {
@@ -266,32 +278,34 @@ export default class BarGraph extends Vue {
   }
 
   mouseover(): void {
-    this.tooltip?.style("opacity", 1);
+    this.tooltip?.style('opacity', 1);
   }
 
   mousemove(event: Event, datum: INumGraphPoint): void {
     // Calculate a scale factor to match the internal SVG space to the rendered HTML space
-    const outerWidth = this.width + this.graphMargins.left + this.graphMargins.right;
-    const svgElem = document.getElementById(`${this.svgIdPrefix}${this.randomId}`);
+    const outerWidth =
+      this.width + this.graphMargins.left + this.graphMargins.right;
+    const svgElem = document.getElementById(
+      `${this.svgIdPrefix}${this.randomId}`,
+    );
     const scaleFactor = svgElem!.clientWidth / outerWidth;
 
     const tooltipX = d3.pointer(event)[0] * scaleFactor + 20;
     const tooltipY = d3.pointer(event)[1] * scaleFactor;
 
-    this.tooltip!
-      .html(
-        `<div class="year">${datum.x}</div>` +
+    this.tooltip!.html(
+      `<div class="year">${datum.x}</div>` +
         `<div class="value-cont">` +
-          `<span class="value">${datum.y.toLocaleString()}</span> ` +
-          `<span class="unit">${this.unit}</span>` +
+        `<span class="value">${datum.y.toLocaleString()}</span> ` +
+        `<span class="unit">${this.unit}</span>` +
         `</div>`,
-      )
-      .style("left", `${tooltipX}px`)
-      .style("top", `${tooltipY}px`);
-    }
+    )
+      .style('left', `${tooltipX}px`)
+      .style('top', `${tooltipY}px`);
+  }
 
   mouseleave(): void {
-    this.tooltip?.style("opacity", 0);
+    this.tooltip?.style('opacity', 0);
   }
 }
 </script>
@@ -322,7 +336,9 @@ export default class BarGraph extends Vue {
       font-weight: bold;
       font-size: 1rem;
     }
-    .unit { white-space: nowrap; }
+    .unit {
+      white-space: nowrap;
+    }
     .year {
       font-weight: bold;
       margin-bottom: 0.25rem;
@@ -334,7 +350,8 @@ export default class BarGraph extends Vue {
     height: auto;
     max-width: 20rem; // 320px
 
-    &:hover, &:focus-within {
+    &:hover,
+    &:focus-within {
       // Show all dots and make them thicker using a stroke
       circle.dot {
         opacity: 1;
@@ -344,24 +361,36 @@ export default class BarGraph extends Vue {
     }
 
     .dot {
-      transition: opacity 0.3s, stroke-width 0.3s;
+      transition:
+        opacity 0.3s,
+        stroke-width 0.3s;
 
       // Hide all dots except the min max until hovered to keep the graph simple
-      &:not(.-min-max) { opacity: 0; }
+      &:not(.-min-max) {
+        opacity: 0;
+      }
+    }
+    tspan.bold {
+      font-weight: bold;
+    }
+    tspan.sub {
+      font-size: 0.75em;
     }
-    tspan.bold { font-weight: bold; }
-    tspan.sub { font-size: 0.75em; }
   }
 
   // Hide tick lines on x-axis
-  .tick line { display: none; }
+  .tick line {
+    display: none;
+  }
 
   .x-axis .tick {
     font-size: 1.6rem;
-    font-weight: normal
+    font-weight: normal;
   }
 
   // Hide y-axis via CSS, we label points instead
-  .y-axis { display: none; }
+  .y-axis {
+    display: none;
+  }
 }
 </style>
diff --git a/src/components/layout/AppFooter.vue b/src/components/layout/AppFooter.vue
index 926fb019..2b4b654f 100644
--- a/src/components/layout/AppFooter.vue
+++ b/src/components/layout/AppFooter.vue
@@ -7,8 +7,7 @@ import { Component, Vue } from 'vue-property-decorator';
 @Component({
   name: 'AppFooter',
 })
-export default class AppFooter extends Vue {
-}
+export default class AppFooter extends Vue {}
 </script>
 
 <template>
@@ -16,7 +15,10 @@ export default class AppFooter extends Vue {
     <div class="constrained">
       <div>
         Created with <span class="heart">&#x2764;</span> by
-        <a href="https://github.com/vkoves/electrify-chicago/graphs/contributors">volunteers</a>
+        <a
+          href="https://github.com/vkoves/electrify-chicago/graphs/contributors"
+          >volunteers</a
+        >
         in Chicago
       </div>
 
@@ -25,11 +27,7 @@ export default class AppFooter extends Vue {
           href="https://github.com/vkoves/electrify-chicago"
           class="github-link"
         >
-          <img
-            alt=""
-            src="/github-mark.svg"
-            width="16"
-          >
+          <img alt="" src="/github-mark.svg" width="16" />
           Contribute to Electrify Chicago on GitHub
         </a>
       </div>
@@ -68,7 +66,10 @@ footer {
     border: none;
     font-size: 0.825rem;
 
-    &:hover, &:focus { background-color: $white; }
+    &:hover,
+    &:focus {
+      background-color: $white;
+    }
   }
 
   .heart {
@@ -83,4 +84,4 @@ footer {
     position: static;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue
index 688037cd..54f5ab47 100644
--- a/src/components/layout/AppHeader.vue
+++ b/src/components/layout/AppHeader.vue
@@ -10,8 +10,6 @@ import { Component, Vue } from 'vue-property-decorator';
 export default class AppHeader extends Vue {
   searchQuery = '';
 
-
-
   mobileMenuOpen = false;
 
   focusMain(): void {
@@ -36,27 +34,20 @@ export default class AppHeader extends Vue {
 
 <template>
   <header class="header">
-    <a
-      href="#main-content"
-      class="nav-link skip-to-main"
-      @click="focusMain"
-    >
+    <a href="#main-content" class="nav-link skip-to-main" @click="focusMain">
       Skip to Main Content
     </a>
 
     <!-- The main top container on mobil -->
     <div class="header-primary">
-      <g-link
-        to="/"
-        class="logo-link"
-      >
+      <g-link to="/" class="logo-link">
         <img
           src="/electrify-chicago-logo.svg"
           alt="Electrify Chicago Homepage"
           width="334"
           height="48"
           class="site-logo"
-        >
+        />
       </g-link>
 
       <button
@@ -64,81 +55,32 @@ export default class AppHeader extends Vue {
         :aria-expanded="mobileMenuOpen.toString()"
         @click="toggleMobileMenu"
       >
-        <img
-          src="/menu.svg"
-          alt="Menu"
-          width="30"
-          height="30"
-        >
+        <img src="/menu.svg" alt="Menu" width="30" height="30" />
       </button>
     </div>
 
-    <nav
-      class="top-nav"
-      :class="{ '-hidden': !mobileMenuOpen }"
-    >
-      <g-link
-        class="nav-link"
-        to="/"
-      >
-        Home
-      </g-link>
+    <nav class="top-nav" :class="{ '-hidden': !mobileMenuOpen }">
+      <g-link class="nav-link" to="/"> Home </g-link>
 
-      <g-link
-        class="nav-link"
-        to="/map"
-      >
-        Map
-      </g-link>
+      <g-link class="nav-link" to="/map"> Map </g-link>
 
-      <g-link
-        class="nav-link"
-        to="/top-gas-users"
-      >
-        Top Gas Users
-      </g-link>
+      <g-link class="nav-link" to="/top-gas-users"> Top Gas Users </g-link>
 
-      <g-link
-        class="nav-link"
-        to="/top-emitters"
-      >
-        Top Emitters
-      </g-link>
+      <g-link class="nav-link" to="/top-emitters"> Top Emitters </g-link>
 
-      <g-link
-        class="nav-link"
-        to="/biggest-buildings"
-      >
+      <g-link class="nav-link" to="/biggest-buildings">
         Biggest Buildings
       </g-link>
 
-      <g-link
-        class="nav-link"
-        to="/large-owners"
-      >
-        Large Owners
-      </g-link>
+      <g-link class="nav-link" to="/large-owners"> Large Owners </g-link>
 
-      <g-link
-        class="nav-link"
-        to="/cleanest-buildings"
-      >
+      <g-link class="nav-link" to="/cleanest-buildings">
         Cleanest Buildings
       </g-link>
 
-      <g-link
-        class="nav-link"
-        to="/about"
-      >
-        About
-      </g-link>
+      <g-link class="nav-link" to="/about"> About </g-link>
 
-      <g-link
-        class="nav-link"
-        to="/blog"
-      >
-        Blog
-      </g-link>
+      <g-link class="nav-link" to="/blog"> Blog </g-link>
 
       <form class="search-form">
         <div class="input-cont">
@@ -149,17 +91,9 @@ export default class AppHeader extends Vue {
             name="search"
             aria-label="Search benchmarked buildings"
             placeholder="Search property name/address"
-          >
-          <button
-            type="submit"
-            @click="submitSearch"
-          >
-            <img
-              src="/search.svg"
-              alt=""
-              width="18"
-              height="18"
-            >
+          />
+          <button type="submit" @click="submitSearch">
+            <img src="/search.svg" alt="" width="18" height="18" />
             Search
           </button>
         </div>
@@ -190,7 +124,9 @@ header.header {
     outline-offset: 0.1rem;
     padding: 0.5rem 2rem;
 
-    &:focus { top: 0; }
+    &:focus {
+      top: 0;
+    }
   }
 
   .logo-link {
@@ -226,7 +162,9 @@ header.header {
     }
   }
 
-  .mobile-only { display: none; }
+  .mobile-only {
+    display: none;
+  }
 
   @media (max-width: $mobile-max-width) {
     flex-wrap: wrap;
@@ -235,9 +173,14 @@ header.header {
     padding: 0;
 
     // Show mobile components
-    .mobile-only { display: block; }
+    .mobile-only {
+      display: block;
+    }
 
-    .header-primary, .top-nav { padding: 1rem; }
+    .header-primary,
+    .top-nav {
+      padding: 1rem;
+    }
 
     .header-primary {
       display: flex;
@@ -251,7 +194,9 @@ header.header {
       background-color: $off-white;
 
       // Hide until nav is opened on mobile
-      &.-hidden { display: none; }
+      &.-hidden {
+        display: none;
+      }
     }
 
     .logo-link {
@@ -268,17 +213,23 @@ header.header {
     .mobile-menu-toggle {
       padding: 0.5rem;
 
-      img { display: block; }
+      img {
+        display: block;
+      }
     }
 
-
     form.search-form {
       width: 100%;
 
-      input, button  { font-size: 0.75rem; }
+      input,
+      button {
+        font-size: 0.75rem;
+      }
     }
 
-    nav { margin: 1rem 0; }
+    nav {
+      margin: 1rem 0;
+    }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/layout/Popup.vue b/src/components/layout/Popup.vue
index e966d3d1..db72f4fc 100644
--- a/src/components/layout/Popup.vue
+++ b/src/components/layout/Popup.vue
@@ -2,12 +2,7 @@
   <dialog id="dialog">
     <div class="popup-inner">
       <slot />
-      <button
-        class="popup-close"
-        @click="close"
-      >
-        Close
-      </button>
+      <button class="popup-close" @click="close">Close</button>
     </div>
   </dialog>
 </template>
@@ -32,7 +27,7 @@ export default class Popup extends Vue {
     this.dialog.showModal();
 
     // The native <dialog> handles Esc to close, so we then emit
-    this.dialog.addEventListener("close", () => {
+    this.dialog.addEventListener('close', () => {
       this.close();
     });
   }
@@ -66,8 +61,11 @@ dialog {
       background-color: $grey-light;
       font-size: 1.25rem;
 
-      &:hover, &:focus { background-color: $grey; }
+      &:hover,
+      &:focus {
+        background-color: $grey;
+      }
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/constants/building-images.constant.vue b/src/constants/building-images.constant.vue
index 1c8803b8..ac999daa 100644
--- a/src/constants/building-images.constant.vue
+++ b/src/constants/building-images.constant.vue
@@ -6,19 +6,19 @@ import { IBuilding } from '../common-functions.vue';
 export default {};
 
 export interface IBuildingImage {
-    // The URL we can link to for attributing the image
-    attributionUrl: string;
-    // The actual local image URL
-    imgUrl: string;
-    // Whether this image is a tall portrait style photo - assumed fall if not specified
-    isTall?: boolean;
-    // Whether this image is from Google Maps, which will have a custom citation See:
-    // https://about.google/brand-resource-center/products-and-services/geo-guidelines/#required-attribution
-    fromGoogleMaps?: boolean;
+  // The URL we can link to for attributing the image
+  attributionUrl: string;
+  // The actual local image URL
+  imgUrl: string;
+  // Whether this image is a tall portrait style photo - assumed fall if not specified
+  isTall?: boolean;
+  // Whether this image is from Google Maps, which will have a custom citation See:
+  // https://about.google/brand-resource-center/products-and-services/geo-guidelines/#required-attribution
+  fromGoogleMaps?: boolean;
 }
 
 export interface IBuildingImages {
-    [buildingSlug: string]: IBuildingImage;
+  [buildingSlug: string]: IBuildingImage;
 }
 
 const BuildingImagesBase = '/building-imgs/';
@@ -39,252 +39,264 @@ const BuildingImagesBase = '/building-imgs/';
  * TODO: Move to using building IDs, because slugs change with data updates
  */
 export const BuildingImages: IBuildingImages = {
-    /**
-     * Museums
-     */
-    // the-art-institute-of-chicago
-    '160196': {
-        attributionUrl: 'https://en.wikipedia.org/wiki/File:Art_Institute_of_Chicago_(51575570710).jpg',
-        imgUrl: BuildingImagesBase + 'art-institute.jpg',
-    },
-    // john-g-shedd-aquarium
-    '166134': {
-        attributionUrl: 'https://en.wikipedia.org/wiki/File:Shedd_Aquarium_E.jpg',
-        imgUrl: BuildingImagesBase + 'shedd-aquarium.jpg',
-    },
-    // museum-of-science-and-industry
-    '102460': {
-        attributionUrl: 'https://en.wikipedia.org/wiki/File:Museum_of_Science_and_Industry_(Chicago).jpg',
-        imgUrl: BuildingImagesBase + 'museum-of-science-and-industry.jpg',
-    },
+  /**
+   * Museums
+   */
+  // the-art-institute-of-chicago
+  '160196': {
+    attributionUrl:
+      'https://en.wikipedia.org/wiki/File:Art_Institute_of_Chicago_(51575570710).jpg',
+    imgUrl: BuildingImagesBase + 'art-institute.jpg',
+  },
+  // john-g-shedd-aquarium
+  '166134': {
+    attributionUrl: 'https://en.wikipedia.org/wiki/File:Shedd_Aquarium_E.jpg',
+    imgUrl: BuildingImagesBase + 'shedd-aquarium.jpg',
+  },
+  // museum-of-science-and-industry
+  '102460': {
+    attributionUrl:
+      'https://en.wikipedia.org/wiki/File:Museum_of_Science_and_Industry_(Chicago).jpg',
+    imgUrl: BuildingImagesBase + 'museum-of-science-and-industry.jpg',
+  },
 
-    /**
-     * General Famous Buildings
-     */
-    // marina-towers-condominium-association
-    '239096': {
-        attributionUrl: 'https://en.wikipedia.org/wiki/File:Marina_City,_Chicago,_Illinois,_Estados_Unidos,_2012-10-20,_DD_01.jpg',
-        imgUrl: BuildingImagesBase + 'marina-towers.jpg',
-        isTall: true,
-    },
-    // navy-pier-inc
-    '105864': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:Navy_Pier_1190x1585.jpg',
-        imgUrl: BuildingImagesBase + 'navy-pier.jpg',
-        isTall: true,
-    },
-    // McCormick Place
-    // metropolitan-pier-and-exposition-authority
-    '101551': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:20070110_McCormick_Place_(4).JPG',
-        imgUrl: BuildingImagesBase + 'mccormick-place.jpg',
-    },
-    // aqua
-    '231019': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:Aqua_(Building)_cropped.jpg',
-        imgUrl: BuildingImagesBase + 'aqua.jpg',
-        isTall: true,
-    },
-    // willis-tower
-    '103606': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:Chicago_Sears_Tower.jpg',
-        imgUrl: BuildingImagesBase + 'willis-tower.jpg',
-        isTall: true,
-    },
-    // the-john-hancock-center
-    '100429': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:John_Hancock_Center_viewed_from_Navy_Pier.jpg',
-        imgUrl: BuildingImagesBase + 'john-hancock.jpg',
-        isTall: true,
-    },
-    // merchandise-mart
-    '103656': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:Merchandise_Mart_080405.jpg',
-        imgUrl: BuildingImagesBase + 'merchandise-mart.jpg',
-        isTall: true,
-    },
-    // the-monadnock-building
-    '101567': {
-        attributionUrl: 'https://goo.gl/maps/8CUXVcLq7k9uS3yr7',
-        imgUrl: BuildingImagesBase + 'monadnock-building.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // Chicago Theatre
-    '173598': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:Chicago_Theatre_blend.jpg',
-        imgUrl: BuildingImagesBase + 'chicago-theatre.jpg',
-        fromGoogleMaps: false,
-        isTall: false,
-    },
+  /**
+   * General Famous Buildings
+   */
+  // marina-towers-condominium-association
+  '239096': {
+    attributionUrl:
+      'https://en.wikipedia.org/wiki/File:Marina_City,_Chicago,_Illinois,_Estados_Unidos,_2012-10-20,_DD_01.jpg',
+    imgUrl: BuildingImagesBase + 'marina-towers.jpg',
+    isTall: true,
+  },
+  // navy-pier-inc
+  '105864': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:Navy_Pier_1190x1585.jpg',
+    imgUrl: BuildingImagesBase + 'navy-pier.jpg',
+    isTall: true,
+  },
+  // McCormick Place
+  // metropolitan-pier-and-exposition-authority
+  '101551': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:20070110_McCormick_Place_(4).JPG',
+    imgUrl: BuildingImagesBase + 'mccormick-place.jpg',
+  },
+  // aqua
+  '231019': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:Aqua_(Building)_cropped.jpg',
+    imgUrl: BuildingImagesBase + 'aqua.jpg',
+    isTall: true,
+  },
+  // willis-tower
+  '103606': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:Chicago_Sears_Tower.jpg',
+    imgUrl: BuildingImagesBase + 'willis-tower.jpg',
+    isTall: true,
+  },
+  // the-john-hancock-center
+  '100429': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:John_Hancock_Center_viewed_from_Navy_Pier.jpg',
+    imgUrl: BuildingImagesBase + 'john-hancock.jpg',
+    isTall: true,
+  },
+  // merchandise-mart
+  '103656': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:Merchandise_Mart_080405.jpg',
+    imgUrl: BuildingImagesBase + 'merchandise-mart.jpg',
+    isTall: true,
+  },
+  // the-monadnock-building
+  '101567': {
+    attributionUrl: 'https://goo.gl/maps/8CUXVcLq7k9uS3yr7',
+    imgUrl: BuildingImagesBase + 'monadnock-building.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // Chicago Theatre
+  '173598': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:Chicago_Theatre_blend.jpg',
+    imgUrl: BuildingImagesBase + 'chicago-theatre.jpg',
+    fromGoogleMaps: false,
+    isTall: false,
+  },
 
-    /**
-     * Particularly Low GHG Intensity Buildings
-     */
-    // king-college-prep-cps
-    '101572': {
-        attributionUrl: 'https://goo.gl/maps/Y4AVkhcaFhuQAk5j6',
-        imgUrl: BuildingImagesBase + 'king-college-prep.jpg',
-        fromGoogleMaps: true,
-    },
-    // clinton-complex-condominium-association
-    '254105': {
-        attributionUrl: 'https://goo.gl/maps/XdsAqhXxDBsQSGLC9',
-        imgUrl: BuildingImagesBase + 'clinton-complex-condos.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // state-place-condominium-association
-    '229402': {
-        attributionUrl: 'https://goo.gl/maps/exkd8jYSeNUmjer99',
-        imgUrl: BuildingImagesBase + 'state-place-condos.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // park-1500-lofts
-    '239994': {
-        attributionUrl: 'https://goo.gl/maps/3fQf99PGpCzEU1Vs6',
-        imgUrl: BuildingImagesBase + 'park-1500-lofts.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
+  /**
+   * Particularly Low GHG Intensity Buildings
+   */
+  // king-college-prep-cps
+  '101572': {
+    attributionUrl: 'https://goo.gl/maps/Y4AVkhcaFhuQAk5j6',
+    imgUrl: BuildingImagesBase + 'king-college-prep.jpg',
+    fromGoogleMaps: true,
+  },
+  // clinton-complex-condominium-association
+  '254105': {
+    attributionUrl: 'https://goo.gl/maps/XdsAqhXxDBsQSGLC9',
+    imgUrl: BuildingImagesBase + 'clinton-complex-condos.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // state-place-condominium-association
+  '229402': {
+    attributionUrl: 'https://goo.gl/maps/exkd8jYSeNUmjer99',
+    imgUrl: BuildingImagesBase + 'state-place-condos.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // park-1500-lofts
+  '239994': {
+    attributionUrl: 'https://goo.gl/maps/3fQf99PGpCzEU1Vs6',
+    imgUrl: BuildingImagesBase + 'park-1500-lofts.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
 
-    /**
-     * IIT (Illinois Tech) buildings
-     */
-    // Crown Hall
-    '256419': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:S.R._Crown_Hall.jpg',
-        imgUrl: BuildingImagesBase + 'crown-hall.jpg',
-    },
-    // herman-hall
-    '256427': {
-        attributionUrl: 'https://commons.wikimedia.org/wiki/File:IIT_Hermann_Hall_1.jpg',
-        imgUrl: BuildingImagesBase + 'herman-hall.jpg',
-    },
-    // keating-hall
-    '256434': {
-        attributionUrl: 'https://goo.gl/maps/nuWwajKGroNySAQU7',
-        imgUrl: BuildingImagesBase + 'keating-hall.jpg',
-        fromGoogleMaps: true,
-    },
-    // tech-business-center
-    '256438': {
-        attributionUrl: 'https://goo.gl/maps/aT7PYiyMQzmSwQ8f6',
-        imgUrl: BuildingImagesBase + 'tech-business-center.jpg',
-        fromGoogleMaps: true,
-    },
-    // iit-tower
-    '256440': {
-        attributionUrl: 'https://goo.gl/maps/pW2F1yfAvwKjwFL27',
-        imgUrl: BuildingImagesBase + 'iit-tower.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // mc-cormick-tribune-campus-center
-    '256428': {
-        attributionUrl: 'https://goo.gl/maps/nnGyrZ4nZZ1oaK6J6',
-        imgUrl: BuildingImagesBase + 'mccormick-tribune-campus-center.jpg',
-        fromGoogleMaps: true,
-    },
+  /**
+   * IIT (Illinois Tech) buildings
+   */
+  // Crown Hall
+  '256419': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:S.R._Crown_Hall.jpg',
+    imgUrl: BuildingImagesBase + 'crown-hall.jpg',
+  },
+  // herman-hall
+  '256427': {
+    attributionUrl:
+      'https://commons.wikimedia.org/wiki/File:IIT_Hermann_Hall_1.jpg',
+    imgUrl: BuildingImagesBase + 'herman-hall.jpg',
+  },
+  // keating-hall
+  '256434': {
+    attributionUrl: 'https://goo.gl/maps/nuWwajKGroNySAQU7',
+    imgUrl: BuildingImagesBase + 'keating-hall.jpg',
+    fromGoogleMaps: true,
+  },
+  // tech-business-center
+  '256438': {
+    attributionUrl: 'https://goo.gl/maps/aT7PYiyMQzmSwQ8f6',
+    imgUrl: BuildingImagesBase + 'tech-business-center.jpg',
+    fromGoogleMaps: true,
+  },
+  // iit-tower
+  '256440': {
+    attributionUrl: 'https://goo.gl/maps/pW2F1yfAvwKjwFL27',
+    imgUrl: BuildingImagesBase + 'iit-tower.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // mc-cormick-tribune-campus-center
+  '256428': {
+    attributionUrl: 'https://goo.gl/maps/nnGyrZ4nZZ1oaK6J6',
+    imgUrl: BuildingImagesBase + 'mccormick-tribune-campus-center.jpg',
+    fromGoogleMaps: true,
+  },
 
-    /**
-     * UChicago Buildings
-     */
-    // 6045-kenwood-building
-    '172151': {
-        attributionUrl: 'https://goo.gl/maps/TyJgFT4wfqyRaFtt5',
-        imgUrl: BuildingImagesBase + '6045-s-kenwood.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // accelerator-high-energy-physics
-    '252039': {
-        attributionUrl: 'https://goo.gl/maps/gkWsHoymmwNiwDAU6',
-        imgUrl: BuildingImagesBase + 'uchicago-accelerator-ellis.jpg',
-        fromGoogleMaps: true,
-    },
-    // gordon-center-for-integrative-science-gcis
-    '110848': {
-        attributionUrl: 'https://goo.gl/maps/wgyeibwbqyr1UdvY9',
-        imgUrl: BuildingImagesBase + 'gordon-center.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // hinds-laboratory
-    '173925': {
-        attributionUrl: 'https://goo.gl/maps/yManrKMWU5xFEVQC8',
-        imgUrl: BuildingImagesBase + 'uchicago-hinds-laboratory.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // searle-chemistry-laboratory
-    '134735': {
-        attributionUrl: 'https://goo.gl/maps/ME1PsC6gepn5W5Ms7',
-        imgUrl: BuildingImagesBase + 'searle-chemistry-laboratory.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // william-eckhardt-research-center
-    '254382': {
-        attributionUrl: 'https://goo.gl/maps/GJaEQAau4odVgF2A6',
-        imgUrl: BuildingImagesBase + 'william-eckhardt-research-center.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
+  /**
+   * UChicago Buildings
+   */
+  // 6045-kenwood-building
+  '172151': {
+    attributionUrl: 'https://goo.gl/maps/TyJgFT4wfqyRaFtt5',
+    imgUrl: BuildingImagesBase + '6045-s-kenwood.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // accelerator-high-energy-physics
+  '252039': {
+    attributionUrl: 'https://goo.gl/maps/gkWsHoymmwNiwDAU6',
+    imgUrl: BuildingImagesBase + 'uchicago-accelerator-ellis.jpg',
+    fromGoogleMaps: true,
+  },
+  // gordon-center-for-integrative-science-gcis
+  '110848': {
+    attributionUrl: 'https://goo.gl/maps/wgyeibwbqyr1UdvY9',
+    imgUrl: BuildingImagesBase + 'gordon-center.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // hinds-laboratory
+  '173925': {
+    attributionUrl: 'https://goo.gl/maps/yManrKMWU5xFEVQC8',
+    imgUrl: BuildingImagesBase + 'uchicago-hinds-laboratory.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // searle-chemistry-laboratory
+  '134735': {
+    attributionUrl: 'https://goo.gl/maps/ME1PsC6gepn5W5Ms7',
+    imgUrl: BuildingImagesBase + 'searle-chemistry-laboratory.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // william-eckhardt-research-center
+  '254382': {
+    attributionUrl: 'https://goo.gl/maps/GJaEQAau4odVgF2A6',
+    imgUrl: BuildingImagesBase + 'william-eckhardt-research-center.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
 
-    /**
-     * Misc. High Emitters
-     */
-    // digital-lakeside
-    '101185': {
-        attributionUrl: 'https://goo.gl/maps/1H9Wct1qprbtzNux9',
-        imgUrl: BuildingImagesBase + 'digital-lakeside.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // 352-360-w-wellington-ave
-    '159651': {
-        attributionUrl: 'https://goo.gl/maps/cqJ8Ao4PCyKktJqW7',
-        imgUrl: BuildingImagesBase + '352-w-wellington.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // lowden-homes
-    '250075': {
-        attributionUrl: 'https://goo.gl/maps/StosjYVtT3XjeQ8J7',
-        imgUrl: BuildingImagesBase + 'lowden-homes.jpg',
-        fromGoogleMaps: true,
-    },
-    // core-site
-    '131236': {
-        attributionUrl: 'https://goo.gl/maps/hLejrJBazqKHTs5x9',
-        imgUrl: BuildingImagesBase + 'core-site.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // digital-printer-s-row
-    '168367': {
-        attributionUrl: 'https://goo.gl/maps/F3dnKuzJ29cTxD6F7',
-        imgUrl: BuildingImagesBase + 'digital-printers-row.jpg',
-        fromGoogleMaps: true,
-        isTall: true,
-    },
-    // shop-and-save-market-nagle
-    '173497': {
-        attributionUrl: 'https://goo.gl/maps/DRpUvwYquHtWFaT58',
-        imgUrl: BuildingImagesBase + 'shop-and-save-nagle.jpg',
-        fromGoogleMaps: true,
-    },
+  /**
+   * Misc. High Emitters
+   */
+  // digital-lakeside
+  '101185': {
+    attributionUrl: 'https://goo.gl/maps/1H9Wct1qprbtzNux9',
+    imgUrl: BuildingImagesBase + 'digital-lakeside.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // 352-360-w-wellington-ave
+  '159651': {
+    attributionUrl: 'https://goo.gl/maps/cqJ8Ao4PCyKktJqW7',
+    imgUrl: BuildingImagesBase + '352-w-wellington.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // lowden-homes
+  '250075': {
+    attributionUrl: 'https://goo.gl/maps/StosjYVtT3XjeQ8J7',
+    imgUrl: BuildingImagesBase + 'lowden-homes.jpg',
+    fromGoogleMaps: true,
+  },
+  // core-site
+  '131236': {
+    attributionUrl: 'https://goo.gl/maps/hLejrJBazqKHTs5x9',
+    imgUrl: BuildingImagesBase + 'core-site.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // digital-printer-s-row
+  '168367': {
+    attributionUrl: 'https://goo.gl/maps/F3dnKuzJ29cTxD6F7',
+    imgUrl: BuildingImagesBase + 'digital-printers-row.jpg',
+    fromGoogleMaps: true,
+    isTall: true,
+  },
+  // shop-and-save-market-nagle
+  '173497': {
+    attributionUrl: 'https://goo.gl/maps/DRpUvwYquHtWFaT58',
+    imgUrl: BuildingImagesBase + 'shop-and-save-nagle.jpg',
+    fromGoogleMaps: true,
+  },
 };
 
 /**
  * A helper function to get the building image object for a given building
  */
 export function getBuildingImage(building: IBuilding): IBuildingImage | null {
-    const buildingSlug = slugify(building.ID as string);
-    const buildingImageObj = BuildingImages[buildingSlug];
+  const buildingSlug = slugify(building.ID as string);
+  const buildingImageObj = BuildingImages[buildingSlug];
 
-    return buildingImageObj ?? null;
+  return buildingImageObj ?? null;
 }
 </script>
diff --git a/src/constants/buildings-custom-info.constant.vue b/src/constants/buildings-custom-info.constant.vue
index 5991933f..5435b17d 100644
--- a/src/constants/buildings-custom-info.constant.vue
+++ b/src/constants/buildings-custom-info.constant.vue
@@ -3,7 +3,7 @@
 import slugify from '@sindresorhus/slugify';
 import { IBuilding } from '../common-functions.vue';
 
-export default { };
+export default {};
 
 /**
  * A file containing supplementary building info based on their slug. This can be used
@@ -59,7 +59,6 @@ export const BuildingOwners: IBuildingOwners = {
     logoLarge: '/building-owners/uic/uic-large.png',
   },
 
-
   northwestern: {
     key: 'northwestern',
     name: 'Northwestern University',
@@ -76,7 +75,6 @@ export const BuildingOwners: IBuildingOwners = {
     logoLarge: '/building-owners/loyola/loyola-large.png',
   },
 
-
   /**
    * TODO: Change logoSmall and logoLarge for the following municipalities
    */
@@ -152,7 +150,7 @@ export const BuildingOwners: IBuildingOwners = {
 
 export interface IBuildingCustomInfo {
   owner?: string; // key from BuildingOwners
-  links?: Array <ILink>;
+  links?: Array<ILink>;
   tags?: Array<BuildingTags>;
 }
 
@@ -166,236 +164,245 @@ export interface ILink {
  * in city programs
  * */
 export enum BuildingTags {
-  hasRetrofitCaseStudy = 'has-retrofit-case-study'
+  hasRetrofitCaseStudy = 'has-retrofit-case-study',
 }
 
 /**
  * An object containing our custom details about buildings. These are hand coded based on the
  * building ID, which is stable as the data updates (while names can change YoY)
  */
-export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo } = {
-  '166134' : {
+export const BuildingsCustomInfo: {
+  [buildingId: string]: IBuildingCustomInfo;
+} = {
+  '166134': {
     links: [
       {
-        url : 'https://www.sheddaquarium.org/stories/sustainability-at-shedd',
-        text : 'Sustainability at Shedd | Shedd Aquarium',
+        url: 'https://www.sheddaquarium.org/stories/sustainability-at-shedd',
+        text: 'Sustainability at Shedd | Shedd Aquarium',
       },
-  ]},
+    ],
+  },
 
   /**
    * City Retrofit Data (PDFs)
    */
   // Rookery Building Retrofit
   '103721': {
-    tags: [ BuildingTags.hasRetrofitCaseStudy ],
+    tags: [BuildingTags.hasRetrofitCaseStudy],
     links: [
       {
         url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/The%20Rookery.pdf',
         text: 'Rookery Building Retrofit Report',
       },
-  ]},
+    ],
+  },
   // Wrigley Building
   '101920': {
-    tags: [ BuildingTags.hasRetrofitCaseStudy ],
+    tags: [BuildingTags.hasRetrofitCaseStudy],
     links: [
       {
         url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/Wrigley.pdf',
         text: 'Wrigley Building Retrofit Report',
       },
-  ]},
+    ],
+  },
   // Institute of Cultural Affairs
-  '102336' : {
-    tags: [ BuildingTags.hasRetrofitCaseStudy ],
+  '102336': {
+    tags: [BuildingTags.hasRetrofitCaseStudy],
     links: [
       {
         url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/ICAGreenRise.pdf',
         text: 'Institute of Cultural Affairs Retrofit Report',
       },
-  ]},
+    ],
+  },
 
   // Sheraton Chicago Hotel & Towers
   // Listed as Sheraton Grand(Retrofit) or Sheraton Grand Chicago Riverwalk (google maps)
   '101852': {
-    tags: [ BuildingTags.hasRetrofitCaseStudy ],
+    tags: [BuildingTags.hasRetrofitCaseStudy],
     links: [
       {
         url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/TheSheraton.pdf',
         text: 'Sheraton Grand Chicago Hotel Retrofit Report',
       },
-  ]},
+    ],
+  },
 
   /**
    * DePaul Buildings
    * Helpful source: https://www.depaul.edu/campus-maps/Pages/default.aspx
    */
   // Mc-Gowan-North
-  '251330': {owner: BuildingOwners.depaul.key},
+  '251330': { owner: BuildingOwners.depaul.key },
   // Mc-Gowan-South
-  '119808': {owner: BuildingOwners.depaul.key},
+  '119808': { owner: BuildingOwners.depaul.key },
   // De-Paul-Center
-  '101562': {owner: BuildingOwners.depaul.key},
+  '101562': { owner: BuildingOwners.depaul.key },
   // Holtschneider-Performance-Center
-  '254989': {owner: BuildingOwners.depaul.key},
+  '254989': { owner: BuildingOwners.depaul.key },
   // Student-Center
-  '251335': {owner: BuildingOwners.depaul.key},
+  '251335': { owner: BuildingOwners.depaul.key },
   // Centennial-Hall
-  '251326': {owner: BuildingOwners.depaul.key},
+  '251326': { owner: BuildingOwners.depaul.key },
   // Sullivan Athletic Center
-  '138514': {owner: BuildingOwners.depaul.key},
+  '138514': { owner: BuildingOwners.depaul.key },
   // Ray Meyer Fitness and Recreation Center
-  '251332': {owner: BuildingOwners.depaul.key},
+  '251332': { owner: BuildingOwners.depaul.key },
   // Theatre School
-  '251337': {owner: BuildingOwners.depaul.key},
+  '251337': { owner: BuildingOwners.depaul.key },
   // College of Computing and Digital Media (CDM)
-  '134779': {owner: BuildingOwners.depaul.key},
+  '134779': { owner: BuildingOwners.depaul.key },
   // Thomas P. Levan Center
-  '251338': {owner: BuildingOwners.depaul.key},
+  '251338': { owner: BuildingOwners.depaul.key },
   // McCabe Hall
-  '251329': {owner: BuildingOwners.depaul.key},
+  '251329': { owner: BuildingOwners.depaul.key },
   // College of Education Building
-  '175365': {owner: BuildingOwners.depaul.key},
+  '175365': { owner: BuildingOwners.depaul.key },
   // Peter V. Byrne Hall
-  '251925': {owner: BuildingOwners.depaul.key},
+  '251925': { owner: BuildingOwners.depaul.key },
   // Munroe Hall
-  '251331': {owner: BuildingOwners.depaul.key},
+  '251331': { owner: BuildingOwners.depaul.key },
   // Seton Hall
-  '251334': {owner: BuildingOwners.depaul.key},
+  '251334': { owner: BuildingOwners.depaul.key },
   // Belden-Racine Hall
-  '251325': {owner: BuildingOwners.depaul.key},
+  '251325': { owner: BuildingOwners.depaul.key },
   // Arts & Letters Hall
-  '251324': {owner: BuildingOwners.depaul.key},
+  '251324': { owner: BuildingOwners.depaul.key },
   // Arthur J. Schmitt Academic Center
-  '173724': {owner: BuildingOwners.depaul.key},
+  '173724': { owner: BuildingOwners.depaul.key },
   // DePaul college of law
-  '103634': {owner: BuildingOwners.depaul.key},
+  '103634': { owner: BuildingOwners.depaul.key },
   // Richard M. and Maggie C. Daley Building
-  '101975': {owner: BuildingOwners.depaul.key},
+  '101975': { owner: BuildingOwners.depaul.key },
   // 990 W Fullerton Building
-  '251322': {owner: BuildingOwners.depaul.key},
+  '251322': { owner: BuildingOwners.depaul.key },
   // John T. Richardson Library
-  '251328': {owner: BuildingOwners.depaul.key,
-    tags: [ BuildingTags.hasRetrofitCaseStudy ],
+  '251328': {
+    owner: BuildingOwners.depaul.key,
+    tags: [BuildingTags.hasRetrofitCaseStudy],
     links: [
-        {
-          url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/Richardson%20Library.pdf',
-          text: 'Richardson Library Retrofit Report',
-        },
-  ]},
+      {
+        url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/Richardson%20Library.pdf',
+        text: 'Richardson Library Retrofit Report',
+      },
+    ],
+  },
   // 1150 W. Fullerton Building
-  '251321': {owner: BuildingOwners.depaul.key},
+  '251321': { owner: BuildingOwners.depaul.key },
   // University Center Chicago
-  '166264': {owner: BuildingOwners.depaul.key},
-
+  '166264': { owner: BuildingOwners.depaul.key },
 
   /**
    * IIT buildings
    * Helpful source: https://en.wikipedia.org/wiki/List_of_Illinois_Institute_of_Technology_buildings
    */
   // Crown Hall
-  '256419': {owner: BuildingOwners.iit.key},
+  '256419': { owner: BuildingOwners.iit.key },
   // Keating Hall
-  '256434': {owner: BuildingOwners.iit.key},
+  '256434': { owner: BuildingOwners.iit.key },
   // Life Science Research Building
-  '256439': {owner: BuildingOwners.iit.key},
+  '256439': { owner: BuildingOwners.iit.key },
   // Tech Business Center
-  '256438': {owner: BuildingOwners.iit.key},
+  '256438': { owner: BuildingOwners.iit.key },
   // Herman Hall
-  '256427': {owner: BuildingOwners.iit.key},
+  '256427': { owner: BuildingOwners.iit.key },
   // IIT Tower
-  '256440': {owner: BuildingOwners.iit.key},
+  '256440': { owner: BuildingOwners.iit.key },
   // IIT Stuart School Of Business
-  '158403': {owner: BuildingOwners.iit.key},
+  '158403': { owner: BuildingOwners.iit.key },
   // John T Rettaliata Engineering Center
-  '256420': {owner: BuildingOwners.iit.key},
+  '256420': { owner: BuildingOwners.iit.key },
   // McCormick Tribune Campus Center
-  '256428': {owner: BuildingOwners.iit.key},
+  '256428': { owner: BuildingOwners.iit.key },
   // Stuart Building
-  '256424': {owner: BuildingOwners.iit.key},
+  '256424': { owner: BuildingOwners.iit.key },
   // Wishnick Hall
-  '256425': {owner: BuildingOwners.iit.key},
+  '256425': { owner: BuildingOwners.iit.key },
   // Siegal Hall
-  '256433': {owner: BuildingOwners.iit.key},
+  '256433': { owner: BuildingOwners.iit.key },
   // Incubator?
-  '256435': {owner: BuildingOwners.iit.key},
+  '256435': { owner: BuildingOwners.iit.key },
   // Perlstein Hall
-  '256423': {owner: BuildingOwners.iit.key},
+  '256423': { owner: BuildingOwners.iit.key },
   // IIT Tower
-  '111290': {owner: BuildingOwners.iit.key},
+  '111290': { owner: BuildingOwners.iit.key },
   // IIT former Main building
-  '103624': {owner: BuildingOwners.iit.key},
+  '103624': { owner: BuildingOwners.iit.key },
   // Gunsaulus Hall
-  '256431': {owner: BuildingOwners.iit.key},
+  '256431': { owner: BuildingOwners.iit.key },
   // Carman Hall
-  '256429': {owner: BuildingOwners.iit.key},
+  '256429': { owner: BuildingOwners.iit.key },
   // Pritzker Science Center
-  '256421': {owner: BuildingOwners.iit.key},
+  '256421': { owner: BuildingOwners.iit.key },
 
   /**
    * UChicago Buildings
    * Helpful source: https://registrar.uchicago.edu/faculty-staff/classroom-scheduling/buildings-directory-2/
    */
   //Mansueto Library at UChicago
-  '252064' : {owner: BuildingOwners.uchicago.key,
-    tags: [ BuildingTags.hasRetrofitCaseStudy ],
+  '252064': {
+    owner: BuildingOwners.uchicago.key,
+    tags: [BuildingTags.hasRetrofitCaseStudy],
     links: [
       {
         url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/UChicagoMansueto.pdf',
         text: 'Mansueto Library Retrofit Report',
       },
-  ]},
+    ],
+  },
   // 1155 E 60th St
-  '136212': {owner: BuildingOwners.uchicago.key},
+  '136212': { owner: BuildingOwners.uchicago.key },
   // 5841 S Maryland Ave M C0985
-  '256838': {owner: BuildingOwners.uchicago.key},
+  '256838': { owner: BuildingOwners.uchicago.key },
   // 6045 Kenwood Building
-  '172151': {owner: BuildingOwners.uchicago.key},
+  '172151': { owner: BuildingOwners.uchicago.key },
   // Accelerator High Energy Physics
-  '252039': {owner: BuildingOwners.uchicago.key},
+  '252039': { owner: BuildingOwners.uchicago.key },
   // Gordon Center For Integrative Science Gcis
-  '110848': {owner: BuildingOwners.uchicago.key},
+  '110848': { owner: BuildingOwners.uchicago.key },
   // Hinds Laboratory
-  '173925': {owner: BuildingOwners.uchicago.key},
+  '173925': { owner: BuildingOwners.uchicago.key },
   // Jones Laboratory
-  '252050': {owner: BuildingOwners.uchicago.key},
+  '252050': { owner: BuildingOwners.uchicago.key },
   // Searle Chemistry Laboratory
-  '134735': {owner: BuildingOwners.uchicago.key},
+  '134735': { owner: BuildingOwners.uchicago.key },
   // William Eckhardt Research Center
-  '254382': {owner: BuildingOwners.uchicago.key},
+  '254382': { owner: BuildingOwners.uchicago.key },
   // Ratner Athletics Center
-  '252037': {owner: BuildingOwners.uchicago.key},
+  '252037': { owner: BuildingOwners.uchicago.key },
   // Crerar Library
-  '252038': {owner: BuildingOwners.uchicago.key},
+  '252038': { owner: BuildingOwners.uchicago.key },
   // Renee Granville Grossman Residential Commons
-  '252043': {owner: BuildingOwners.uchicago.key},
+  '252043': { owner: BuildingOwners.uchicago.key },
   // Campus Residential North Commons
-  '254381': {owner: BuildingOwners.uchicago.key},
+  '254381': { owner: BuildingOwners.uchicago.key },
   // Burton Judson Courts
-  '156942': {owner: BuildingOwners.uchicago.key},
-  '254181':  {owner: BuildingOwners.uchicago.key},
-  '252047':  {owner: BuildingOwners.uchicago.key},
+  '156942': { owner: BuildingOwners.uchicago.key },
+  '254181': { owner: BuildingOwners.uchicago.key },
+  '252047': { owner: BuildingOwners.uchicago.key },
   // Bookstore!
-  '252041': {owner: BuildingOwners.uchicago.key},
+  '252041': { owner: BuildingOwners.uchicago.key },
   // Booth School
-  '102455': {owner: BuildingOwners.uchicago.key},
+  '102455': { owner: BuildingOwners.uchicago.key },
   // Cobb Hall
-  '252049': {owner: BuildingOwners.uchicago.key},
+  '252049': { owner: BuildingOwners.uchicago.key },
   // Laird Bell Law Quadrangle
-  '252044': {owner: BuildingOwners.uchicago.key},
+  '252044': { owner: BuildingOwners.uchicago.key },
   // Kersten Physics Teaching Center
-  '252040': {owner: BuildingOwners.uchicago.key},
+  '252040': { owner: BuildingOwners.uchicago.key },
   // Gleacher Center
-  '118776': {owner: BuildingOwners.uchicago.key},
+  '118776': { owner: BuildingOwners.uchicago.key },
   // Social Science Research Building
-  '252057': {owner: BuildingOwners.uchicago.key},
+  '252057': { owner: BuildingOwners.uchicago.key },
   // Max Palevsky Residential Commons/Bartlett Commons
-  '252036': {owner: BuildingOwners.uchicago.key},
+  '252036': { owner: BuildingOwners.uchicago.key },
   // 1156 E 61st St
-  '256812': {owner: BuildingOwners.uchicago.key},
+  '256812': { owner: BuildingOwners.uchicago.key },
   // Breckinridge House
-  '256502': {owner: BuildingOwners.uchicago.key},
+  '256502': { owner: BuildingOwners.uchicago.key },
   // Chapin Hall
-  '252061': {owner: BuildingOwners.uchicago.key},
-
+  '252061': { owner: BuildingOwners.uchicago.key },
 
   /**
    * UIC Buildings
@@ -413,14 +420,16 @@ export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo }
    * Helpful source: https://maps.northwestern.edu/chicago
    */
   // 303 E Superior Street (Lurie Medical Research Center)
-  '256405': { owner: BuildingOwners.northwestern.key ,
-    tags: [ BuildingTags.hasRetrofitCaseStudy ],
+  '256405': {
+    owner: BuildingOwners.northwestern.key,
+    tags: [BuildingTags.hasRetrofitCaseStudy],
     links: [
       {
         url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/Northwestern%20Lurie.pdf',
         text: 'Lurie Medical Research Center - 303 E Superior St Retrofit Report',
       },
-  ]},
+    ],
+  },
   // 320 E Superior Street
   '256408': { owner: BuildingOwners.northwestern.key },
   // 300 E Superior Street
@@ -434,19 +443,18 @@ export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo }
   // Pritzker School of Law, 375 E Chicago Ave
   '256406': { owner: BuildingOwners.northwestern.key },
   // 345 E. Superior
-  '101890': {owner: BuildingOwners.northwestern.key},
+  '101890': { owner: BuildingOwners.northwestern.key },
   // Wieboldt Hall, 340 E. Superior
-  '256407': {owner: BuildingOwners.northwestern.key},
- // Chicago Campus 2, Feinberg Pavilion, 251 E Huron St
-  '103632': {owner: BuildingOwners.northwestern.key},
+  '256407': { owner: BuildingOwners.northwestern.key },
+  // Chicago Campus 2, Feinberg Pavilion, 251 E Huron St
+  '103632': { owner: BuildingOwners.northwestern.key },
 
   // Prentice Women's Hospital, 250 E Superior St
-  '103615': {owner: BuildingOwners.northwestern.key},
+  '103615': { owner: BuildingOwners.northwestern.key },
   // NMH Arkes Family Pavilion, 676 N St Clair St
-  '103684': {owner: BuildingOwners.northwestern.key},
+  '103684': { owner: BuildingOwners.northwestern.key },
   // 8792, Feinberg School of Medicine, 303 E Chicago Ave
-  '256411': {owner: BuildingOwners.northwestern.key},
-
+  '256411': { owner: BuildingOwners.northwestern.key },
 
   /**
    * Loyola University
@@ -454,57 +462,57 @@ export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo }
    * See campus maps: https://www.luc.edu/welcomeweek/campusmaps/
    */
   // Damen Student Cetner
-  '254161': {owner: BuildingOwners.loyola.key},
+  '254161': { owner: BuildingOwners.loyola.key },
   // Corbow Law Center
-  '101971': {owner: BuildingOwners.loyola.key},
+  '101971': { owner: BuildingOwners.loyola.key },
   // Quinlan Life Sciences
-  '254168': {owner: BuildingOwners.loyola.key},
+  '254168': { owner: BuildingOwners.loyola.key },
   // Norville Center
-  '254171': {owner: BuildingOwners.loyola.key},
+  '254171': { owner: BuildingOwners.loyola.key },
   // Mundelein Center
-  '102408': {owner: BuildingOwners.loyola.key},
+  '102408': { owner: BuildingOwners.loyola.key },
   // Halas Recreation Center
-  '254386': {owner: BuildingOwners.loyola.key},
+  '254386': { owner: BuildingOwners.loyola.key },
   // Crown Center
-  '254166': {owner: BuildingOwners.loyola.key},
+  '254166': { owner: BuildingOwners.loyola.key },
   // Flanner Hall
-   '158842': {owner: BuildingOwners.loyola.key},
+  '158842': { owner: BuildingOwners.loyola.key },
   // de Nobili Hall
-  '254169': {owner: BuildingOwners.loyola.key},
+  '254169': { owner: BuildingOwners.loyola.key },
   // Maguire Hall
-  '254163': {owner: BuildingOwners.loyola.key},
+  '254163': { owner: BuildingOwners.loyola.key },
   // Simpson Living Learning Center
-   '254167': {owner: BuildingOwners.loyola.key},
+  '254167': { owner: BuildingOwners.loyola.key },
   // Fordham Hall
-   '103681': {owner: BuildingOwners.loyola.key},
+  '103681': { owner: BuildingOwners.loyola.key },
   // Sullivan Center
-   '173858': {owner: BuildingOwners.loyola.key},
+  '173858': { owner: BuildingOwners.loyola.key },
   // Campion Hall
-   '254165': {owner: BuildingOwners.loyola.key},
+  '254165': { owner: BuildingOwners.loyola.key },
   // Regis Hall
-  '254172': {owner: BuildingOwners.loyola.key},
+  '254172': { owner: BuildingOwners.loyola.key },
   // Cudahy Library
-  '254164': {owner: BuildingOwners.loyola.key},
+  '254164': { owner: BuildingOwners.loyola.key },
   // Lewis Towers
-   '174182': {owner: BuildingOwners.loyola.key},
+  '174182': { owner: BuildingOwners.loyola.key },
   // Santa Clara Hall
-   '161053': {owner: BuildingOwners.loyola.key},
+  '161053': { owner: BuildingOwners.loyola.key },
   // BVM Hall/IES
-  '175895': {owner: BuildingOwners.loyola.key},
+  '175895': { owner: BuildingOwners.loyola.key },
   // San Francisco Hall
-   '254170': {owner: BuildingOwners.loyola.key},
+  '254170': { owner: BuildingOwners.loyola.key },
   // Mertz Hall - CFSU
-   '254162': {owner: BuildingOwners.loyola.key},
+  '254162': { owner: BuildingOwners.loyola.key },
   // Baumhart Hall
-  '160412': {owner: BuildingOwners.loyola.key},
+  '160412': { owner: BuildingOwners.loyola.key },
   // Cuneo Hall
-   '254160': {owner: BuildingOwners.loyola.key},
+  '254160': { owner: BuildingOwners.loyola.key },
   // Bellarmine Hall
-  '173888': {owner: BuildingOwners.loyola.key},
+  '173888': { owner: BuildingOwners.loyola.key },
   // Fairfield Hall
-  '105533': {owner: BuildingOwners.loyola.key},
+  '105533': { owner: BuildingOwners.loyola.key },
   // Schreiber Center
-  '254355': {owner: BuildingOwners.loyola.key},
+  '254355': { owner: BuildingOwners.loyola.key },
 
   /**
    * CPS
@@ -1462,7 +1470,7 @@ export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo }
   // Prodigy Wood
   '251740': { owner: BuildingOwners.cps.key },
 
-   /**
+  /**
    * CHA
    * Helpful source: https://www.thecha.org/residents/public-housing/find-public-housing
    */
@@ -1470,7 +1478,7 @@ export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo }
   '160397': { owner: BuildingOwners.cha.key },
   // 1 South Leavitt
   '256670': { owner: BuildingOwners.cha.key },
-   // Ada S. Dennison-McKinley Apartments
+  // Ada S. Dennison-McKinley Apartments
   '250079': { owner: BuildingOwners.cha.key },
   // Albany Terrace Apts
   '250080': { owner: BuildingOwners.cha.key },
@@ -1605,7 +1613,7 @@ export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo }
   // Zelda Ormes Apartments
   '250114': { owner: BuildingOwners.cha.key },
 
-   /**
+  /**
    * City of Chicago
    * Helpful source: https://www.chicago.gov/city/en/depts/dcd/supp_info/city-owned_land_inventory.html
    */
@@ -1699,12 +1707,16 @@ export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo }
   // 162 North State Street
   '250167': { owner: BuildingOwners.saic.key },
   // 280 Building, 280 S Columbus Dr
-  '2tags: [ BuildingTags.hasRetrofitCaseStudy],52065': { owner: BuildingOwners.saic.key ,
+  '252065': {
+    tags: [BuildingTags.hasRetrofitCaseStudy],
+    owner: BuildingOwners.saic.key,
     links: [
       {
         url: 'https://www.chicago.gov/content/dam/city/sites/retrofit-chicago-2/pastparticipants/SAIC.pdf',
         text: 'SAIC 280 S Columbus Building Retrofit Report',
-      } ]},
+      },
+    ],
+  },
   // Alice B. Sharp Building, 37 S Wabash Ave
   '134783': { owner: BuildingOwners.saic.key },
 
@@ -1719,10 +1731,11 @@ export const BuildingsCustomInfo: { [buildingId: string]: IBuildingCustomInfo }
   '254159': { owner: BuildingOwners.npu.key },
   // 5114 N Christiana
   '254157': { owner: BuildingOwners.npu.key },
-
 };
 
-export function getBuildingCustomInfo(building: IBuilding): IBuildingCustomInfo | null {
+export function getBuildingCustomInfo(
+  building: IBuilding,
+): IBuildingCustomInfo | null {
   const buildingSlug = slugify(building.ID as string);
 
   return BuildingsCustomInfo[buildingSlug] ?? null;
diff --git a/src/data/source/Benchmark DataExplainer.md b/src/data/source/Benchmark DataExplainer.md
index f2decaa5..8e7b43e3 100644
--- a/src/data/source/Benchmark DataExplainer.md	
+++ b/src/data/source/Benchmark DataExplainer.md	
@@ -3,77 +3,76 @@
 To make the CSV data compatible with GraphQL, we made the column titles camel case and stripped out
 unit information - here's a table of the mapping so you can see the units clearly:
 
-: Input Column (Orig. Chicago CSV)              : Output Column (GraphQL)       :
-: ---                                           : ---                           :
-: Data Year                                     : DataYear                      :
-: ID                                            : ID                            :
-: Property Name                                 : PropertyName                  :
-: Reporting Status                              : ReportingStatus               :
-: Address                                       : Address                       :
-: ZIP Code                                      : ZIPCode                       :
-: Chicago Energy Rating                         : ChicagoEnergyRating           :
-: Exempt From Chicago Energy Rating             : ExemptFromChicagoEnergyRating :
-: Community Area                                : CommunityArea                 :
-: Primary Property Type                         : PrimaryPropertyType           :
-: Gross Floor Area - Buildings (sq ft)          : GrossFloorArea                :
-: Total GHG Emissions (Metric Tons CO2e)        : TotalGHGEmissions             :
-: GHG Intensity (kg CO2e/sq ft)                 : GHGIntensity                  :
-: Year Built                                    : YearBuilt                     :
-: # of Buildings                                : NumberOfBuildings             :
-: Water Use (kGal)                              : WaterUse                      :
-: ENERGY STAR Score                             : ENERGYSTARScore               :
-: Electricity Use (kBtu)                        : ElectricityUse                :
-: Natural Gas Use (kBtu)                        : NaturalGasUse                 :
-: District Steam Use (kBtu)                     : DistrictSteamUse              :
-: District Chilled Water Use (kBtu)             : DistrictChilledWaterUse       :
-: All Other Fuel Use (kBtu)                     : AllOtherFuelUse               :
-: Site EUI (kBtu/sq ft)                         : SiteEUI                       :
-: Source EUI (kBtu/sq ft)                       : SourceEUI                     :
-: Weather Normalized Site EUI (kBtu/sq ft)      : WeatherNormalizedSiteEUI      :
-: Weather Normalized Source EUI (kBtu/sq ft)    : WeatherNormalizedSourceEUI    :
-: Latitude                                      : Latitude                      :
-: Longitude                                     : Longitude                     :
-: Location                                      : Location                      :
-: Row_ID                                        : Row_ID                        :
-: Wards                                         : Wards                         :
-: Community Areas                               : CommunityAreas                :
-: Zip Codes                                     : ZipCodes                      :
-: Census Tracts                                 : CensusTracts                  :
-: Historical Wards 2003-2015                    : HistoricalWards2003-2015      :
+: Input Column (Orig. Chicago CSV) : Output Column (GraphQL) :
+: --- : --- :
+: Data Year : DataYear :
+: ID : ID :
+: Property Name : PropertyName :
+: Reporting Status : ReportingStatus :
+: Address : Address :
+: ZIP Code : ZIPCode :
+: Chicago Energy Rating : ChicagoEnergyRating :
+: Exempt From Chicago Energy Rating : ExemptFromChicagoEnergyRating :
+: Community Area : CommunityArea :
+: Primary Property Type : PrimaryPropertyType :
+: Gross Floor Area - Buildings (sq ft) : GrossFloorArea :
+: Total GHG Emissions (Metric Tons CO2e) : TotalGHGEmissions :
+: GHG Intensity (kg CO2e/sq ft) : GHGIntensity :
+: Year Built : YearBuilt :
+: # of Buildings : NumberOfBuildings :
+: Water Use (kGal) : WaterUse :
+: ENERGY STAR Score : ENERGYSTARScore :
+: Electricity Use (kBtu) : ElectricityUse :
+: Natural Gas Use (kBtu) : NaturalGasUse :
+: District Steam Use (kBtu) : DistrictSteamUse :
+: District Chilled Water Use (kBtu) : DistrictChilledWaterUse :
+: All Other Fuel Use (kBtu) : AllOtherFuelUse :
+: Site EUI (kBtu/sq ft) : SiteEUI :
+: Source EUI (kBtu/sq ft) : SourceEUI :
+: Weather Normalized Site EUI (kBtu/sq ft) : WeatherNormalizedSiteEUI :
+: Weather Normalized Source EUI (kBtu/sq ft) : WeatherNormalizedSourceEUI :
+: Latitude : Latitude :
+: Longitude : Longitude :
+: Location : Location :
+: Row_ID : Row_ID :
+: Wards : Wards :
+: Community Areas : CommunityAreas :
+: Zip Codes : ZipCodes :
+: Census Tracts : CensusTracts :
+: Historical Wards 2003-2015 : HistoricalWards2003-2015 :
 
-
-"Data Year"                              : "DataYear",
- "ID": "ID",                            
+"Data Year" : "DataYear",
+"ID": "ID",  
  "Property Name": "PropertyName",
- "Reporting Status": "ReportingStatus",               
- "Address": "Address",                       
- "ZIP Code": "ZIPCode",                       
- "Chicago Energy Rating": "ChicagoEnergyRating",           
- "Exempt From Chicago Energy Rating": "ExemptFromChicagoEnergyRating", 
- "Community Area": "CommunityArea",                 
- "Primary Property Type": "PrimaryPropertyType",           
- "Gross Floor Area - Buildings (sq ft)"          : "GrossFloorArea",                
- "Total GHG Emissions (Metric Tons CO2e)"        : "TotalGHGEmissions",             
- "GHG Intensity (kg CO2e/sq ft)"                 : "GHGIntensity",                  
- "Year Built"                                    : "YearBuilt",                     
- "# of Buildings"                                : "NumberOfBuildings",             
- "Water Use (kGal)"                              : "WaterUse",                      
- "ENERGY STAR Score"                             : "ENERGYSTARScore",               
- "Electricity Use (kBtu)"                        : "ElectricityUse",                
- "Natural Gas Use (kBtu)"                        : "NaturalGasUse",                 
- "District Steam Use (kBtu)"                     : "DistrictSteamUse",              
- "District Chilled Water Use (kBtu)"             : "DistrictChilledWaterUse",       
- "All Other Fuel Use (kBtu)"                     : "AllOtherFuelUse",               
- "Site EUI (kBtu/sq ft)"                         : "SiteEUI",                       
- "Source EUI (kBtu/sq ft)"                       : "SourceEUI",                     
- "Weather Normalized Site EUI (kBtu/sq ft)"      : "WeatherNormalizedSiteEUI",      
- "Weather Normalized Source EUI (kBtu/sq ft)"    : "WeatherNormalizedSourceEUI",   
- "Latitude"                                      : "Latitude",                      
- "Longitude"                                     : "Longitude",                     
- "Location"                                      : "Location",                      
- "Row_ID"                                        : "Row_ID",                        
- "Wards"                                         : "Wards",                         
- "Community Areas"                               : "CommunityAreas",                
- "Zip Codes"                                     : "ZipCodes",                      
- "Census Tracts"                                 : "CensusTracts",                  
- "Historical Wards 2003-2015"                    : "HistoricalWards2003-2015"      
\ No newline at end of file
+"Reporting Status": "ReportingStatus",  
+ "Address": "Address",  
+ "ZIP Code": "ZIPCode",  
+ "Chicago Energy Rating": "ChicagoEnergyRating",  
+ "Exempt From Chicago Energy Rating": "ExemptFromChicagoEnergyRating",
+"Community Area": "CommunityArea",  
+ "Primary Property Type": "PrimaryPropertyType",  
+ "Gross Floor Area - Buildings (sq ft)" : "GrossFloorArea",  
+ "Total GHG Emissions (Metric Tons CO2e)" : "TotalGHGEmissions",  
+ "GHG Intensity (kg CO2e/sq ft)" : "GHGIntensity",  
+ "Year Built" : "YearBuilt",  
+ "# of Buildings" : "NumberOfBuildings",  
+ "Water Use (kGal)" : "WaterUse",  
+ "ENERGY STAR Score" : "ENERGYSTARScore",  
+ "Electricity Use (kBtu)" : "ElectricityUse",  
+ "Natural Gas Use (kBtu)" : "NaturalGasUse",  
+ "District Steam Use (kBtu)" : "DistrictSteamUse",  
+ "District Chilled Water Use (kBtu)" : "DistrictChilledWaterUse",  
+ "All Other Fuel Use (kBtu)" : "AllOtherFuelUse",  
+ "Site EUI (kBtu/sq ft)" : "SiteEUI",  
+ "Source EUI (kBtu/sq ft)" : "SourceEUI",  
+ "Weather Normalized Site EUI (kBtu/sq ft)" : "WeatherNormalizedSiteEUI",  
+ "Weather Normalized Source EUI (kBtu/sq ft)" : "WeatherNormalizedSourceEUI",  
+ "Latitude" : "Latitude",  
+ "Longitude" : "Longitude",  
+ "Location" : "Location",  
+ "Row_ID" : "Row_ID",  
+ "Wards" : "Wards",  
+ "Community Areas" : "CommunityAreas",  
+ "Zip Codes" : "ZipCodes",  
+ "Census Tracts" : "CensusTracts",  
+ "Historical Wards 2003-2015" : "HistoricalWards2003-2015"
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 8e192d7c..cad4af02 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -17,9 +17,7 @@ import AppHeader from '../components/layout/AppHeader.vue';
     AppHeader,
   },
 })
-export default class Default extends Vue {
-
-}
+export default class Default extends Vue {}
 </script>
 
 <template>
diff --git a/src/main.js b/src/main.js
index c1bc8e2e..2d830c7c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,11 +4,11 @@
 import DefaultLayout from '~/layouts/Default.vue';
 
 // eslint-disable-next-line require-jsdoc
-export default function(Vue, {router, head, isClient}) {
+export default function (Vue, { router, head, isClient }) {
   // Set default layout as a global component
   Vue.component('DefaultLayout', DefaultLayout);
 
-  Vue.config.errorHandler = function(err, vm, info) {
+  Vue.config.errorHandler = function (err, vm, info) {
     // handle error
     // `info` is a Vue-specific error info, e.g. which lifecycle hook
     // the error was found in. Only available in 2.2.0+
@@ -30,7 +30,8 @@ export default function(Vue, {router, head, isClient}) {
   // Add meta description
   head.meta.push({
     name: 'description',
-    content: 'Learn about Chicago\'s most polluting buildings, and why we need to electrify!',
+    content:
+      "Learn about Chicago's most polluting buildings, and why we need to electrify!",
   });
 
   // Add social images
@@ -52,7 +53,9 @@ export default function(Vue, {router, head, isClient}) {
   // Google analytics code
   if (isClient) {
     window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+    function gtag() {
+      dataLayer.push(arguments);
+    }
     gtag('js', new Date());
 
     gtag('config', 'G-D4F03H5C02');
diff --git a/src/pages/About.vue b/src/pages/About.vue
index 3eab8ec7..0e311904 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -11,7 +11,7 @@ import { LatestDataYear } from '../constants/globals.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'About Us' };
+    return { title: 'About Us' };
   },
 })
 export default class About extends Vue {
@@ -21,20 +21,16 @@ export default class About extends Vue {
 <template>
   <DefaultLayout>
     <div class="about-page layout-constrained">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        About Us
-      </h1>
+      <h1 id="main-content" tabindex="-1">About Us</h1>
 
       <p class="constrained">
-        Electrify Chicago is an independent open-source project looking to shed light onto one of
-        the biggest sources of Chicago's CO<sub>2</sub> emissions - buildings. By providing more
-        information about some of the city's largest and most polluting buildings, we hope t
-        encourage these buildings to electrify, particularly by mobilizing people related to the
-        building - whether that be students and faculty for a college building or employees and
-        patients at a hospital.
+        Electrify Chicago is an independent open-source project looking to shed
+        light onto one of the biggest sources of Chicago's CO<sub>2</sub>
+        emissions - buildings. By providing more information about some of the
+        city's largest and most polluting buildings, we hope t encourage these
+        buildings to electrify, particularly by mobilizing people related to the
+        building - whether that be students and faculty for a college building
+        or employees and patients at a hospital.
       </p>
 
       <p class="our-why large-text bold">
@@ -50,7 +46,7 @@ export default class About extends Vue {
           class="-shadowed"
           src="/il-power-chart.webp"
           width="350"
-        >
+        />
 
         <p class="footnote -img">
           Source:
@@ -65,57 +61,55 @@ export default class About extends Vue {
       </div>
 
       <p class="constrained">
-        In simple terms, because we can scalably produce electricity without emitting CO<sub>2</sub>
-        and exacerbating the climate crisis. In fact, <em>this decade</em> (the 2020s) is an
-        especially crucial one for tackling climate change
-        (<a href="https://www.nytimes.com/2023/03/20/climate/global-warming-ipcc-earth.html">
-          &ldquo;World Has Less Than a Decade to Stop Catastrophic Warming&hellip;&rdquo;
-          | The New York Times
-        </a>), and shifting away from burning fossil fuels to using
-        electricity
+        In simple terms, because we can scalably produce electricity without
+        emitting CO<sub>2</sub> and exacerbating the climate crisis. In fact,
+        <em>this decade</em> (the 2020s) is an especially crucial one for
+        tackling climate change (<a
+          href="https://www.nytimes.com/2023/03/20/climate/global-warming-ipcc-earth.html"
+        >
+          &ldquo;World Has Less Than a Decade to Stop Catastrophic
+          Warming&hellip;&rdquo; | The New York Times </a
+        >), and shifting away from burning fossil fuels to using electricity
         <strong>today</strong> is a crucial step in that journey.
       </p>
 
       <p class="constrained">
-        Even better, <strong>
+        Even better,
+        <strong>
           Illinois' grid in particular is already powered mostly by carbon-free
           energy
-        </strong> and is improving every year!
+        </strong>
+        and is improving every year!
       </p>
 
       <p>
-        This means that buildings using only electricity cause less emissions every year as the
-        power grid is moved to carbon-free sources, without any further changes to the building.
-        On the other hand, fossil-fuel powered appliances will continue to emit as long as they are
-        used.
+        This means that buildings using only electricity cause less emissions
+        every year as the power grid is moved to carbon-free sources, without
+        any further changes to the building. On the other hand, fossil-fuel
+        powered appliances will continue to emit as long as they are used.
       </p>
 
-
       <h2>Updates</h2>
 
       <p>
-        See our <g-link
-          to="/release-notes"
-          class="bold"
-        >Release Notes</g-link> page to see data
-        updates and other changes, or check activity on our
+        See our
+        <g-link to="/release-notes" class="bold">Release Notes</g-link> page to
+        see data updates and other changes, or check activity on our
         <a href="https://github.com/vkoves/electrify-chicago">
-          GitHub repository
-        </a>!
+          GitHub repository </a
+        >!
       </p>
 
       <h2>Other Interesting Pages</h2>
 
       <p>
-        There are a lot of interesting ways to view this data, here are a few pages that aren't
-        featured in our header but could be useful:
+        There are a lot of interesting ways to view this data, here are a few
+        pages that aren't featured in our header but could be useful:
       </p>
 
       <ul class="other-pages">
         <li>
-          <g-link to="/top-electricity-users">
-            Top Electricity Use
-          </g-link>
+          <g-link to="/top-electricity-users"> Top Electricity Use </g-link>
         </li>
         <li>
           <g-link to="/biggest-gas-free-buildings">
@@ -133,17 +127,14 @@ export default class About extends Vue {
 
       <p>
         Electrify Chicago is a volunteer project led by
-        <a href="https://viktorkoves.com/">
-          Viktor Köves
-        </a>, a Chicago native and climate developer
-        part of the volunteer team behind <a href="https://decarbmystate.com/">
-          DecarbMyState
-        </a>.
+        <a href="https://viktorkoves.com/"> Viktor Köves </a>, a Chicago native
+        and climate developer part of the volunteer team behind
+        <a href="https://decarbmystate.com/"> DecarbMyState </a>.
       </p>
 
       <p>
-        Electrify Chicago is an independent project and not affiliated with or endorsed by the City
-        of Chicago.
+        Electrify Chicago is an independent project and not affiliated with or
+        endorsed by the City of Chicago.
       </p>
 
       <h2>Sources</h2>
@@ -155,13 +146,15 @@ export default class About extends Vue {
           target="_blank"
           rel="noopener"
         >
-          Chicago Energy Benchmarking Data <NewTabIcon />
-        </a>, which is data collected and published under the
-        <a href="https://www.chicago.gov/city/en/progs/env/building-energy-benchmarking---transparency.html">
-          Chicago Energy Benchmarking Ordinance <NewTabIcon />
-        </a>. This site shows data for the year {{ LatestDataYear }}
-        (the latest available of March 2023) and filtered down to buildings
-        with total emissions > 1,000 metric tons CO<sub>2</sub>
+          Chicago Energy Benchmarking Data <NewTabIcon /> </a
+        >, which is data collected and published under the
+        <a
+          href="https://www.chicago.gov/city/en/progs/env/building-energy-benchmarking---transparency.html"
+        >
+          Chicago Energy Benchmarking Ordinance <NewTabIcon /> </a
+        >. This site shows data for the year {{ LatestDataYear }} (the latest
+        available of March 2023) and filtered down to buildings with total
+        emissions > 1,000 metric tons CO<sub>2</sub>
         equivalent.
       </p>
 
@@ -170,8 +163,8 @@ export default class About extends Vue {
       <p>
         Found a bug or have a feature request?
         <a href="https://github.com/vkoves/electrify-chicago/issues/new">
-          File an issue on the Electrify Chicago GitHub
-        </a>!
+          File an issue on the Electrify Chicago GitHub </a
+        >!
       </p>
     </div>
   </DefaultLayout>
@@ -179,7 +172,9 @@ export default class About extends Vue {
 
 <style lang="scss">
 .about-page {
-  h2 { margin-top: 1.75rem; }
+  h2 {
+    margin-top: 1.75rem;
+  }
 
   p.our-why {
     display: inline-block;
diff --git a/src/pages/BiggestBuildings.vue b/src/pages/BiggestBuildings.vue
index a8bc6245..fed1deae 100644
--- a/src/pages/BiggestBuildings.vue
+++ b/src/pages/BiggestBuildings.vue
@@ -15,7 +15,7 @@ import { LatestDataYear } from '../constants/globals.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Biggest Buildings' };
+    return { title: 'Biggest Buildings' };
   },
 })
 export default class BiggestBuildings extends Vue {
@@ -58,19 +58,17 @@ export default class BiggestBuildings extends Vue {
 
 <template>
   <DefaultLayout>
-    <h1
-      id="main-content"
-      tabindex="-1"
-    >
+    <h1 id="main-content" tabindex="-1">
       Top {{ $static.allBuilding.edges.length }} Buildings By Square Footage
     </h1>
 
     <p class="constrained -wide">
-      These are the biggest buildings in our dataset, which should encompass all of the largest
-      buildings in the city that submitted their energy use for {{ LatestDataYear }}.
-      Being a big building does basically guarantee that you use a lot of energy
-      (and emit a lot of CO<sub>2</sub>), but a lot of big buildings are very energy
-      efficient and use less energy per square foot than much smaller buildings!
+      These are the biggest buildings in our dataset, which should encompass all
+      of the largest buildings in the city that submitted their energy use for
+      {{ LatestDataYear }}. Being a big building does basically guarantee that
+      you use a lot of energy (and emit a lot of CO<sub>2</sub>), but a lot of
+      big buildings are very energy efficient and use less energy per square
+      foot than much smaller buildings!
     </p>
 
     <DataDisclaimer />
@@ -94,5 +92,4 @@ export default class BiggestBuildings extends Vue {
   </DefaultLayout>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/pages/BiggestGasFreeBuildings.vue b/src/pages/BiggestGasFreeBuildings.vue
index 0e4f2778..af2ad52c 100644
--- a/src/pages/BiggestGasFreeBuildings.vue
+++ b/src/pages/BiggestGasFreeBuildings.vue
@@ -16,11 +16,10 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Biggest Gas Free Buildings' };
+    return { title: 'Biggest Gas Free Buildings' };
   },
 })
-export default class TopGasUsers extends Vue {
-}
+export default class TopGasUsers extends Vue {}
 </script>
 
 <static-query>
@@ -64,23 +63,21 @@ export default class TopGasUsers extends Vue {
 
 <template>
   <DefaultLayout>
-    <h1
-      id="main-content"
-      tabindex="-1"
-    >
+    <h1 id="main-content" tabindex="-1">
       Chicago's {{ $static.allBuilding.edges.length }} Fully Gas Free Buildings
     </h1>
 
     <p class="constrained -wide">
-      These buildings are already all-electric, and feature some of the most famous buildings in
-      the city! If even the John Hancock center or Marina Towers can run off of only electricity,
-      your building can too.
+      These buildings are already all-electric, and feature some of the most
+      famous buildings in the city! If even the John Hancock center or Marina
+      Towers can run off of only electricity, your building can too.
     </p>
 
     <p class="constrained -wide">
-      <strong>Note:</strong> This list is of buildings that use neither fossil gas nor a district
-      steam system, since all district steam systems in the city are currently powered by burning
-      fossil gas (to the best of our knowledge).
+      <strong>Note:</strong> This list is of buildings that use neither fossil
+      gas nor a district steam system, since all district steam systems in the
+      city are currently powered by burning fossil gas (to the best of our
+      knowledge).
     </p>
 
     <DataDisclaimer />
@@ -94,5 +91,4 @@ export default class TopGasUsers extends Vue {
   </DefaultLayout>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/pages/Blog.vue b/src/pages/Blog.vue
index 5d5dba61..94b67e8c 100644
--- a/src/pages/Blog.vue
+++ b/src/pages/Blog.vue
@@ -11,7 +11,7 @@ import { LatestDataYear } from '../constants/globals.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Blog' };
+    return { title: 'Blog' };
   },
 })
 export default class About extends Vue {
@@ -21,27 +21,23 @@ export default class About extends Vue {
 <template>
   <DefaultLayout>
     <div class="layout-constrained blog-page">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        Electrify Chicago Blog
-      </h1>
+      <h1 id="main-content" tabindex="-1">Electrify Chicago Blog</h1>
 
       <ul>
         <li>
           <h2>
             <g-link to="/blog/millions-in-missed-fines">
-              City Of Chicago Failed to Collect $30 Million In Potential Fines from Building
-              Benchmarking Ordinance
+              City Of Chicago Failed to Collect $30 Million In Potential Fines
+              from Building Benchmarking Ordinance
             </g-link>
           </h2>
 
           <p>
-            The City of Chicago didn't fully enforce the benchmarking ordinance that requires the
-            owners of large building to report their emissions - and based on the fine amounts laid
-            out in the ordinance, we calculated the city missed out on millions and harmed
-            transparency and accountability.
+            The City of Chicago didn't fully enforce the benchmarking ordinance
+            that requires the owners of large building to report their emissions
+            - and based on the fine amounts laid out in the ordinance, we
+            calculated the city missed out on millions and harmed transparency
+            and accountability.
           </p>
         </li>
       </ul>
@@ -58,7 +54,10 @@ export default class About extends Vue {
   h2 a {
     text-decoration: none;
 
-    &:hover, &:focus { text-decoration: underline; }
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
   }
 }
 </style>
diff --git a/src/pages/CleanestBuildings.vue b/src/pages/CleanestBuildings.vue
index aeda541b..96fb1ac0 100644
--- a/src/pages/CleanestBuildings.vue
+++ b/src/pages/CleanestBuildings.vue
@@ -18,7 +18,7 @@ import BuildingBenchmarkStats from '../data/dist/building-benchmark-stats.json';
     DataSourceFootnote,
   },
   metaInfo() {
-    return { title:  'Cleanest Buildings' };
+    return { title: 'Cleanest Buildings' };
   },
 })
 export default class CleanestBuildings extends Vue {
@@ -61,26 +61,22 @@ export default class CleanestBuildings extends Vue {
 
 <template>
   <DefaultLayout>
-    <h1
-      id="main-content"
-      tabindex="-1"
-    >
-      Cleanest {{ $static.allBuilding.edges.length }} Buildings by Greenhouse Gas Intensity
+    <h1 id="main-content" tabindex="-1">
+      Cleanest {{ $static.allBuilding.edges.length }} Buildings by Greenhouse
+      Gas Intensity
     </h1>
 
     <p class="constrained">
-      The median building in our dataset emits {{ BuildingBenchmarkStats.GHGIntensity.median }}
-      CO<sub>2</sub> kg / square foot, but these buildings are Chicago's best in class and emit
+      The median building in our dataset emits
+      {{ BuildingBenchmarkStats.GHGIntensity.median }} CO<sub>2</sub> kg /
+      square foot, but these buildings are Chicago's best in class and emit
       <em>way</em> less! Some, like
-      <g-link to="/building-id/239096">
-        Marina Towers
-      </g-link>, are
-      large residential buildings, but other buildings in this list include offices, hotels, and
-      even schools like <g-link to="/building-id/101572">
-        King College Prep
-      </g-link>.
-      Most buildings in this list have an Energy Star score over 90, which means they are typically
-      officially certified as being energy-efficient.
+      <g-link to="/building-id/239096"> Marina Towers </g-link>, are large
+      residential buildings, but other buildings in this list include offices,
+      hotels, and even schools like
+      <g-link to="/building-id/101572"> King College Prep </g-link>. Most
+      buildings in this list have an Energy Star score over 90, which means they
+      are typically officially certified as being energy-efficient.
     </p>
 
     <DataDisclaimer />
@@ -91,5 +87,4 @@ export default class CleanestBuildings extends Vue {
   </DefaultLayout>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index d884cb71..9a7a2a79 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,296 +1,307 @@
-<script lang="ts">
-// Gridsome doesn't have types, so can't import it properly
-// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
-const Pager = require('gridsome').Pager;
-
-import { Component, Vue } from 'vue-property-decorator';
-
-import BuildingsTable from '~/components/BuildingsTable.vue';
-import DataDisclaimer from '~/components/DataDisclaimer.vue';
-import EmissionsBreakdownGraph from '~/components/EmissionsBreakdownGraph.vue';
-import NewTabIcon from '~/components/NewTabIcon.vue';
-
-// TODO: Figure out a way to get metaInfo working without any
-// https://github.com/xerebede/gridsome-starter-typescript/issues/37
-@Component<any>({
-  components: {
-    EmissionsBreakdownGraph,
-    BuildingsTable,
-    DataDisclaimer,
-    NewTabIcon,
-    Pager,
-  },
-  metaInfo() {
-    return { title:  'Home' };
-  },
-})
-export default class BiggestBuildings extends Vue {
-  /** Set by Gridsome to results of GraphQL query */
-  $page: any;
-
-  pageInput = 0;
-
-  created(): void {
-    this.pageInput = this.$page.allBuilding.pageInfo.currentPage;
-  }
-
-  jumpToPage(event: Event): void {
-    event.preventDefault();
-
-    window.location.href = `/${this.pageInput}`;
-  }
-}
-</script>
-
-<page-query>
-  query ($page: Int) {
-    allBuilding(
-      sortBy: "GHGIntensity", perPage: 15, page: $page
-    ) @paginate {
-      pageInfo {
-        hasNextPage
-        totalPages
-        currentPage
-        perPage
-        hasPreviousPage
-      }
-      edges {
-        node {
-          slugSource
-          ID
-          DataYear
-          PropertyName
-          Address
-          path
-          PrimaryPropertyType
-          GHGIntensity
-          GHGIntensityRank
-          GHGIntensityPercentileRank
-          TotalGHGEmissions
-          TotalGHGEmissionsRank
-          TotalGHGEmissionsPercentileRank
-          ElectricityUse
-          ElectricityUseRank
-          ElectricityUsePercentileRank
-          NaturalGasUse
-          NaturalGasUseRank
-          NaturalGasUsePercentileRank
-        }
-      }
-    }
-  }
-</page-query>
-
-<template>
-  <DefaultLayout>
-    <div class="homepage">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        Electrify Chicago
-      </h1>
-
-      <p class="tagline">
-        An independent tool for viewing City of Chicago building data
-      </p>
-
-      <div class="row">
-        <div>
-          <p class="constrained -wide main-paragraph">
-            <!-- TODO: Move to consolidated sources object-->
-            According to the
-            <a
-              ref="noopener"
-              href="https://www.chicago.gov/city/en/sites/climate-action-plan/home.html"
-              target="_blank"
-            >
-              2022 Chicago Climate Action Plan<NewTabIcon />
-            </a>,
-            <strong>69% of Chicago's emissions come from buildings</strong>, making
-            building emissions our biggest challenge and <em>our biggest opportunity</em> as a city
-            to tackle climate change. At Electrify Chicago, we showcase building performance using
-            publicly available data supplemented by community-submitted photographs and building
-            owners.
-          </p>
-
-          <p class="constrained -wide main-paragraph">
-            Start by looking at Chicago's buildings with the highest greenhouse gas
-            intensity i.e. emissions per square foot. Large, efficient, buildings can perform much
-            better than very inefficient small buildings on this metric.
-          </p>
-
-          <div class="announcements">
-            <div class="announce-panel -orange">
-              <h2>
-                <div class="regular-text-size">
-                  New Article
-                </div>
-                📰 $30 Million In Missed Fines
-              </h2>
-
-              <p>
-                The City Of Chicago failed to collect $30 million in potential fines from
-                the building benchmarking ordinance, reducing transparency and accountability.
-              </p>
-
-              <p>
-                <a
-                  href="/blog/millions-in-missed-fines"
-                  class="bold"
-                >Read Our Full Blog Post On Millions in Missed Fines</a>.
-              </p>
-            </div>
-          </div>
-
-
-          <h2>Chicago Buildings by Greenhouse Gas Intensity</h2>
-
-          <DataDisclaimer />
-        </div>
-
-        <EmissionsBreakdownGraph class="-desktop" />
-      </div>
-
-      <BuildingsTable :buildings="$page.allBuilding.edges" />
-
-      <div class="pager-cont">
-        <div>
-          <div class="page-number">
-            Page {{ $page.allBuilding.pageInfo.currentPage }} of
-            {{ $page.allBuilding.pageInfo.totalPages }}
-
-            (Building
-            #{{ 1 + ($page.allBuilding.pageInfo.currentPage - 1)
-              * $page.allBuilding.pageInfo.perPage }}
-            to #{{ ($page.allBuilding.pageInfo.currentPage - 1)
-              * $page.allBuilding.pageInfo.perPage + $page.allBuilding.edges.length }})
-          </div>
-
-          <Pager
-            class="pager"
-            :info="$page.allBuilding.pageInfo"
-          />
-        </div>
-
-        <form class="page-form search-form">
-          <label for="page-num">Go to Page</label>
-
-          <div class="input-cont">
-            <input
-              id="page-num"
-              v-model="pageInput"
-              type="number"
-            >
-            <button
-              type="submit"
-              @click="jumpToPage"
-            >
-              Jump
-            </button>
-          </div>
-        </form>
-      </div>
-
-      <p class="footnote">
-        Data Source:
-
-        <a
-          href="https://data.cityofchicago.org/Environment-Sustainable-Development/Chicago-Energy-Benchmarking/xq83-jr8c"
-          target="_blank"
-          rel="noopener"
-        >
-          Chicago Energy Benchmarking Data <NewTabIcon />
-        </a>
-      </p>
-    </div>
-  </DefaultLayout>
-</template>
-
-<style lang="scss">
-.homepage {
-  h1 { margin-bottom: 0; }
-
-  .tagline {
-    font-weight: bold;
-    margin-bottom: 1rem;
-  }
-
-  .row {
-    display: flex;
-    justify-content: space-between;
-    gap: 2rem;
-
-    p.main-paragraph { font-size: 1.125rem; }
-  }
-
-  .announcements {
-    display: flex;
-    gap: 1rem;
-    align-items: flex-start;
-
-    > * { flex-basis: 100%; }
-  }
-
-  .emissions-breakdown {
-    text-align: right;
-    margin-bottom: 1rem;
-    flex-shrink: 0;
-
-    &.-mobile { display: none; }
-    > img { height: 25rem; }
-    p { margin: 0; }
-  }
-
-  .page-form {
-    input, button { height: 2rem; }
-
-    label {
-      display: block;
-      margin-bottom: 0.25rem;
-      font-size: 0.825rem;
-      font-weight: bold;
-    }
-
-    input { width: 3.5rem;}
-  }
-
-  .pager-cont {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-top: 1rem;
-    gap: 1rem;
-
-    .pager { margin-top: 0; }
-
-    .page-number {
-      font-weight: bold;
-      font-size: smaller;
-      margin-bottom: 0.25rem;
-    }
-  }
-
-  @media (max-width: $mobile-max-width) {
-    .announcements { flex-direction: column; }
-
-    .row {
-      display: block;
-
-      p.main-paragraph { font-size: 0.825rem; }
-    }
-
-    .emissions-breakdown {
-      width: 100%;
-      text-align: center;
-
-      &.-desktop { display: none; }
-    }
-
-    .pager-cont {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-}
-</style>
+<script lang="ts">
+// Gridsome doesn't have types, so can't import it properly
+// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
+const Pager = require('gridsome').Pager;
+
+import { Component, Vue } from 'vue-property-decorator';
+
+import BuildingsTable from '~/components/BuildingsTable.vue';
+import DataDisclaimer from '~/components/DataDisclaimer.vue';
+import EmissionsBreakdownGraph from '~/components/EmissionsBreakdownGraph.vue';
+import NewTabIcon from '~/components/NewTabIcon.vue';
+
+// TODO: Figure out a way to get metaInfo working without any
+// https://github.com/xerebede/gridsome-starter-typescript/issues/37
+@Component<any>({
+  components: {
+    EmissionsBreakdownGraph,
+    BuildingsTable,
+    DataDisclaimer,
+    NewTabIcon,
+    Pager,
+  },
+  metaInfo() {
+    return { title: 'Home' };
+  },
+})
+export default class BiggestBuildings extends Vue {
+  /** Set by Gridsome to results of GraphQL query */
+  $page: any;
+
+  pageInput = 0;
+
+  created(): void {
+    this.pageInput = this.$page.allBuilding.pageInfo.currentPage;
+  }
+
+  jumpToPage(event: Event): void {
+    event.preventDefault();
+
+    window.location.href = `/${this.pageInput}`;
+  }
+}
+</script>
+
+<page-query>
+  query ($page: Int) {
+    allBuilding(
+      sortBy: "GHGIntensity", perPage: 15, page: $page
+    ) @paginate {
+      pageInfo {
+        hasNextPage
+        totalPages
+        currentPage
+        perPage
+        hasPreviousPage
+      }
+      edges {
+        node {
+          slugSource
+          ID
+          DataYear
+          PropertyName
+          Address
+          path
+          PrimaryPropertyType
+          GHGIntensity
+          GHGIntensityRank
+          GHGIntensityPercentileRank
+          TotalGHGEmissions
+          TotalGHGEmissionsRank
+          TotalGHGEmissionsPercentileRank
+          ElectricityUse
+          ElectricityUseRank
+          ElectricityUsePercentileRank
+          NaturalGasUse
+          NaturalGasUseRank
+          NaturalGasUsePercentileRank
+        }
+      }
+    }
+  }
+</page-query>
+
+<template>
+  <DefaultLayout>
+    <div class="homepage">
+      <h1 id="main-content" tabindex="-1">Electrify Chicago</h1>
+
+      <p class="tagline">
+        An independent tool for viewing City of Chicago building data
+      </p>
+
+      <div class="row">
+        <div>
+          <p class="constrained -wide main-paragraph">
+            <!-- TODO: Move to consolidated sources object-->
+            According to the
+            <a
+              ref="noopener"
+              href="https://www.chicago.gov/city/en/sites/climate-action-plan/home.html"
+              target="_blank"
+            >
+              2022 Chicago Climate Action Plan<NewTabIcon /> </a
+            >, <strong>69% of Chicago's emissions come from buildings</strong>,
+            making building emissions our biggest challenge and
+            <em>our biggest opportunity</em> as a city to tackle climate change.
+            At Electrify Chicago, we showcase building performance using
+            publicly available data supplemented by community-submitted
+            photographs and building owners.
+          </p>
+
+          <p class="constrained -wide main-paragraph">
+            Start by looking at Chicago's buildings with the highest greenhouse
+            gas intensity i.e. emissions per square foot. Large, efficient,
+            buildings can perform much better than very inefficient small
+            buildings on this metric.
+          </p>
+
+          <div class="announcements">
+            <div class="announce-panel -orange">
+              <h2>
+                <div class="regular-text-size">New Article</div>
+                📰 $30 Million In Missed Fines
+              </h2>
+
+              <p>
+                The City Of Chicago failed to collect $30 million in potential
+                fines from the building benchmarking ordinance, reducing
+                transparency and accountability.
+              </p>
+
+              <p>
+                <a href="/blog/millions-in-missed-fines" class="bold"
+                  >Read Our Full Blog Post On Millions in Missed Fines</a
+                >.
+              </p>
+            </div>
+          </div>
+
+          <h2>Chicago Buildings by Greenhouse Gas Intensity</h2>
+
+          <DataDisclaimer />
+        </div>
+
+        <EmissionsBreakdownGraph class="-desktop" />
+      </div>
+
+      <BuildingsTable :buildings="$page.allBuilding.edges" />
+
+      <div class="pager-cont">
+        <div>
+          <div class="page-number">
+            Page {{ $page.allBuilding.pageInfo.currentPage }} of
+            {{ $page.allBuilding.pageInfo.totalPages }}
+
+            (Building #{{
+              1 +
+              ($page.allBuilding.pageInfo.currentPage - 1) *
+                $page.allBuilding.pageInfo.perPage
+            }}
+            to #{{
+              ($page.allBuilding.pageInfo.currentPage - 1) *
+                $page.allBuilding.pageInfo.perPage +
+              $page.allBuilding.edges.length
+            }})
+          </div>
+
+          <Pager class="pager" :info="$page.allBuilding.pageInfo" />
+        </div>
+
+        <form class="page-form search-form">
+          <label for="page-num">Go to Page</label>
+
+          <div class="input-cont">
+            <input id="page-num" v-model="pageInput" type="number" />
+            <button type="submit" @click="jumpToPage">Jump</button>
+          </div>
+        </form>
+      </div>
+
+      <p class="footnote">
+        Data Source:
+
+        <a
+          href="https://data.cityofchicago.org/Environment-Sustainable-Development/Chicago-Energy-Benchmarking/xq83-jr8c"
+          target="_blank"
+          rel="noopener"
+        >
+          Chicago Energy Benchmarking Data <NewTabIcon />
+        </a>
+      </p>
+    </div>
+  </DefaultLayout>
+</template>
+
+<style lang="scss">
+.homepage {
+  h1 {
+    margin-bottom: 0;
+  }
+
+  .tagline {
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+    gap: 2rem;
+
+    p.main-paragraph {
+      font-size: 1.125rem;
+    }
+  }
+
+  .announcements {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+
+    > * {
+      flex-basis: 100%;
+    }
+  }
+
+  .emissions-breakdown {
+    text-align: right;
+    margin-bottom: 1rem;
+    flex-shrink: 0;
+
+    &.-mobile {
+      display: none;
+    }
+    > img {
+      height: 25rem;
+    }
+    p {
+      margin: 0;
+    }
+  }
+
+  .page-form {
+    input,
+    button {
+      height: 2rem;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 0.25rem;
+      font-size: 0.825rem;
+      font-weight: bold;
+    }
+
+    input {
+      width: 3.5rem;
+    }
+  }
+
+  .pager-cont {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: 1rem;
+    gap: 1rem;
+
+    .pager {
+      margin-top: 0;
+    }
+
+    .page-number {
+      font-weight: bold;
+      font-size: smaller;
+      margin-bottom: 0.25rem;
+    }
+  }
+
+  @media (max-width: $mobile-max-width) {
+    .announcements {
+      flex-direction: column;
+    }
+
+    .row {
+      display: block;
+
+      p.main-paragraph {
+        font-size: 0.825rem;
+      }
+    }
+
+    .emissions-breakdown {
+      width: 100%;
+      text-align: center;
+
+      &.-desktop {
+        display: none;
+      }
+    }
+
+    .pager-cont {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}
+</style>
diff --git a/src/pages/LargeOwners.vue b/src/pages/LargeOwners.vue
index f249c650..00113a2f 100644
--- a/src/pages/LargeOwners.vue
+++ b/src/pages/LargeOwners.vue
@@ -15,11 +15,11 @@ import { BuildingOwners } from '../constants/buildings-custom-info.constant.vue'
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Large Owners' };
+    return { title: 'Large Owners' };
   },
 })
 export default class LargeOwners extends Vue {
-    BuildingOwners = BuildingOwners;
+  BuildingOwners = BuildingOwners;
 }
 </script>
 
@@ -56,22 +56,18 @@ export default class LargeOwners extends Vue {
 <template>
   <DefaultLayout>
     <div class="building-owners">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        Large Building Owners
-      </h1>
+      <h1 id="main-content" tabindex="-1">Large Building Owners</h1>
 
       <p class="constrained -wide">
-        These building owners own multiple properties in the City of Chicago benchmarked Buildings
-        data set, making them responsible for a larger total of emissions than individual building
-        owners.
+        These building owners own multiple properties in the City of Chicago
+        benchmarked Buildings data set, making them responsible for a larger
+        total of emissions than individual building owners.
       </p>
 
       <p class="constrained -wide">
-        <strong>Note:</strong> All building owners are manually tagged through public data, like
-        university building directories, and are thus may be an incomplete list.
+        <strong>Note:</strong> All building owners are manually tagged through
+        public data, like university building directories, and are thus may be
+        an incomplete list.
       </p>
 
       <p class="constrained -wide">
@@ -80,24 +76,15 @@ export default class LargeOwners extends Vue {
           ref="noopener"
           href="https://github.com/vkoves/electrify-chicago/issues/new"
           target="_blank"
-        >File an issue on our GitHub! <NewTabIcon />
+          >File an issue on our GitHub! <NewTabIcon />
         </a>
       </p>
 
       <!-- Loop through building owners -->
       <ul class="owners-list">
-        <li
-          v-for="owner in BuildingOwners"
-          :key="owner.key"
-        >
-          <g-link
-            :to="'/owner/' + owner.key"
-            class="owner-tile"
-          >
-            <img
-              :src="owner.logoLarge"
-              :alt="owner.name"
-            >
+        <li v-for="owner in BuildingOwners" :key="owner.key">
+          <g-link :to="'/owner/' + owner.key" class="owner-tile">
+            <img :src="owner.logoLarge" :alt="owner.name" />
           </g-link>
         </li>
       </ul>
@@ -116,7 +103,9 @@ export default class LargeOwners extends Vue {
     margin-top: 2rem;
     list-style: none;
 
-    a { text-decoration: none; }
+    a {
+      text-decoration: none;
+    }
 
     .owner-tile {
       display: flex;
@@ -145,7 +134,8 @@ export default class LargeOwners extends Vue {
         text-decoration: none;
       }
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: $grey-light;
       }
     }
diff --git a/src/pages/Map.vue b/src/pages/Map.vue
index 468c3a87..7e6f4aba 100644
--- a/src/pages/Map.vue
+++ b/src/pages/Map.vue
@@ -11,7 +11,11 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
 import DataSourceFootnote from '~/components/DataSourceFootnote.vue';
 
 import {
-  IBuildingBenchmarkStats, IBuilding, IBuildingNode, getOverallRankEmoji, RankConfig,
+  IBuildingBenchmarkStats,
+  IBuilding,
+  IBuildingNode,
+  getOverallRankEmoji,
+  RankConfig,
 } from '../common-functions.vue';
 
 import BuildingBenchmarkStats from '../data/dist/building-benchmark-stats.json';
@@ -33,7 +37,7 @@ const GoogleMapsScriptId = 'google-maps-script';
   },
   metaInfo() {
     return {
-      title:  'Map',
+      title: 'Map',
       link: [
         {
           // Leaflet CSS
@@ -50,12 +54,13 @@ export default class MapPage extends Vue {
   static readonly OneMileInMeters = 1609.344 /* eq. to 1mi */;
 
   /** Expose stats to template */
-  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats = BuildingBenchmarkStats;
+  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats =
+    BuildingBenchmarkStats;
 
   readonly MapConfig = {
     DefaultZoom: 11,
     // Center of Chicago at Madison & State
-    Center: [41.86, -87.627831] as [ number, number ],
+    Center: [41.86, -87.627831] as [number, number],
     // How many px of scroll equals one zoom level - default is 60, we go higher since the whole
     // dataset is just Chicago
     WheelPxPerZoomLevel: 480,
@@ -69,8 +74,8 @@ export default class MapPage extends Vue {
 
   /** VueJS template refs */
   $refs!: {
-    mapPopup: any,
-    googleMapsSearchInput: any,
+    mapPopup: any;
+    googleMapsSearchInput: any;
   };
 
   Leaflet!: typeof Leaflet;
@@ -83,7 +88,7 @@ export default class MapPage extends Vue {
 
   formZip: number | string = '';
   /** The coordinates of the place the user searched in the Google Maps box */
-  formPointCoords: [ number, number ] | null = null;
+  formPointCoords: [number, number] | null = null;
   formSearchDistanceMiles = 1;
 
   map?: Leaflet.Map;
@@ -122,21 +127,20 @@ export default class MapPage extends Vue {
     this.setupMapIcons();
 
     this.map = this.Leaflet.map('buildings-map', {
-        zoomDelta: this.MapConfig.ZoomDelta,
-        wheelPxPerZoomLevel: this.MapConfig.WheelPxPerZoomLevel,
-        zoomSnap: this.MapConfig.ZoomSnap,
-      })
-      .setView(this.MapConfig.Center, this.MapConfig.DefaultZoom);
+      zoomDelta: this.MapConfig.ZoomDelta,
+      wheelPxPerZoomLevel: this.MapConfig.WheelPxPerZoomLevel,
+      zoomSnap: this.MapConfig.ZoomSnap,
+    }).setView(this.MapConfig.Center, this.MapConfig.DefaultZoom);
 
     const UsingGoogle = true;
 
     if (UsingGoogle) {
       this.setupGoogleMutant();
-    }
-    else {
+    } else {
       this.Leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        attribution:
+          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       }).addTo(this.map!);
     }
 
@@ -156,11 +160,11 @@ export default class MapPage extends Vue {
     });
 
     const CustomMarkerIcon = this.Leaflet.Icon.extend({
-        options: {
-            iconSize:     [25, 41],
-            iconAnchor:   [13, 10],
-            shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-        },
+      options: {
+        iconSize: [25, 41],
+        iconAnchor: [13, 10],
+        shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+      },
     });
 
     this.icons.red = new (CustomMarkerIcon as any)({
@@ -187,10 +191,10 @@ export default class MapPage extends Vue {
   setupGoogleMutant(): void {
     (this.Leaflet.gridLayer as any)
       .googleMutant({
-        type: "roadmap", // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
+        type: 'roadmap', // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
         styles: [
           // Disable icons for other points of interest, but keep neighborhood & street labels
-          { elementType: "labels.icon", stylers: [{ visibility: "off" }] },
+          { elementType: 'labels.icon', stylers: [{ visibility: 'off' }] },
         ],
       })
       .addTo(this.map);
@@ -200,7 +204,8 @@ export default class MapPage extends Vue {
   setupGoogleMapsSearch(): void {
     // Create a <script> element to import Google Maps, then hook into it for the autocomplete input
     const googleMapsScriptElem = document.createElement('script');
-    googleMapsScriptElem.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyChJYejLT7Vxh_UZhJkccsy0xqZTHX8fzU&libraries=places';
+    googleMapsScriptElem.src =
+      'https://maps.googleapis.com/maps/api/js?key=AIzaSyChJYejLT7Vxh_UZhJkccsy0xqZTHX8fzU&libraries=places';
     document.body.appendChild(googleMapsScriptElem);
 
     googleMapsScriptElem.onload = () => {
@@ -208,9 +213,9 @@ export default class MapPage extends Vue {
       const google = (window as any).google;
 
       // NW edge of O'Hare down to long of South edge
-      const southwest = { lat: 41.644624, lng: -87.939760 };
+      const southwest = { lat: 41.644624, lng: -87.93976 };
       // SE edge of Chicago but up at Northern edge of O'hare
-      const northeast = { lat: 42.007430, lng: -87.524611 };
+      const northeast = { lat: 42.00743, lng: -87.524611 };
       const chicagoBounds = new google.maps.LatLngBounds(southwest, northeast);
 
       // Limit search to Chicago strictly, if we can't find an address in Chicago we should show
@@ -222,10 +227,13 @@ export default class MapPage extends Vue {
 
       // Setup places searchbox, learn more here:
       // https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
-      const searchBox = new google.maps.places.SearchBox(searchInput, searchOptions);
+      const searchBox = new google.maps.places.SearchBox(
+        searchInput,
+        searchOptions,
+      );
 
       // Hook into places being selected
-      searchBox.addListener("places_changed", () => {
+      searchBox.addListener('places_changed', () => {
         const places = searchBox.getPlaces();
 
         if (places.length === 0) {
@@ -247,7 +255,7 @@ export default class MapPage extends Vue {
    * Show buildings around a given point, so users can put in an address and see what properties are
    * in the dataset nearby
    */
-  showBuildingsAroundPoint(coordinates: [ number, number ]): void {
+  showBuildingsAroundPoint(coordinates: [number, number]): void {
     this.clearMarkers();
 
     const MarkerOptions: Leaflet.MarkerOptions = {
@@ -257,30 +265,36 @@ export default class MapPage extends Vue {
     };
 
     // Create a default marker for the search location
-    this.Leaflet.marker(coordinates, MarkerOptions)
-      .addTo(this.mainFeatureGroup!);
+    this.Leaflet.marker(coordinates, MarkerOptions).addTo(
+      this.mainFeatureGroup!,
+    );
 
-    const SearchRadiusMeters = MapPage.OneMileInMeters * this.formSearchDistanceMiles;
-    this.Leaflet.circle(coordinates, { radius: SearchRadiusMeters }).addTo(this.mainFeatureGroup!);
+    const SearchRadiusMeters =
+      MapPage.OneMileInMeters * this.formSearchDistanceMiles;
+    this.Leaflet.circle(coordinates, { radius: SearchRadiusMeters }).addTo(
+      this.mainFeatureGroup!,
+    );
 
     const inputPoint = this.Leaflet.latLng(coordinates);
     const buildingNodes = this.$page.allBuilding.edges;
 
     // Calculate the distance to each building and filter by those within a mile
-    const pointsNearInputPoint = buildingNodes.filter((buildingNode: IBuildingNode) => {
-      // Make sure we actually have coordinates before we do calculations on them
-      const latFloat = parseFloat(buildingNode.node.Latitude);
-      const lonFloat = parseFloat(buildingNode.node.Longitude);
-      if (!isNaN(latFloat) && !isNaN(lonFloat)) {
-        const buildingPoint = this.Leaflet.latLng(latFloat, lonFloat);
-        const buildingDistanceToPointMeters = buildingPoint.distanceTo(inputPoint);
-
-        return buildingDistanceToPointMeters <= SearchRadiusMeters;
-      } 
-      else {
-        return false;
-      }
-    });
+    const pointsNearInputPoint = buildingNodes.filter(
+      (buildingNode: IBuildingNode) => {
+        // Make sure we actually have coordinates before we do calculations on them
+        const latFloat = parseFloat(buildingNode.node.Latitude);
+        const lonFloat = parseFloat(buildingNode.node.Longitude);
+        if (!isNaN(latFloat) && !isNaN(lonFloat)) {
+          const buildingPoint = this.Leaflet.latLng(latFloat, lonFloat);
+          const buildingDistanceToPointMeters =
+            buildingPoint.distanceTo(inputPoint);
+
+          return buildingDistanceToPointMeters <= SearchRadiusMeters;
+        } else {
+          return false;
+        }
+      },
+    );
 
     this.addBuildingsToMap(pointsNearInputPoint);
     this.autofitMap();
@@ -299,15 +313,21 @@ export default class MapPage extends Vue {
 
     this.addBuildingsToMap(topBuildings);
 
-    this.mapStatus = `Top ${MapPage.MaxBuildingsCount} highest GHG intensity buildings of `
-      + `${buildingNodes.length.toLocaleString()} total`;
+    this.mapStatus =
+      `Top ${MapPage.MaxBuildingsCount} highest GHG intensity buildings of ` +
+      `${buildingNodes.length.toLocaleString()} total`;
   }
 
   setupZipCodes(): void {
     const buildingNodes = this.$page.allBuilding.edges;
     const allZipCodes: Array<number> = buildingNodes
-      .filter((buildingNode: IBuildingNode) => (buildingNode.node.ZIPCode as string).trim().length)
-      .map((buildingNode: IBuildingNode) => parseInt(buildingNode.node.ZIPCode as string));
+      .filter(
+        (buildingNode: IBuildingNode) =>
+          (buildingNode.node.ZIPCode as string).trim().length,
+      )
+      .map((buildingNode: IBuildingNode) =>
+        parseInt(buildingNode.node.ZIPCode as string),
+      );
 
     this.zipCodes = this.unique(allZipCodes).sort();
   }
@@ -344,14 +364,14 @@ export default class MapPage extends Vue {
       this.clearSearch();
 
       const buildingNodes = this.$page.allBuilding.edges;
-      const filteredBuildings = buildingNodes
-        .filter((buildingNode: IBuildingNode) =>
-          buildingNode.node.ZIPCode === this.formZip.toString());
+      const filteredBuildings = buildingNodes.filter(
+        (buildingNode: IBuildingNode) =>
+          buildingNode.node.ZIPCode === this.formZip.toString(),
+      );
 
       this.addBuildingsToMap(filteredBuildings);
       this.mapStatus = `Buildings in Zipcode ${this.formZip} (according to dataset)`;
-    }
-    else {
+    } else {
       this.showBuildingsAroundPoint(this.formPointCoords!);
       this.mapStatus = `Buildings within ${this.formSearchDistanceMiles} mile of point`;
     }
@@ -364,31 +384,34 @@ export default class MapPage extends Vue {
    * existing markers
    */
   addBuildingsToMap(buildingNodes: Array<IBuildingNode>): void {
-    buildingNodes
-      .forEach((buildingNode: IBuildingNode) => {
-        const currBuilding: IBuilding = buildingNode.node;
+    buildingNodes.forEach((buildingNode: IBuildingNode) => {
+      const currBuilding: IBuilding = buildingNode.node;
 
-        const buildingCoords: [ number, number ] = [
-          parseFloat(currBuilding.Latitude),
-          parseFloat(currBuilding.Longitude),
-        ];
+      const buildingCoords: [number, number] = [
+        parseFloat(currBuilding.Latitude),
+        parseFloat(currBuilding.Longitude),
+      ];
 
-        const MarkerOptions: Leaflet.MarkerOptions = {
-          riseOnHover: true,
-          icon: this.getBuildingIcon(currBuilding),
-        };
+      const MarkerOptions: Leaflet.MarkerOptions = {
+        riseOnHover: true,
+        icon: this.getBuildingIcon(currBuilding),
+      };
 
-        const marker = this.Leaflet.marker(buildingCoords, MarkerOptions)
-          .addTo(this.mainFeatureGroup!);
+      const marker = this.Leaflet.marker(buildingCoords, MarkerOptions).addTo(
+        this.mainFeatureGroup!,
+      );
 
-        marker.bindPopup(() => {
+      marker.bindPopup(
+        () => {
           this.currBuilding = currBuilding;
           return this.$refs.mapPopup;
-        }, {
+        },
+        {
           // Fix popup max-width
-          maxWidth: "auto",
-        } as any);
-      });
+          maxWidth: 'auto',
+        } as any,
+      );
+    });
   }
 
   /**
@@ -396,19 +419,18 @@ export default class MapPage extends Vue {
    * while an alarm is red)
    */
   getBuildingIcon(building: IBuilding): Leaflet.Icon {
-    const rankEmoji: string | undefined
-      = getOverallRankEmoji(building, this.BuildingBenchmarkStats)?.emoji;
+    const rankEmoji: string | undefined = getOverallRankEmoji(
+      building,
+      this.BuildingBenchmarkStats,
+    )?.emoji;
 
     if (rankEmoji === RankConfig.AlarmEmoji) {
       return this.icons.red;
-    }
-    else if (rankEmoji === RankConfig.FlagEmoji) {
+    } else if (rankEmoji === RankConfig.FlagEmoji) {
       return this.icons.orange;
-    }
-    else if (rankEmoji === RankConfig.TrophyEmoji) {
+    } else if (rankEmoji === RankConfig.TrophyEmoji) {
       return this.icons.green;
-    }
-    else {
+    } else {
       return this.icons.blue;
     }
   }
@@ -475,12 +497,7 @@ export default class MapPage extends Vue {
 <template>
   <DefaultLayout>
     <div class="map-page">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        Buildings Map
-      </h1>
+      <h1 id="main-content" tabindex="-1">Buildings Map</h1>
 
       <DataDisclaimer />
 
@@ -489,10 +506,7 @@ export default class MapPage extends Vue {
         <form>
           <h2>Filter Buildings</h2>
 
-          <p
-            v-if="errorMessage"
-            class="error-message"
-          >
+          <p v-if="errorMessage" class="error-message">
             {{ errorMessage }}
           </p>
 
@@ -503,82 +517,47 @@ export default class MapPage extends Vue {
             type="text"
             placeholder="Type address or place"
             @keydown.enter="cancelEvent"
-          >
+          />
 
           <label for="search-dist">Search Distance</label>
-          <select
-            id="search-dist"
-            v-model="formSearchDistanceMiles"
-          >
-            <option :value="0.25">
-              1/4 mile
-            </option>
-            <option :value="0.5">
-              1/2 mile
-            </option>
-            <option :value="1">
-              1 mile
-            </option>
-            <option :value="2">
-              2 miles
-            </option>
+          <select id="search-dist" v-model="formSearchDistanceMiles">
+            <option :value="0.25">1/4 mile</option>
+            <option :value="0.5">1/2 mile</option>
+            <option :value="1">1 mile</option>
+            <option :value="2">2 miles</option>
           </select>
 
-          <hr>
+          <hr />
 
           <label for="zipcode">Or Filter Zip Code</label>
-          <select
-            id="zipcode"
-            v-model="formZip"
-          >
-            <option
-              disabled
-              :value="''"
-            >
-              Choose Zipcode
-            </option>
-            <option
-              v-for="zipcode in zipCodes"
-              :key="zipcode"
-              :value="zipcode"
-            >
+          <select id="zipcode" v-model="formZip">
+            <option disabled :value="''">Choose Zipcode</option>
+            <option v-for="zipcode in zipCodes" :key="zipcode" :value="zipcode">
               {{ zipcode }}
-            </option>"
+            </option>
+            "
           </select>
 
           <div class="button-row">
-            <button
-              type="button"
-              @click="reset"
-            >
-              Reset
-            </button>
+            <button type="button" @click="reset">Reset</button>
 
-            <button
-              type="submit"
-              @click="applyFilters"
-            >
-              Submit
-            </button>
+            <button type="submit" @click="applyFilters">Submit</button>
           </div>
         </form>
       </details>
 
-      <p class="map-status">
-        <strong>Filtering By:</strong> {{ mapStatus }}
-      </p>
+      <p class="map-status"><strong>Filtering By:</strong> {{ mapStatus }}</p>
 
       <div id="buildings-map" />
 
       <div v-show="false">
         <!-- The map popup used by Leaflet, so we can do Vue things -->
-        <div
-          ref="mapPopup"
-          class="map-popup"
-        >
+        <div ref="mapPopup" class="map-popup">
           <div v-if="currBuilding">
             <h1>
-              {{ currBuilding.PropertyName || currBuilding.Address }}&nbsp;<OverallRankEmoji
+              {{
+                currBuilding.PropertyName || currBuilding.Address
+              }}&nbsp;<OverallRankEmoji
                 :building="currBuilding"
                 :stats="BuildingBenchmarkStats"
               />
@@ -627,10 +606,9 @@ export default class MapPage extends Vue {
               </div>
             </div>
 
-            <a
-              :href="currBuilding.path"
-              class="details-link"
-            >View More Details</a>
+            <a :href="currBuilding.path" class="details-link"
+              >View More Details</a
+            >
           </div>
         </div>
       </div>
@@ -683,13 +661,16 @@ export default class MapPage extends Vue {
       font-weight: bold;
     }
 
-    input[type="text"] {
+    input[type='text'] {
       width: 100%;
       padding: 0.5rem 1rem;
       box-sizing: border-box;
     }
 
-    label, select { display: block; }
+    label,
+    select {
+      display: block;
+    }
 
     label {
       font-size: 0.825rem;
@@ -739,7 +720,8 @@ export default class MapPage extends Vue {
     .building-img-cont {
       text-align: left;
 
-      &, img {
+      &,
+      img {
         max-width: 10rem;
       }
 
diff --git a/src/pages/ReleaseNotes.vue b/src/pages/ReleaseNotes.vue
index 62cea5ac..b1a6bc78 100644
--- a/src/pages/ReleaseNotes.vue
+++ b/src/pages/ReleaseNotes.vue
@@ -10,55 +10,45 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'About Us' };
+    return { title: 'About Us' };
   },
 })
-export default class About extends Vue {
-}
+export default class About extends Vue {}
 </script>
 <template>
   <DefaultLayout>
     <div class="release-notes-page">
       <section class="layout-constrained">
-        <h1
-          id="main-content"
-          tabindex="-1"
-        >
-          Release Notes
-        </h1>
+        <h1 id="main-content" tabindex="-1">Release Notes</h1>
 
-        <h2>August 30th, 2024 - New Visualizations for Historic Changes & Energy Mix</h2>
+        <h2>
+          August 30th, 2024 - New Visualizations for Historic Changes & Energy
+          Mix
+        </h2>
 
         <p>
-          We added new graphs to help visualize how buildings have changed in their emissions,
-          emissions intensity, and energy use over time, and a new pie chart that shows the mix of
-          types of energy a building consumes, making it easy to see at a glance if a building is
-          mostly using electricity, fossil gas, or something else!
+          We added new graphs to help visualize how buildings have changed in
+          their emissions, emissions intensity, and energy use over time, and a
+          new pie chart that shows the mix of types of energy a building
+          consumes, making it easy to see at a glance if a building is mostly
+          using electricity, fossil gas, or something else!
         </p>
       </section>
 
       <div class="two-cols">
         <div>
-          <a
-            href="/release-notes/merch-mart-pre-graphs.webp"
-            target="_blank"
-          >
+          <a href="/release-notes/merch-mart-pre-graphs.webp" target="_blank">
             <img
               class="-shadowed"
               src="/release-notes/merch-mart-pre-graphs.webp"
               alt="Electrify Chicago Merchandise Mart Page showing just stat tiles with no graphs."
-            >
+            />
           </a>
 
-          <p class="bold">
-            Before
-          </p>
+          <p class="bold">Before</p>
         </div>
         <div>
-          <a
-            href="/release-notes/merch-mart-post-graphs.webp"
-            target="_blank"
-          >
+          <a href="/release-notes/merch-mart-post-graphs.webp" target="_blank">
             <img
               class="-shadowed"
               src="/release-notes/merch-mart-post-graphs.webp"
@@ -66,12 +56,10 @@ export default class About extends Vue {
               showing greenhouse gas intensity and total emissions have improved over time, and
               that Merch Mart's energy use is 44% electricity, 40% fossil gas, and 16% district
               chilling"
-            >
+            />
           </a>
 
-          <p class="bold">
-            After
-          </p>
+          <p class="bold">After</p>
         </div>
       </div>
 
@@ -79,33 +67,40 @@ export default class About extends Vue {
         <h2>April 2nd, 2024 - Data Update to 2022</h2>
 
         <p>
-          Updated the source data to the year 2022, and dropped the filter limiting buildings to the
-          latest year on most pages, so that dirty buildings that didn't report in 2022 still show
-          up on our largest emitter lists.
-
-          <strong>Buildings shown that have old data now use a mantel clock emoji (🕰️)</strong>.
+          Updated the source data to the year 2022, and dropped the filter
+          limiting buildings to the latest year on most pages, so that dirty
+          buildings that didn't report in 2022 still show up on our largest
+          emitter lists.
+
+          <strong
+            >Buildings shown that have old data now use a mantel clock emoji
+            (🕰️)</strong
+          >.
         </p>
 
         <h2>August 30th, 2023 - Data Update to 2021</h2>
 
         <p>
-          Updated the source data to the year 2021, which prevents being able to access 2020 data
-          (for now) but also adds all reported buildings, removing the filter for emissions > 1,000
-          tons. Additionally, buildings that did <em>not</em> report in 2020 will have their latest
-          year of data shown, so only buildings with data in 2020 and 2021 have data loss.
+          Updated the source data to the year 2021, which prevents being able to
+          access 2020 data (for now) but also adds all reported buildings,
+          removing the filter for emissions > 1,000 tons. Additionally,
+          buildings that did <em>not</em> report in 2020 will have their latest
+          year of data shown, so only buildings with data in 2020 and 2021 have
+          data loss.
         </p>
 
         <p>
-          We will be working on showing historical data, including comparisons, in a future update.
+          We will be working on showing historical data, including comparisons,
+          in a future update.
         </p>
 
-        <hr>
+        <hr />
 
         <p>
           Found a bug or have a feature request?
           <a href="https://github.com/vkoves/electrify-chicago/issues/new">
-            File an issue on the Electrify Chicago GitHub
-          </a>!
+            File an issue on the Electrify Chicago GitHub </a
+          >!
         </p>
       </section>
     </div>
@@ -119,7 +114,9 @@ export default class About extends Vue {
     justify-content: center;
     gap: 2%;
 
-    > * { width: 49%; }
+    > * {
+      width: 49%;
+    }
   }
 
   @media (max-width: $mobile-max-width) {
@@ -127,7 +124,9 @@ export default class About extends Vue {
       flex-direction: column;
       gap: 1rem;
 
-      > * { width: 100%; }
+      > * {
+        width: 100%;
+      }
     }
   }
 }
diff --git a/src/pages/RetrofitChicagoParticipants.vue b/src/pages/RetrofitChicagoParticipants.vue
index 48b60662..13a0f82f 100644
--- a/src/pages/RetrofitChicagoParticipants.vue
+++ b/src/pages/RetrofitChicagoParticipants.vue
@@ -7,11 +7,14 @@ import DataSourceFootnote from '~/components/DataSourceFootnote.vue';
 import NewTabIcon from '~/components/NewTabIcon.vue';
 import { IBuilding } from '../common-functions.vue';
 import {
-  BuildingsCustomInfo, IBuildingCustomInfo,
+  BuildingsCustomInfo,
+  IBuildingCustomInfo,
   BuildingTags,
 } from '../constants/buildings-custom-info.constant.vue';
 
-interface IBuildingEdge { node: IBuilding; }
+interface IBuildingEdge {
+  node: IBuilding;
+}
 
 // TODO: Figure out a way to get metaInfo working without any
 // https://github.com/xerebede/gridsome-starter-typescript/issues/37
@@ -23,7 +26,7 @@ interface IBuildingEdge { node: IBuilding; }
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Retrofit Chicago Participant Case Studies' };
+    return { title: 'Retrofit Chicago Participant Case Studies' };
   },
 })
 export default class ChicagoRetrofitParticipants extends Vue {
@@ -39,16 +42,21 @@ export default class ChicagoRetrofitParticipants extends Vue {
 
   filterBuildings(): void {
     // Loop through BuildingsCustomInfo to get the IDs of buildings we are looking for
-    const retrofitBuildingSlugs: Array<string> = Object.entries(BuildingsCustomInfo)
-      .filter(([ , buildingInfo ]: [string, IBuildingCustomInfo]) => {
+    const retrofitBuildingSlugs: Array<string> = Object.entries(
+      BuildingsCustomInfo,
+    )
+      .filter(([, buildingInfo]: [string, IBuildingCustomInfo]) => {
         return buildingInfo.tags?.includes(BuildingTags.hasRetrofitCaseStudy);
-      }).map(([ buildingID ]: [string, IBuildingCustomInfo]) => buildingID);
-
-    this.buildingsFiltered =
-      this.$static.allBuilding.edges.filter((buildingEdge: IBuildingEdge) => {
-        return retrofitBuildingSlugs.some((ownedBuildingID) =>
-          buildingEdge.node.ID  === ownedBuildingID);
-      });
+      })
+      .map(([buildingID]: [string, IBuildingCustomInfo]) => buildingID);
+
+    this.buildingsFiltered = this.$static.allBuilding.edges.filter(
+      (buildingEdge: IBuildingEdge) => {
+        return retrofitBuildingSlugs.some(
+          (ownedBuildingID) => buildingEdge.node.ID === ownedBuildingID,
+        );
+      },
+    );
   }
 }
 </script>
@@ -90,30 +98,28 @@ export default class ChicagoRetrofitParticipants extends Vue {
 <template>
   <DefaultLayout>
     <div class="retrofit-page">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
+      <h1 id="main-content" tabindex="-1">
         Retrofit Chicago Participant Case Studies
       </h1>
 
       <p class="constrained -wide">
-        These buildings participated in the Retrofit Chicago program and have published case
-        studies, so you can learn more about how they became more efficient!
+        These buildings participated in the Retrofit Chicago program and have
+        published case studies, so you can learn more about how they became more
+        efficient!
       </p>
 
       <p>
         Buildings sourced from
-        <a href="https://www.chicago.gov/city/en/sites/retrofit-chicago2/home/participant-achievments/past-participants.html#case-studies">
-          City of Chicago - Retrofit Chicago
-        </a>.
+        <a
+          href="https://www.chicago.gov/city/en/sites/retrofit-chicago2/home/participant-achievments/past-participants.html#case-studies"
+        >
+          City of Chicago - Retrofit Chicago </a
+        >.
       </p>
 
       <DataDisclaimer />
 
-      <BuildingsTable
-        :buildings="buildingsFiltered"
-      />
+      <BuildingsTable :buildings="buildingsFiltered" />
 
       <DataSourceFootnote />
     </div>
@@ -122,6 +128,5 @@ export default class ChicagoRetrofitParticipants extends Vue {
 
 <style lang="scss">
 .retrofit-page {
-
 }
 </style>
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index 1e7296f9..deaafb8e 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -11,7 +11,9 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
 import BuildingBenchmarkStats from '../data/dist/building-benchmark-stats.json';
 import PropertyTypesConstant from '../data/dist/property-types.json';
 
-interface IBuildingEdge { node: IBuilding; }
+interface IBuildingEdge {
+  node: IBuilding;
+}
 
 @Component<any>({
   components: {
@@ -24,7 +26,8 @@ interface IBuildingEdge { node: IBuilding; }
   },
 })
 export default class Search extends Vue {
-  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats = BuildingBenchmarkStats;
+  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats =
+    BuildingBenchmarkStats;
   readonly MaxBuildings = 100;
 
   readonly QueryParamKeys = {
@@ -41,7 +44,7 @@ export default class Search extends Vue {
   /** The selected property type filter */
   propertyTypeFilter = '';
 
-  propertyTypeOptions: Array<{ label: string, value: string} | string> = [
+  propertyTypeOptions: Array<{ label: string; value: string } | string> = [
     { label: 'Select Property Type', value: '' },
   ].concat(PropertyTypesConstant.propertyTypes as any);
 
@@ -56,7 +59,9 @@ export default class Search extends Vue {
   mounted(): void {
     const urlParams = new URLSearchParams(window.location.search);
     const urlSearchParam = urlParams.get(this.QueryParamKeys.search);
-    const urlPropertyTypeParam = urlParams.get(this.QueryParamKeys.propertyType);
+    const urlPropertyTypeParam = urlParams.get(
+      this.QueryParamKeys.propertyType,
+    );
 
     if (urlSearchParam) {
       this.searchFilter = urlSearchParam;
@@ -76,7 +81,9 @@ export default class Search extends Vue {
       matchScore += 3;
     } else if (buildingEdge.node.Address.toLowerCase().includes(query)) {
       matchScore += 2;
-    } else if (buildingEdge.node.PrimaryPropertyType.toLowerCase().includes(query)) {
+    } else if (
+      buildingEdge.node.PrimaryPropertyType.toLowerCase().includes(query)
+    ) {
       matchScore += 1;
     }
 
@@ -109,28 +116,37 @@ export default class Search extends Vue {
       return;
     }
 
-    buildingsResults = buildingsResults.filter((buildingEdge: IBuildingEdge) => {
-      return buildingEdge.node.PropertyName.toLowerCase().includes(query) ||
-        buildingEdge.node.Address.toLowerCase().includes(query) ||
-        buildingEdge.node.PrimaryPropertyType.toLowerCase().includes(query);
-    });
+    buildingsResults = buildingsResults.filter(
+      (buildingEdge: IBuildingEdge) => {
+        return (
+          buildingEdge.node.PropertyName.toLowerCase().includes(query) ||
+          buildingEdge.node.Address.toLowerCase().includes(query) ||
+          buildingEdge.node.PrimaryPropertyType.toLowerCase().includes(query)
+        );
+      },
+    );
 
     // Sort by name matches, then address, then property type
-    buildingsResults = buildingsResults
-    .sort((buildingEdgeA: IBuildingEdge, buildingEdgeB: IBuildingEdge) =>
-      this.searchRank(buildingEdgeB, query) - this.searchRank(buildingEdgeA, query));
+    buildingsResults = buildingsResults.sort(
+      (buildingEdgeA: IBuildingEdge, buildingEdgeB: IBuildingEdge) =>
+        this.searchRank(buildingEdgeB, query) -
+        this.searchRank(buildingEdgeA, query),
+    );
 
     // If property type filter is specified, filter down by that
     if (this.propertyTypeFilter) {
-      buildingsResults = buildingsResults.filter((buildingEdge: IBuildingEdge) => {
-        return buildingEdge.node.PrimaryPropertyType.toLowerCase()
-          === this.propertyTypeFilter.toLowerCase();
-      });
+      buildingsResults = buildingsResults.filter(
+        (buildingEdge: IBuildingEdge) => {
+          return (
+            buildingEdge.node.PrimaryPropertyType.toLowerCase() ===
+            this.propertyTypeFilter.toLowerCase()
+          );
+        },
+      );
 
       this.setSearchResults(buildingsResults);
-    }
-    else {
-     this.setSearchResults(buildingsResults);
+    } else {
+      this.setSearchResults(buildingsResults);
     }
   }
 
@@ -177,40 +193,30 @@ export default class Search extends Vue {
 <template>
   <DefaultLayout>
     <div class="search-page">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        Search Buildings
-      </h1>
+      <h1 id="main-content" tabindex="-1">Search Buildings</h1>
 
       <p>
-        Search all of Chicago's benchmarked buildings by name or type! Note that results are limited
-        to the first {{ MaxBuildings }} matches.
+        Search all of Chicago's benchmarked buildings by name or type! Note that
+        results are limited to the first {{ MaxBuildings }} matches.
       </p>
 
       <DataDisclaimer />
 
       <form>
         <div>
-          <label for="page-search">
-            Building Name
-          </label>
+          <label for="page-search"> Building Name </label>
           <input
             id="page-search"
             v-model="searchFilter"
             type="text"
             name="search"
             placeholder="Search property name, type, or address"
-          >
+          />
         </div>
 
         <div>
           <label for="property-type">Property Type</label>
-          <select
-            id="property-type"
-            v-model="propertyTypeFilter"
-          >
+          <select id="property-type" v-model="propertyTypeFilter">
             <option
               v-for="propertyType in propertyTypeOptions"
               :key="propertyType.value ?? propertyType"
@@ -221,37 +227,26 @@ export default class Search extends Vue {
           </select>
         </div>
 
-        <button
-          type="submit"
-          class="-grey"
-          @click="submitSearch"
-        >
-          <img
-            src="/search.svg"
-            alt=""
-            width="15"
-            height="15"
-          >
+        <button type="submit" class="-grey" @click="submitSearch">
+          <img src="/search.svg" alt="" width="15" height="15" />
           Search
         </button>
       </form>
 
       <BuildingsTable :buildings="searchResults" />
 
-      <div
-        v-if="searchResults.length === 0"
-        class="no-results-msg"
-      >
+      <div v-if="searchResults.length === 0" class="no-results-msg">
         <h2>No results found!</h2>
 
         <p>
-          There may be a typo in your query or in the underlying data, or the building you are
-          looking for may not be in our dataset.
+          There may be a typo in your query or in the underlying data, or the
+          building you are looking for may not be in our dataset.
         </p>
       </div>
 
       <p>
-        Showing {{ Math.min(MaxBuildings, totalResultsCount) }} of total {{ totalResultsCount }}
+        Showing {{ Math.min(MaxBuildings, totalResultsCount) }} of total
+        {{ totalResultsCount }}
         matching buildings
       </p>
 
@@ -286,9 +281,14 @@ export default class Search extends Vue {
       font-weight: 500;
     }
 
-    input, select { padding: 0.5rem; }
+    input,
+    select {
+      padding: 0.5rem;
+    }
 
-    input[type="text"] { width: 15rem; }
+    input[type='text'] {
+      width: 15rem;
+    }
 
     button {
       display: flex;
@@ -297,7 +297,9 @@ export default class Search extends Vue {
       padding: 0.5rem 1rem;
     }
 
-    select { max-width: 12rem; }
+    select {
+      max-width: 12rem;
+    }
 
     /** Mobile Styling */
     @media (max-width: $mobile-max-width) {
@@ -315,7 +317,9 @@ export default class Search extends Vue {
   }
 
   @media (max-width: $mobile-max-width) {
-    form { background-color: $off-white; }
+    form {
+      background-color: $off-white;
+    }
   }
 }
 </style>
diff --git a/src/pages/TakeActionTips.vue b/src/pages/TakeActionTips.vue
index 5a38a8e5..e8308874 100644
--- a/src/pages/TakeActionTips.vue
+++ b/src/pages/TakeActionTips.vue
@@ -9,116 +9,116 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Take Action' };
+    return { title: 'Take Action' };
   },
 })
-export default class TakeActionTips extends Vue {
-}
+export default class TakeActionTips extends Vue {}
 </script>
 
 <template>
   <DefaultLayout>
     <div class="take-act-page layout-constrained">
-      <h1
-        id="main-content"
-        and
-        tabindex="-1"
-      >
-        Take Action
-      </h1>
-      <p class="subtitle">
-        How Can Our Buildings Improve?
-      </p>
+      <h1 id="main-content" and tabindex="-1">Take Action</h1>
+      <p class="subtitle">How Can Our Buildings Improve?</p>
 
       <p class="constrained">
-        Practically every building has room to improve with energy efficiency upgrades like
-        insulation, switching to ENERGY STAR rated appliances, and more, but for any buildings
-        with large fossil gas use, we recommend one thing: <strong>electrify!</strong>
+        Practically every building has room to improve with energy efficiency
+        upgrades like insulation, switching to ENERGY STAR rated appliances, and
+        more, but for any buildings with large fossil gas use, we recommend one
+        thing: <strong>electrify!</strong>
       </p>
 
       <p class="constrained">
         In other words,
         <strong>
-          buildings should look to move all on-site uses of fossil fuels (including
-          space heating, water heating, and cooking) to electrically powered systems
-        </strong> like
-        industrial grade heat pumps, heat pump water heaters, and induction stoves. With Illinois'
-        current electric supply, just using the same amount of energy from electricity, rather
-        than fossil gas (aka methane) will dramatically reduce greenhouse gas emissions.
-        This is because Illinois' grid in 2020 was already 67% carbon-free
-        (see <a
+          buildings should look to move all on-site uses of fossil fuels
+          (including space heating, water heating, and cooking) to electrically
+          powered systems
+        </strong>
+        like industrial grade heat pumps, heat pump water heaters, and induction
+        stoves. With Illinois' current electric supply, just using the same
+        amount of energy from electricity, rather than fossil gas (aka methane)
+        will dramatically reduce greenhouse gas emissions. This is because
+        Illinois' grid in 2020 was already 67% carbon-free (see
+        <a
           href="https://decarbmystate.com/illinois#power"
           target="_blank"
           rel="noopener"
         >
-          Illinois - Power | DecarbMyState <NewTabIcon />
-        </a>).
-        This has already been done across the country with a variety of buildings, large and
-        small, like the
+          Illinois - Power | DecarbMyState <NewTabIcon /> </a
+        >). This has already been done across the country with a variety of
+        buildings, large and small, like the
         <a
           href="https://www.youtube.com/watch?v=J4aTcU6Fzoc"
           target="_blank"
           rel="noopener"
         >
           Hotel Marcel
-          <NewTabIcon />
-        </a>.
+          <NewTabIcon /> </a
+        >.
       </p>
 
       <p class="constrained">
-        You can help make this a reality by talking to building owners and letting them know that
-        a building's emissions are important to you, and that you want to see their building
-        become fully electric and stop emitting greenhouse gases. Particularly for buildings you
-        have a financial stake in (like your university, work, condo building, or apartment
-        building) your voice <em>in concert with your fellow building users</em> can have a huge
+        You can help make this a reality by talking to building owners and
+        letting them know that a building's emissions are important to you, and
+        that you want to see their building become fully electric and stop
+        emitting greenhouse gases. Particularly for buildings you have a
+        financial stake in (like your university, work, condo building, or
+        apartment building) your voice
+        <em>in concert with your fellow building users</em> can have a huge
         impact.
       </p>
 
       <h3>Additional Resources</h3>
 
       <p>
-        See some additional resources on improving energy efficiency and understanding this data:
+        See some additional resources on improving energy efficiency and
+        understanding this data:
+      </p>
 
-        <ul>
-          <li>
-            <a
-              href="https://www.chicago.gov/city/en/depts/mayor/supp_info/chicago-energy-benchmarking/Chicago_Energy_Benchmarking_Beyond_Benchmarking.html"
-              target="_blank"
-              rel="noopener"
-            >
-              Chicago Energy Benchmarking: Taking Action to Improve Energy Efficiency
-              | City of Chicago <NewTabIcon />
-            </a>
-          </li>
+      <ul>
+        <li>
+          <a
+            href="https://www.chicago.gov/city/en/depts/mayor/supp_info/chicago-energy-benchmarking/Chicago_Energy_Benchmarking_Beyond_Benchmarking.html"
+            target="_blank"
+            rel="noopener"
+          >
+            Chicago Energy Benchmarking: Taking Action to Improve Energy
+            Efficiency | City of Chicago <NewTabIcon />
+          </a>
+        </li>
 
-          <li>
-            <a
-              href="https://www.chicagobuilding.gov/content/dam/city/progs/env/EnergyBenchmark/2018_Chicago_Energy_Benchmarking_Results_By_Sector.pdf"
-              target="_blank"
-              rel="noopener"
-            >
-              Chicago Average EUIs and ENERGY STAR scores by property type [PDF] <NewTabIcon />
-            </a>
-          </li>
+        <li>
+          <a
+            href="https://www.chicagobuilding.gov/content/dam/city/progs/env/EnergyBenchmark/2018_Chicago_Energy_Benchmarking_Results_By_Sector.pdf"
+            target="_blank"
+            rel="noopener"
+          >
+            Chicago Average EUIs and ENERGY STAR scores by property type [PDF]
+            <NewTabIcon />
+          </a>
+        </li>
 
-          <li>
-            <a
-              href="https://portfoliomanager.energystar.gov/pdf/reference/US%20National%20Median%20Table.pdf"
-              target="_blank"
-              rel="noopener"
-            >
-              U.S. Energy Use Intensity by Property Type | ENERGY STAR [PDF] <NewTabIcon />
-            </a>
-          </li>
-        </ul>
-      </p>
+        <li>
+          <a
+            href="https://portfoliomanager.energystar.gov/pdf/reference/US%20National%20Median%20Table.pdf"
+            target="_blank"
+            rel="noopener"
+          >
+            U.S. Energy Use Intensity by Property Type | ENERGY STAR [PDF]
+            <NewTabIcon />
+          </a>
+        </li>
+      </ul>
     </div>
   </DefaultLayout>
 </template>
 
 <style lang="scss">
 .take-act-page {
-  h1 { margin-bottom: 0; }
+  h1 {
+    margin-bottom: 0;
+  }
 
   .subtitle {
     font-size: 1.25rem;
diff --git a/src/pages/TopElectricityUsers.vue b/src/pages/TopElectricityUsers.vue
index dcf61992..996cfa74 100644
--- a/src/pages/TopElectricityUsers.vue
+++ b/src/pages/TopElectricityUsers.vue
@@ -16,11 +16,10 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Top Electricity Users' };
+    return { title: 'Top Electricity Users' };
   },
 })
-export default class TopElectricityUsers extends Vue {
-}
+export default class TopElectricityUsers extends Vue {}
 </script>
 
 <static-query>
@@ -55,10 +54,7 @@ export default class TopElectricityUsers extends Vue {
 
 <template>
   <DefaultLayout>
-    <h1
-      id="main-content"
-      tabindex="-1"
-    >
+    <h1 id="main-content" tabindex="-1">
       Top {{ $static.allBuilding.edges.length }} Electricity Users
     </h1>
 
@@ -73,5 +69,4 @@ export default class TopElectricityUsers extends Vue {
   </DefaultLayout>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/pages/TopEmitters.vue b/src/pages/TopEmitters.vue
index 24f77553..fc75468b 100644
--- a/src/pages/TopEmitters.vue
+++ b/src/pages/TopEmitters.vue
@@ -16,11 +16,10 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Top Emitters' };
+    return { title: 'Top Emitters' };
   },
 })
-export default class TopEmitters extends Vue {
-}
+export default class TopEmitters extends Vue {}
 </script>
 
 <static-query>
@@ -55,30 +54,30 @@ export default class TopEmitters extends Vue {
 
 <template>
   <DefaultLayout>
-    <h1
-      id="main-content"
-      tabindex="-1"
-    >
-      Top {{ $static.allBuilding.edges.length }} Buildings by Greenhouse Gas Emissions
+    <h1 id="main-content" tabindex="-1">
+      Top {{ $static.allBuilding.edges.length }} Buildings by Greenhouse Gas
+      Emissions
     </h1>
 
     <p class="constrained -wide">
-      These buildings are the biggest emitters of greenhouse gases in Chicago, both directly (like
-      by burning fossil gas on site for heating) and indirectly (by using electricity that is
-      still produced with some fossil fuels).
+      These buildings are the biggest emitters of greenhouse gases in Chicago,
+      both directly (like by burning fossil gas on site for heating) and
+      indirectly (by using electricity that is still produced with some fossil
+      fuels).
     </p>
 
     <p class="constrained -wide">
-      Many of these buildings are very large, which is a big part of why they use so much energy and
-      have such high emissions. Several of these buildings, however, are not that large, but are
-      instead incredibly inefficient - they use a lot of energy to heat and cool relatively small
+      Many of these buildings are very large, which is a big part of why they
+      use so much energy and have such high emissions. Several of these
+      buildings, however, are not that large, but are instead incredibly
+      inefficient - they use a lot of energy to heat and cool relatively small
       buildings.
     </p>
 
     <p class="bold">
-      Curious to see buildings sorted by their emissions <em>intensity</em> instead? <g-link to="/">
-        Check out the homepage!
-      </g-link>
+      Curious to see buildings sorted by their emissions
+      <em>intensity</em> instead?
+      <g-link to="/"> Check out the homepage! </g-link>
     </p>
 
     <DataDisclaimer />
@@ -89,5 +88,4 @@ export default class TopEmitters extends Vue {
   </DefaultLayout>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/pages/TopGasUsers.vue b/src/pages/TopGasUsers.vue
index 7ae8ba53..98c31484 100644
--- a/src/pages/TopGasUsers.vue
+++ b/src/pages/TopGasUsers.vue
@@ -16,11 +16,10 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Biggest Fossil Gas Users' };
+    return { title: 'Biggest Fossil Gas Users' };
   },
 })
-export default class TopGasUsers extends Vue {
-}
+export default class TopGasUsers extends Vue {}
 </script>
 
 <static-query>
@@ -55,17 +54,15 @@ export default class TopGasUsers extends Vue {
 
 <template>
   <DefaultLayout>
-    <h1
-      id="main-content"
-      tabindex="-1"
-    >
+    <h1 id="main-content" tabindex="-1">
       Top {{ $static.allBuilding.edges.length }} Buildings by Fossil Gas Use
     </h1>
 
     <p class="constrained -wide">
-      These buildings are the largest consumers of fossil gas (methane) in the city. Fossil gas
-      in these buildings is typically used for heating gas and water, and since electrifying the
-      grid won't clean up these emissions it's an important set of buildings to focus on!
+      These buildings are the largest consumers of fossil gas (methane) in the
+      city. Fossil gas in these buildings is typically used for heating gas and
+      water, and since electrifying the grid won't clean up these emissions it's
+      an important set of buildings to focus on!
     </p>
 
     <DataDisclaimer />
@@ -79,5 +76,4 @@ export default class TopGasUsers extends Vue {
   </DefaultLayout>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/pages/blog/MillionsInMissedFines.vue b/src/pages/blog/MillionsInMissedFines.vue
index 6369485f..cb12dec2 100644
--- a/src/pages/blog/MillionsInMissedFines.vue
+++ b/src/pages/blog/MillionsInMissedFines.vue
@@ -10,48 +10,42 @@ import NewTabIcon from '~/components/NewTabIcon.vue';
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  'Chicago Failed to Collect Potentially $30 Million in Fines' };
+    return {
+      title: 'Chicago Failed to Collect Potentially $30 Million in Fines',
+    };
   },
 })
 export default class MillionsInMissedFine extends Vue {
-  readonly NotifLetterUrl = 'https://www.chicago.gov/content/dam/city/progs/env/EnergyBenchmark/sample_notification_letter.pdf';
+  readonly NotifLetterUrl =
+    'https://www.chicago.gov/content/dam/city/progs/env/EnergyBenchmark/sample_notification_letter.pdf';
 
   /** Buildings from 2018 - 2022 that didn't report */
-  readonly NonReportingBuildingsDataUrl = 'https://data.cityofchicago.org/Environment-Sustainable-Development/Chicago-Energy-Benchmarking/xq83-jr8c/explore/query/SELECT%0A%20%20%60data_year%60%2C%0A%20%20%60id%60%2C%0A%20%20%60property_name%60%2C%0A%20%20%60reporting_status%60%2C%0A%20%20%60address%60%2C%0A%20%20%60zip_code%60%2C%0A%20%20%60chicago_energy_rating%60%2C%0A%20%20%60exempt_from_chicago_energy_rating%60%2C%0A%20%20%60community_area%60%2C%0A%20%20%60primary_property_type%60%2C%0A%20%20%60gross_floor_area_buildings_sq_ft%60%2C%0A%20%20%60year_built%60%2C%0A%20%20%60of_buildings%60%2C%0A%20%20%60water_use_kgal%60%2C%0A%20%20%60energy_star_score%60%2C%0A%20%20%60electricity_use_kbtu%60%2C%0A%20%20%60natural_gas_use_kbtu%60%2C%0A%20%20%60district_steam_use_kbtu%60%2C%0A%20%20%60district_chilled_water_use_kbtu%60%2C%0A%20%20%60all_other_fuel_use_kbtu%60%2C%0A%20%20%60site_eui_kbtu_sq_ft%60%2C%0A%20%20%60source_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_site_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_source_eui_kbtu_sq_ft%60%2C%0A%20%20%60total_ghg_emissions_metric_tons_co2e%60%2C%0A%20%20%60ghg_intensity_kg_co2e_sq_ft%60%2C%0A%20%20%60latitude%60%2C%0A%20%20%60longitude%60%2C%0A%20%20%60location%60%2C%0A%20%20%60row_id%60%2C%0A%20%20%60%3A%40computed_region_43wa_7qmu%60%2C%0A%20%20%60%3A%40computed_region_vrxf_vc4k%60%2C%0A%20%20%60%3A%40computed_region_6mkv_f3dw%60%2C%0A%20%20%60%3A%40computed_region_bdys_3d7i%60%2C%0A%20%20%60%3A%40computed_region_awaf_s7ux%60%0AWHERE%0A%20%20%28%60data_year%60%20IN%20%28%222019%22%2C%20%222020%22%2C%20%222021%22%2C%20%222022%22%2C%20%222018%22%29%29%0A%20%20AND%20caseless_one_of%28%60reporting_status%60%2C%20%22Not%20Submitted%22%29/page/filter';
+  readonly NonReportingBuildingsDataUrl =
+    'https://data.cityofchicago.org/Environment-Sustainable-Development/Chicago-Energy-Benchmarking/xq83-jr8c/explore/query/SELECT%0A%20%20%60data_year%60%2C%0A%20%20%60id%60%2C%0A%20%20%60property_name%60%2C%0A%20%20%60reporting_status%60%2C%0A%20%20%60address%60%2C%0A%20%20%60zip_code%60%2C%0A%20%20%60chicago_energy_rating%60%2C%0A%20%20%60exempt_from_chicago_energy_rating%60%2C%0A%20%20%60community_area%60%2C%0A%20%20%60primary_property_type%60%2C%0A%20%20%60gross_floor_area_buildings_sq_ft%60%2C%0A%20%20%60year_built%60%2C%0A%20%20%60of_buildings%60%2C%0A%20%20%60water_use_kgal%60%2C%0A%20%20%60energy_star_score%60%2C%0A%20%20%60electricity_use_kbtu%60%2C%0A%20%20%60natural_gas_use_kbtu%60%2C%0A%20%20%60district_steam_use_kbtu%60%2C%0A%20%20%60district_chilled_water_use_kbtu%60%2C%0A%20%20%60all_other_fuel_use_kbtu%60%2C%0A%20%20%60site_eui_kbtu_sq_ft%60%2C%0A%20%20%60source_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_site_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_source_eui_kbtu_sq_ft%60%2C%0A%20%20%60total_ghg_emissions_metric_tons_co2e%60%2C%0A%20%20%60ghg_intensity_kg_co2e_sq_ft%60%2C%0A%20%20%60latitude%60%2C%0A%20%20%60longitude%60%2C%0A%20%20%60location%60%2C%0A%20%20%60row_id%60%2C%0A%20%20%60%3A%40computed_region_43wa_7qmu%60%2C%0A%20%20%60%3A%40computed_region_vrxf_vc4k%60%2C%0A%20%20%60%3A%40computed_region_6mkv_f3dw%60%2C%0A%20%20%60%3A%40computed_region_bdys_3d7i%60%2C%0A%20%20%60%3A%40computed_region_awaf_s7ux%60%0AWHERE%0A%20%20%28%60data_year%60%20IN%20%28%222019%22%2C%20%222020%22%2C%20%222021%22%2C%20%222022%22%2C%20%222018%22%29%29%0A%20%20AND%20caseless_one_of%28%60reporting_status%60%2C%20%22Not%20Submitted%22%29/page/filter';
 }
 </script>
 <template>
   <DefaultLayout>
     <div class="layout-constrained millions-in-fines">
-      <g-link
-        to="/blog"
-        class="back-link grey-link"
-      >
-        Back to Blog
-      </g-link>
-
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        City Of Chicago Failed to Collect $30 Million In Potential Fines from Building Benchmarking
-        Ordinance
+      <g-link to="/blog" class="back-link grey-link"> Back to Blog </g-link>
+
+      <h1 id="main-content" tabindex="-1">
+        City Of Chicago Failed to Collect $30 Million In Potential Fines from
+        Building Benchmarking Ordinance
       </h1>
       <p class="constrained bold">
-        Not Enforcing The Benchmarking Ordinance&apos;s Fines From 2018 - 2022 Reduced
-        Accountability & Transparency
+        Not Enforcing The Benchmarking Ordinance&apos;s Fines From 2018 - 2022
+        Reduced Accountability & Transparency
       </p>
 
       <p class="constrained">
-        Electrify Chicago has analyzed the last five years of city benchmark data, and found
-        3,325 instances of building owners not submitting data. Based on the
-        <a
-          :href="NotifLetterUrl"
-          target="_blank"
-          rel="noopener"
-        >
+        Electrify Chicago has analyzed the last five years of city benchmark
+        data, and found 3,325 instances of building owners not submitting data.
+        Based on the
+        <a :href="NotifLetterUrl" target="_blank" rel="noopener">
           latest (2024) official notification letter <NewTabIcon />
-        </a> fines for non-compliance could total up to $9,200 per year.
+        </a>
+        fines for non-compliance could total up to $9,200 per year.
       </p>
 
       <img
@@ -60,28 +54,33 @@ export default class MillionsInMissedFine extends Vue {
         alt="A selection of text with a title 'Failure to comply is more expensive than you
           think', with details of fines and a highlight saying 'These fines could total $9,200 /
           year'"
-      >
+      />
 
       <p class="caption">
-        A screenshot of the energy benchmarking notification letter&apos;s section on fines, as of
-        Feb. 2024 (<a
+        A screenshot of the energy benchmarking notification letter&apos;s
+        section on fines, as of Feb. 2024 (<a
           :href="NotifLetterUrl"
           target="_blank"
           rel="noopener"
-        >source <NewTabIcon /></a>)
+          >source <NewTabIcon /></a
+        >)
       </p>
 
       <p>
-        With a maximum of $9,200 of fines multiplied by 3,325 instances of non-compliance
-        (<a
+        With a maximum of $9,200 of fines multiplied by 3,325 instances of
+        non-compliance (<a
           :href="NonReportingBuildingsDataUrl"
           target="_blank"
           rel="noopener"
-        >source - City of Chicago data portal <NewTabIcon /></a>), that
-        means a whopping <strong>$30,590,000 dollars of fines could have been collected</strong>
-        by the city&apos;s commissioner of business affairs and consumer protection (who is given
-        this responsibility in the
-        <a href="https://www.chicago.gov/content/dam/city/progs/env/EnergyBenchmark/BenchmarkingOrdinance11SEP2013.pdf">original ordinance</a>).
+          >source - City of Chicago data portal <NewTabIcon /></a
+        >), that means a whopping
+        <strong>$30,590,000 dollars of fines could have been collected</strong>
+        by the city&apos;s commissioner of business affairs and consumer
+        protection (who is given this responsibility in the
+        <a
+          href="https://www.chicago.gov/content/dam/city/progs/env/EnergyBenchmark/BenchmarkingOrdinance11SEP2013.pdf"
+          >original ordinance</a
+        >).
       </p>
 
       <img
@@ -90,58 +89,66 @@ export default class MillionsInMissedFine extends Vue {
         alt="A screenshot of the city data portal showing a view of buildings filtered by the
           years 2018, 2019, 2020, 2021, and 2022, and a reporting status of 'Not Reporting',
           with the total results returned of 3,325 underlined in red"
-      >
+      />
 
       <img
         src="/blog/millions-in-missed-fines/zoomed-non-reporting-count.webp"
         class="blog-img"
         width="400"
-        alt="A screenshot of text that reads &apos;Showing rows 1-100 of 3325'"
-      >
+        alt="A screenshot of text that reads 'Showing rows 1-100 of 3325'"
+      />
 
       <p class="caption">
-        The full data portal screenshot, and a zoomed in view of the query result count (<a
+        The full data portal screenshot, and a zoomed in view of the query
+        result count (<a
           :href="NonReportingBuildingsDataUrl"
           target="_blank"
           rel="noopener"
-        >source <NewTabIcon /></a>)
+          >source <NewTabIcon /></a
+        >)
       </p>
 
       <p>
-        A Freedom of Information Act (FOIA) request submitted to the city&apos;s Department of
-        Business Affairs and Consumer Protections, which is charged with enforcing the benchmarking
-        ordinance, returned no recorded instances of the ordinance being enforced.
+        A Freedom of Information Act (FOIA) request submitted to the city&apos;s
+        Department of Business Affairs and Consumer Protections, which is
+        charged with enforcing the benchmarking ordinance, returned no recorded
+        instances of the ordinance being enforced.
       </p>
 
       <h2>Why This Matters</h2>
 
       <p>
-        Without consequences for non-reporting, building owners who perform poorly can simply opt
-        out of reporting their data. Some owners of very large and culturally significant buildings
-        have consistently not submitted. As an example, view
+        Without consequences for non-reporting, building owners who perform
+        poorly can simply opt out of reporting their data. Some owners of very
+        large and culturally significant buildings have consistently not
+        submitted. As an example, view
         <a
           href="https://data.cityofchicago.org/Environment-Sustainable-Development/Chicago-Energy-Benchmarking/xq83-jr8c/explore/query/SELECT%0A%20%20%60data_year%60%2C%0A%20%20%60id%60%2C%0A%20%20%60property_name%60%2C%0A%20%20%60reporting_status%60%2C%0A%20%20%60address%60%2C%0A%20%20%60zip_code%60%2C%0A%20%20%60chicago_energy_rating%60%2C%0A%20%20%60exempt_from_chicago_energy_rating%60%2C%0A%20%20%60community_area%60%2C%0A%20%20%60primary_property_type%60%2C%0A%20%20%60gross_floor_area_buildings_sq_ft%60%2C%0A%20%20%60year_built%60%2C%0A%20%20%60of_buildings%60%2C%0A%20%20%60water_use_kgal%60%2C%0A%20%20%60energy_star_score%60%2C%0A%20%20%60electricity_use_kbtu%60%2C%0A%20%20%60natural_gas_use_kbtu%60%2C%0A%20%20%60district_steam_use_kbtu%60%2C%0A%20%20%60district_chilled_water_use_kbtu%60%2C%0A%20%20%60all_other_fuel_use_kbtu%60%2C%0A%20%20%60site_eui_kbtu_sq_ft%60%2C%0A%20%20%60source_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_site_eui_kbtu_sq_ft%60%2C%0A%20%20%60weather_normalized_source_eui_kbtu_sq_ft%60%2C%0A%20%20%60total_ghg_emissions_metric_tons_co2e%60%2C%0A%20%20%60ghg_intensity_kg_co2e_sq_ft%60%2C%0A%20%20%60latitude%60%2C%0A%20%20%60longitude%60%2C%0A%20%20%60location%60%2C%0A%20%20%60row_id%60%2C%0A%20%20%60%3A%40computed_region_43wa_7qmu%60%2C%0A%20%20%60%3A%40computed_region_vrxf_vc4k%60%2C%0A%20%20%60%3A%40computed_region_6mkv_f3dw%60%2C%0A%20%20%60%3A%40computed_region_bdys_3d7i%60%2C%0A%20%20%60%3A%40computed_region_awaf_s7ux%60%0AWHERE%0A%20%20caseless_one_of%28%60reporting_status%60%2C%20%22Not%20Submitted%22%29%0A%20%20AND%20%28%60data_year%60%20IN%20%28%222022%22%29%29%0AORDER%20BY%20%60gross_floor_area_buildings_sq_ft%60%20DESC%20NULL%20LAST/page/filter"
           target="_blank"
           rel="noopener"
         >
-          2023&apos;s largest non reporting buildings in the data portal <NewTabIcon />
-        </a>. Not having all building owners report means the goals of the ordinance aren't being
-        met, and the public loses out on valuable information for buildings that could be emitting
-        the most or be the least efficient. The city may also believe that it is on track with its
-        climate goals, when there are still large buildings that are emitting but have their
-        emissions not reported or not reported accurately, like if a building reports their
-        electricity use but not their fossil gas use.
+          2023&apos;s largest non reporting buildings in the data portal
+          <NewTabIcon /> </a
+        >. Not having all building owners report means the goals of the
+        ordinance aren't being met, and the public loses out on valuable
+        information for buildings that could be emitting the most or be the
+        least efficient. The city may also believe that it is on track with its
+        climate goals, when there are still large buildings that are emitting
+        but have their emissions not reported or not reported accurately, like
+        if a building reports their electricity use but not their fossil gas
+        use.
       </p>
 
       <p>
-        To put this $30 million in potential fines into context, zin the 2024 budget, $25.3 million
-        was suggested to be put towards lead line replacement, meaning these potential fines could
-        have fully funded that program in 2024
-        (<a
+        To put this $30 million in potential fines into context, zin the 2024
+        budget, $25.3 million was suggested to be put towards lead line
+        replacement, meaning these potential fines could have fully funded that
+        program in 2024 (<a
           href="https://www.chicago.gov/content/dam/city/sites/committeeonthebudget/2024/FY2024/2024-Budget-Overview.pdf"
           target="_blank"
           rel="noopener"
-        >source - City of Chicago 2024 Budget Overview <NewTabIcon /></a>).
+          >source - City of Chicago 2024 Budget Overview <NewTabIcon /></a
+        >).
       </p>
 
       <h2>Next Steps</h2>
@@ -151,27 +158,30 @@ export default class MillionsInMissedFine extends Vue {
           href="https://web.archive.org/web/20221214211117/https://www.chicago.gov/content/dam/city/progs/env/EnergyBenchmark/2020_Sample_Notification_Letter.pdf"
           target="_blank"
           rel="noopener"
-        >source - WayBackMachine <NewTabIcon /></a>)
-        did not contain any information about potential fines, and merely by updating the
-        notification letter to make sure that building owners are aware of the consequences for not
-        reporting, the reporting rate is likely to improve. However, we believe it is crucial the
-        city then follow through and fine any owners who choose to ignore repeated requests to
-        report their energy use, in keeping with the original ordinance. We also believe that
-        larger fines may be necessary to get the owners of very large and inefficient buildings
-        to report their emissions, rather than to obscure their pollution from the public.
+          >source - WayBackMachine <NewTabIcon /></a
+        >) did not contain any information about potential fines, and merely by
+        updating the notification letter to make sure that building owners are
+        aware of the consequences for not reporting, the reporting rate is
+        likely to improve. However, we believe it is crucial the city then
+        follow through and fine any owners who choose to ignore repeated
+        requests to report their energy use, in keeping with the original
+        ordinance. We also believe that larger fines may be necessary to get the
+        owners of very large and inefficient buildings to report their
+        emissions, rather than to obscure their pollution from the public.
       </p>
 
       <p>
-        Additionally, we recommend the city consider adding more granular data requirements to the
-        data portal to help building emissions data be more clear and helpful. This includes
-        ensuring that all electric buildings are clearly reported, distinct from buildings that
-        reported electric but not gas use, and considering requesting information about a building's
-        HVAC system, since that can be the driving factor in a buildings emissions profile, and a
-        building that uses gas only for cooking should be identifiable from a building using gas for
-        heating and cooling as well.
+        Additionally, we recommend the city consider adding more granular data
+        requirements to the data portal to help building emissions data be more
+        clear and helpful. This includes ensuring that all electric buildings
+        are clearly reported, distinct from buildings that reported electric but
+        not gas use, and considering requesting information about a building's
+        HVAC system, since that can be the driving factor in a buildings
+        emissions profile, and a building that uses gas only for cooking should
+        be identifiable from a building using gas for heating and cooling as
+        well.
       </p>
 
-
       <h2>Questions?</h2>
 
       <p>
@@ -187,7 +197,9 @@ export default class MillionsInMissedFine extends Vue {
     margin-bottom: 0;
     line-height: 1.25;
 
-    + p { margin: 0.25rem 0 0.5rem 0; }
+    + p {
+      margin: 0.25rem 0 0.5rem 0;
+    }
   }
 
   a.back-link {
diff --git a/src/scss/colors.scss b/src/scss/colors.scss
index fa2b22f4..f9ad5eb1 100644
--- a/src/scss/colors.scss
+++ b/src/scss/colors.scss
@@ -15,13 +15,13 @@ $text-main: #000;
 $text-light: #737373;
 $link-blue: #2136ab;
 
-$blue-dark: #006EF0;
+$blue-dark: #006ef0;
 $blue-very-dark: #0060d6;
 
-$chicago-blue: #41B6E6;
-$chicago-red: #E4002B;
+$chicago-blue: #41b6e6;
+$chicago-red: #e4002b;
 
 $warning-background: #fcfcde;
 $warning-border: #ee8a4c;
 
-$box-shadow-main: rgba(0,0,0,0.25);
+$box-shadow-main: rgba(0, 0, 0, 0.25);
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 203b5720..7122d779 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -10,13 +10,16 @@ body {
   padding: 0;
   line-height: 1.5;
 
-  &, * {
+  &,
+  * {
     font-family: 'Roboto', sans-serif;
     box-sizing: border-box;
   }
 
   // Disable page scroll when we have an open modal
-  &:has(dialog[open]) { overflow: hidden; }
+  &:has(dialog[open]) {
+    overflow: hidden;
+  }
 }
 
 // Default focus styles
@@ -25,7 +28,9 @@ body {
   outline-offset: 0.125rem;
 }
 
-a { color: $link-blue; }
+a {
+  color: $link-blue;
+}
 
 a.grey-link {
   background-color: $grey-light;
@@ -34,35 +39,56 @@ a.grey-link {
   padding: 0.25rem 1rem;
   text-decoration: none;
 
-  &:hover, &:focus { background-color: $grey; }
+  &:hover,
+  &:focus {
+    background-color: $grey;
+  }
 }
 
-h1, h2, h3, h4, h5, h6 {
-   &:focus {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &:focus {
     border-bottom: solid 0.5rem $chicago-blue;
     outline: none;
   }
 
   // Drop margin for the first paragraph after a heading
-  + p { margin-top: 0; }
-
+  + p {
+    margin-top: 0;
+  }
 }
 
 /**
  * Mobile Font Size Overrides
  */
 @media (max-width: $mobile-max-width) {
-  h1 { font-size: 1.75rem; }
-  h2 { font-size: 1.25rem; }
+  h1 {
+    font-size: 1.75rem;
+  }
+  h2 {
+    font-size: 1.25rem;
+  }
 
-  p { font-size: 0.75rem; }
+  p {
+    font-size: 0.75rem;
+  }
 }
 
-h1 { margin: 1.5rem 0 0.5rem 0; }
-h2 { margin: 1rem 0 0.5rem 0; }
-
-p.-no-margin, p:first-of-type { margin: 0; }
+h1 {
+  margin: 1.5rem 0 0.5rem 0;
+}
+h2 {
+  margin: 1rem 0 0.5rem 0;
+}
 
+p.-no-margin,
+p:first-of-type {
+  margin: 0;
+}
 
 /**
  * Default Form Styling
@@ -87,7 +113,8 @@ button {
     background-color: $grey;
     border-bottom: none;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: $grey-dark;
     }
   }
@@ -96,13 +123,21 @@ button {
 /**
  * Text helpers
  */
-.bold { font-weight: bold; }
+.bold {
+  font-weight: bold;
+}
 
 dl {
-  dt { font-weight: bold; }
-  dd { margin-left: 0; }
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin-left: 0;
+  }
 
-  dd + dt { margin-top: 1rem; }
+  dd + dt {
+    margin-top: 1rem;
+  }
 }
 
 /** Style the basic disclosure widget <details> and <summary> */
@@ -116,13 +151,19 @@ details {
     padding: 1rem 1.5rem;
     cursor: pointer;
 
-    &:focus { outline-offset: 0; }
+    &:focus {
+      outline-offset: 0;
+    }
   }
 
-  .details-content { padding: 1.5rem; }
+  .details-content {
+    padding: 1.5rem;
+  }
 }
 
-img { max-width: 100%; }
+img {
+  max-width: 100%;
+}
 
 img.-shadowed {
   margin-top: 1rem;
@@ -130,19 +171,29 @@ img.-shadowed {
   box-shadow: 0.125rem 0.125rem 0.25rem $box-shadow-main;
 }
 
-.large-text { font-size: 1.3em; }
+.large-text {
+  font-size: 1.3em;
+}
 
-.smaller { font-size: smaller; }
+.smaller {
+  font-size: smaller;
+}
 
-.regular-text-size { font-size: 1rem; ;}
+.regular-text-size {
+  font-size: 1rem;
+}
 
-.x-small-text { font-size: 0.75rem; }
+.x-small-text {
+  font-size: 0.75rem;
+}
 
 .footnote {
   font-size: 0.75rem;
   margin-top: 1rem;
 
-  &.-img { margin-top: 0; ;}
+  &.-img {
+    margin-top: 0;
+  }
 }
 
 .grade-letter {
@@ -172,11 +223,16 @@ img.-shadowed {
 
 // Use .constrained for a reasonable max-width for text readability and .layout-constrained for a
 // centered version
-.layout-constrained, .constrained {
+.layout-constrained,
+.constrained {
   max-width: 50rem;
 
-  &.-wide { max-width: 60rem; }
-  &.layout-constrained { margin: auto; }
+  &.-wide {
+    max-width: 60rem;
+  }
+  &.layout-constrained {
+    margin: auto;
+  }
 }
 
 /** Search Form styling */
@@ -186,7 +242,8 @@ form.search-form {
     white-space: nowrap;
   }
 
-  input, button {
+  input,
+  button {
     height: 2.5rem;
     box-sizing: border-box;
     border: solid $border-thin $grey;
@@ -213,7 +270,8 @@ form.search-form {
     font-weight: bold;
     background-color: $grey;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: $grey-dark;
     }
   }
@@ -227,15 +285,25 @@ form.search-form {
   border-top-width: 2rem;
   max-width: 40rem;
 
-  &.-orange { border-color: $orange; }
-  &.-blue { border-color: $chicago-blue; }
+  &.-orange {
+    border-color: $orange;
+  }
+  &.-blue {
+    border-color: $chicago-blue;
+  }
 
-  h2 { margin-top: 0; }
+  h2 {
+    margin-top: 0;
+  }
 
-  .bold { font-size: 1.125rem; }
+  .bold {
+    font-size: 1.125rem;
+  }
 
   @media (max-width: $mobile-max-width) {
-    .bold { font-size: 1rem; }
+    .bold {
+      font-size: 1rem;
+    }
   }
 }
 
@@ -243,36 +311,39 @@ form.search-form {
  * <Pager> styling
  */
 nav.pager {
-    display: inline-flex;
-    gap: 1rem;
-    margin-top: 1rem;
+  display: inline-flex;
+  gap: 1rem;
+  margin-top: 1rem;
 
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $text-main;
-      background-color: $grey;
-      width: 2.5rem;
-      aspect-ratio: 1;
-      text-align: center;
-      border-radius: $brd-rad-small;
-      text-decoration: none;
-      font-weight: bold;
-
-      &:hover, &:focus {
-        background-color: $grey-dark;
-      }
-
-      &.active {
-        background-color: $orange;
-        cursor: default;
-      }
+  a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $text-main;
+    background-color: $grey;
+    width: 2.5rem;
+    aspect-ratio: 1;
+    text-align: center;
+    border-radius: $brd-rad-small;
+    text-decoration: none;
+    font-weight: bold;
+
+    &:hover,
+    &:focus {
+      background-color: $grey-dark;
     }
 
-    @media (max-width: $mobile-max-width) {
-      gap: 0.25rem;
+    &.active {
+      background-color: $orange;
+      cursor: default;
+    }
+  }
+
+  @media (max-width: $mobile-max-width) {
+    gap: 0.25rem;
 
-      a { width: 2rem; }
+    a {
+      width: 2rem;
     }
+  }
 }
diff --git a/src/templates/BuildingDetails.vue b/src/templates/BuildingDetails.vue
index 51993af9..1e52222a 100644
--- a/src/templates/BuildingDetails.vue
+++ b/src/templates/BuildingDetails.vue
@@ -76,16 +76,15 @@ query ($id: ID!, $ID: String) {
         :class="{
           '-has-img': Boolean(buildingImg),
           // The layout is better for tall images, so keeping it there
-          '-img-tall': Boolean(buildingImg?.isTall || true)
+          '-img-tall': Boolean(buildingImg?.isTall || true),
         }"
       >
         <div class="building-header-text">
           <div>
-            <h1
-              id="main-content"
-              tabindex="-1"
-            >
-              {{ $page.building.PropertyName || $page.building.Address }}&nbsp;<OverallRankEmoji
+            <h1 id="main-content" tabindex="-1">
+              {{
+                $page.building.PropertyName || $page.building.Address
+              }}&nbsp;<OverallRankEmoji
                 :building="$page.building"
                 :stats="BuildingBenchmarkStats"
                 :large-view="true"
@@ -94,7 +93,8 @@ query ($id: ID!, $ID: String) {
           </div>
 
           <div class="address">
-            {{ $page.building.Address }}, Chicago IL, {{ $page.building.ZIPCode }}
+            {{ $page.building.Address }}, Chicago IL,
+            {{ $page.building.ZIPCode }}
             <a
               :href="'https://www.google.com/maps/search/' + encodedAddress"
               class="google-maps-link"
@@ -114,25 +114,18 @@ query ($id: ID!, $ID: String) {
           <BuildingImage :building="$page.building" />
 
           <!-- Button opens Popup for "Email This Building" -->
-          <button
-            class="email-btn"
-            @click="isModalOpen=true"
-          >
-            <img
-              src="/email.svg"
-              alt=""
-            >
+          <button class="email-btn" @click="isModalOpen = true">
+            <img src="/email.svg" alt="" />
             Email This Building
           </button>
         </div>
 
         <div class="details-cont">
-          <div
-            v-if="dataYear < LatestDataYear"
-            class="building-banner"
-          >
-            <span class="emoji">⚠️</span> This building did not report data in {{ LatestDataYear }},
-            <span class="bold">this data is from {{ dataYear }}</span>, the latest year reported
+          <div v-if="dataYear < LatestDataYear" class="building-banner">
+            <span class="emoji">⚠️</span> This building did not report data in
+            {{ LatestDataYear }},
+            <span class="bold">this data is from {{ dataYear }}</span
+            >, the latest year reported
           </div>
 
           <div class="building-top-info">
@@ -169,7 +162,12 @@ query ($id: ID!, $ID: String) {
               </div>
 
               <!-- Only show building count if set and > 1, most are 1 -->
-              <div v-if="$page.building.NumberOfBuildings && $page.building.NumberOfBuildings > 1">
+              <div
+                v-if="
+                  $page.building.NumberOfBuildings &&
+                  $page.building.NumberOfBuildings > 1
+                "
+              >
                 <dt>Building Count</dt>
                 <dd>{{ $page.building.NumberOfBuildings }}</dd>
               </div>
@@ -180,7 +178,9 @@ query ($id: ID!, $ID: String) {
               </div>
 
               <!-- Show energy rating if it's a float value (not blank or NaN) -->
-              <div v-if="!isNaN(parseFloat($page.building.ChicagoEnergyRating))">
+              <div
+                v-if="!isNaN(parseFloat($page.building.ChicagoEnergyRating))"
+              >
                 <dt>
                   <a
                     href="https://www.chicago.gov/city/en/progs/env/ChicagoEnergyRating.html"
@@ -191,9 +191,7 @@ query ($id: ID!, $ID: String) {
                     <NewTabIcon />
                   </a>
                 </dt>
-                <dd>
-                  {{ $page.building.ChicagoEnergyRating }} / 4
-                </dd>
+                <dd>{{ $page.building.ChicagoEnergyRating }} / 4</dd>
               </div>
 
               <div v-if="$page.building.ENERGYSTARScore">
@@ -207,9 +205,7 @@ query ($id: ID!, $ID: String) {
                     <NewTabIcon />
                   </a>
                 </dt>
-                <dd>
-                  {{ $page.building.ENERGYSTARScore }} / 100
-                </dd>
+                <dd>{{ $page.building.ENERGYSTARScore }} / 100</dd>
               </div>
 
               <div>
@@ -345,9 +341,7 @@ query ($id: ID!, $ID: String) {
       </div>
 
       <details>
-        <summary class="bold">
-          View Extra Technical Info
-        </summary>
+        <summary class="bold">View Extra Technical Info</summary>
 
         <div class="details-content">
           <dl class="stat-tiles -supp">
@@ -386,25 +380,21 @@ query ($id: ID!, $ID: String) {
       </details>
 
       <p class="constrained">
-        <strong>* Note on Rankings:</strong> Rankings and medians are among <em>included</em>
-        buildings, which are those who reported under the Chicago Energy Benchmarking Ordinance for
-        the year {{ LatestDataYear }}, which only applies to buildings over 50,000 square feet.
+        <strong>* Note on Rankings:</strong> Rankings and medians are among
+        <em>included</em> buildings, which are those who reported under the
+        Chicago Energy Benchmarking Ordinance for the year {{ LatestDataYear }},
+        which only applies to buildings over 50,000 square feet.
       </p>
 
       <p class="constrained">
         <strong>** Note on Bill Estimates:</strong>
-        Estimates for gas and electric bills are based on average electric and gas <em>retail</em>
-        prices for Chicago in {{ UtilityCosts.year }} and are rounded. We expect large buildings
-        would negotiate lower rates with utilities, but these estimates serve as an upper bound of
-        cost and help understand the volume of energy a building is used by comparing it to your own
-        energy bills!
-
-        See our
-        <a
-          :href="UtilityCosts.source"
-          target="_blank"
-          rel="noopener"
-        >
+        Estimates for gas and electric bills are based on average electric and
+        gas <em>retail</em> prices for Chicago in {{ UtilityCosts.year }} and
+        are rounded. We expect large buildings would negotiate lower rates with
+        utilities, but these estimates serve as an upper bound of cost and help
+        understand the volume of energy a building is used by comparing it to
+        your own energy bills! See our
+        <a :href="UtilityCosts.source" target="_blank" rel="noopener">
           Chicago Gas & Electric Costs Source <NewTabIcon />
         </a>
         for the original statistics.
@@ -414,14 +404,12 @@ query ($id: ID!, $ID: String) {
 
       <h2>What Should We Do About This?</h2>
 
-      <a href="/take-action-tips">
-        Own this Building? Take Action.
-      </a>
+      <a href="/take-action-tips"> Own this Building? Take Action. </a>
 
       <email-building-modal
         v-if="isModalOpen"
         :building="$page.building"
-        @close="isModalOpen=false"
+        @close="isModalOpen = false"
       />
     </div>
   </DefaultLayout>
@@ -444,7 +432,10 @@ import ReportingTile from '~/components/ReportingTile.vue';
 // This simple JSON is a lot easier to just use directly than going through GraphQL and it's
 // tiny
 import BuildingBenchmarkStats from '../data/dist/building-benchmark-stats.json';
-import { getBuildingImage, IBuildingImage } from '../constants/building-images.constant.vue';
+import {
+  getBuildingImage,
+  IBuildingImage,
+} from '../constants/building-images.constant.vue';
 import {
   IBuilding,
   IHistoricData,
@@ -453,7 +444,10 @@ import {
 } from '../common-functions.vue';
 import { IGraphPoint } from '../components/graphs/BarGraph.vue';
 import PieChart, { IPieSlice } from '../components/graphs/PieChart.vue';
-import { getBuildingCustomInfo, ILink } from '../constants/buildings-custom-info.constant.vue';
+import {
+  getBuildingCustomInfo,
+  ILink,
+} from '../constants/buildings-custom-info.constant.vue';
 import EmailBuildingModal from '../components/EmailBuildingModal.vue';
 
 const EnergyBreakdownColors = {
@@ -484,21 +478,24 @@ const EnergyBreakdownColors = {
   },
   filters: {
     titlecase(value: string) {
-      return value.toLowerCase().replace(/(?:^|\s|-)\S/g, (x) => x.toUpperCase());
+      return value
+        .toLowerCase()
+        .replace(/(?:^|\s|-)\S/g, (x) => x.toUpperCase());
     },
   },
 })
-export default class BuildingDetails  extends Vue {
+export default class BuildingDetails extends Vue {
   // TODO: Move to constant
   graphTitles = {
-    TotalGHGEmissions:  'Total GHG Emissions (metric tons CO<sub>2</sub>e)',
+    TotalGHGEmissions: 'Total GHG Emissions (metric tons CO<sub>2</sub>e)',
     GHGIntensity: 'GHG Intensity (metric tons CO<sub>2</sub>e/sqft)',
     ElectricityUse: 'Electricity Use (kBTU)',
     NaturalGasUse: 'Fossil Gas Use (kBTU)',
   };
 
   /** Expose stats to template */
-  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats = BuildingBenchmarkStats;
+  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats =
+    BuildingBenchmarkStats;
 
   /** Expose UtilityCosts to template */
   readonly UtilityCosts: typeof UtilityCosts = UtilityCosts;
@@ -509,7 +506,7 @@ export default class BuildingDetails  extends Vue {
    */
   readonly LatestDataYear: number = LatestDataYear;
 
-   /** Set by Gridsome to results of GraphQL query */
+  /** Set by Gridsome to results of GraphQL query */
   $page: any;
 
   energyBreakdownData!: Array<IPieSlice>;
@@ -582,8 +579,10 @@ export default class BuildingDetails  extends Vue {
   }
 
   created(): void {
-    this.historicData = this.$page.allBenchmark.edges
-      .map((nodeObj: { node: IHistoricData }) => nodeObj.node) || [];
+    this.historicData =
+      this.$page.allBenchmark.edges.map(
+        (nodeObj: { node: IHistoricData }) => nodeObj.node,
+      ) || [];
 
     this.calculateEnergyBreakdown();
     this.updateGraph();
@@ -592,7 +591,7 @@ export default class BuildingDetails  extends Vue {
   calculateEnergyBreakdown(): void {
     const energyBreakdown = [];
 
-    if (this.building.ElectricityUse as unknown as number > 0) {
+    if ((this.building.ElectricityUse as unknown as number) > 0) {
       energyBreakdown.push({
         label: 'Electricity',
         value: parseFloat(this.building.ElectricityUse.toString()),
@@ -600,7 +599,7 @@ export default class BuildingDetails  extends Vue {
       });
     }
 
-    if (this.building.NaturalGasUse as unknown as number > 0) {
+    if ((this.building.NaturalGasUse as unknown as number) > 0) {
       energyBreakdown.push({
         label: 'Fossil Gas',
         value: parseFloat(this.building.NaturalGasUse.toString()),
@@ -608,15 +607,15 @@ export default class BuildingDetails  extends Vue {
       });
     }
 
-    if (this.building.DistrictSteamUse as unknown as number > 0) {
+    if ((this.building.DistrictSteamUse as unknown as number) > 0) {
       energyBreakdown.push({
-      label: 'District Steam',
-      value: parseFloat(this.building.DistrictSteamUse.toString()),
-      color: EnergyBreakdownColors.DistrictSteam,
-    });
+        label: 'District Steam',
+        value: parseFloat(this.building.DistrictSteamUse.toString()),
+        color: EnergyBreakdownColors.DistrictSteam,
+      });
     }
 
-    if (this.building.DistrictChilledWaterUse as unknown as number > 0) {
+    if ((this.building.DistrictChilledWaterUse as unknown as number) > 0) {
       energyBreakdown.push({
         label: 'District Chilling',
         value: parseFloat(this.building.DistrictChilledWaterUse.toString()),
@@ -625,7 +624,7 @@ export default class BuildingDetails  extends Vue {
     }
 
     let totalEnergyUse = 0;
-    energyBreakdown.forEach((datum) => totalEnergyUse += datum.value);
+    energyBreakdown.forEach((datum) => (totalEnergyUse += datum.value));
     this.totalEnergyUsekBTU = totalEnergyUse;
 
     this.energyBreakdownData = energyBreakdown;
@@ -658,8 +657,8 @@ export default class BuildingDetails  extends Vue {
       justify-content: space-between;
       gap: 0 2rem;
       grid-template-areas:
-        "title img"
-        "details img";
+        'title img'
+        'details img';
 
       .building-header-text {
         grid-area: title;
@@ -675,19 +674,23 @@ export default class BuildingDetails  extends Vue {
         flex-direction: column;
         gap: 0.25rem;
       }
-      .building-banner { grid-area: banner; }
+      .building-banner {
+        grid-area: banner;
+      }
     }
 
     &:not(.-img-tall) {
       display: grid;
       grid-template-areas:
-        "img"
-        "details";
+        'img'
+        'details';
 
       .building-header-text {
         grid-area: img;
       }
-      .building-banner { grid-area: banner; }
+      .building-banner {
+        grid-area: banner;
+      }
       .building-img-cont {
         grid-area: img;
         width: 80%;
@@ -708,12 +711,17 @@ export default class BuildingDetails  extends Vue {
         border-top-right-radius: 0.5rem;
         border-bottom-right-radius: 0.5rem;
 
-        h1, .address { margin: 0; }
+        h1,
+        .address {
+          margin: 0;
+        }
       }
     }
   }
 
-  h1 { margin: 0; }
+  h1 {
+    margin: 0;
+  }
 
   h2 {
     margin: 2.5rem 0 0;
@@ -728,7 +736,9 @@ export default class BuildingDetails  extends Vue {
     margin: 1rem 0;
     justify-self: flex-start;
 
-    span.emoji { margin-right: 0.5rem; }
+    span.emoji {
+      margin-right: 0.5rem;
+    }
   }
 
   .address {
@@ -742,7 +752,7 @@ export default class BuildingDetails  extends Vue {
 
   .building-id {
     font-size: 0.75rem;
-    margin-top: 0;;
+    margin-top: 0;
   }
 
   .building-top-info {
@@ -751,7 +761,9 @@ export default class BuildingDetails  extends Vue {
     padding: 1rem 1.5rem;
     margin-top: 1rem;
 
-    h2 { margin-top: 0; }
+    h2 {
+      margin-top: 0;
+    }
   }
 
   .email-btn {
@@ -768,7 +780,8 @@ export default class BuildingDetails  extends Vue {
     font-weight: bold;
     border-radius: $brd-rad-medium;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       background-color: $blue-very-dark;
     }
 
@@ -782,7 +795,9 @@ export default class BuildingDetails  extends Vue {
     display: flex;
     gap: 2rem;
 
-    .stat-tiles-col { flex-basis: 70%; }
+    .stat-tiles-col {
+      flex-basis: 70%;
+    }
     .chart-cont {
       flex-basis: 30%;
       flex-shrink: 0;
@@ -825,9 +840,14 @@ export default class BuildingDetails  extends Vue {
       margin-bottom: 0.5rem;
     }
 
-    dd, .stat-tile { height: 100%; }
+    dd,
+    .stat-tile {
+      height: 100%;
+    }
 
-    .stat-tile { min-width: 18rem; }
+    .stat-tile {
+      min-width: 18rem;
+    }
   }
 
   .reporting-tile {
@@ -838,18 +858,24 @@ export default class BuildingDetails  extends Vue {
   details {
     margin: 2rem 0;
 
-    .stat-tiles dt { font-size: 1.25rem; }
+    .stat-tiles dt {
+      font-size: 1.25rem;
+    }
   }
 
   ul {
     margin-top: 0.5rem;
 
-    li + li { margin-top: 0.25rem; }
+    li + li {
+      margin-top: 0.25rem;
+    }
   }
 
   /** Small desktop sizing - split to just two columns from three */
   @media (max-width: 1200px) {
-    .main-cols { flex-direction: column-reverse; }
+    .main-cols {
+      flex-direction: column-reverse;
+    }
   }
 
   /**
@@ -857,19 +883,25 @@ export default class BuildingDetails  extends Vue {
    */
   @media (max-width: $mobile-max-width) {
     .building-header {
-      .building-img-cont, .building-header-text { width: 100%; }
+      .building-img-cont,
+      .building-header-text {
+        width: 100%;
+      }
       .email-btn {
         align-self: flex-start;
       }
 
-      .building-header-text { position: relative; }
+      .building-header-text {
+        position: relative;
+      }
 
       &.-has-img {
-        &:not(.-img-tall), &.-img-tall {
+        &:not(.-img-tall),
+        &.-img-tall {
           grid-template-areas:
-            "title"
-            "img"
-            "details";
+            'title'
+            'img'
+            'details';
         }
 
         &:not(.-img-tall) {
@@ -883,19 +915,27 @@ export default class BuildingDetails  extends Vue {
           }
 
           // On mobile wide images can go full width
-          .building-img-cont { width: 100%; }
+          .building-img-cont {
+            width: 100%;
+          }
         }
 
         &.-img-tall {
           // Constrain tall images on mobile so they don't take up the whole view height
-          .building-img-cont { width: 75%; }
+          .building-img-cont {
+            width: 75%;
+          }
         }
       }
 
-      .building-top-info dl { gap: 1rem; }
+      .building-top-info dl {
+        gap: 1rem;
+      }
     }
 
-    .main-cols .chart-cont { margin-top: 0; }
+    .main-cols .chart-cont {
+      margin-top: 0;
+    }
 
     // Break GMaps link to new line
     .address .google-maps-link {
diff --git a/src/templates/BuildingIDRedirect.vue b/src/templates/BuildingIDRedirect.vue
index 305a1312..0ba11cca 100644
--- a/src/templates/BuildingIDRedirect.vue
+++ b/src/templates/BuildingIDRedirect.vue
@@ -6,13 +6,19 @@
 export default {
   metaInfo() {
     return {
-        title: `Redirecting to ${this.$page.building.path}`,
-        meta: [
-            { 'http-equiv': 'refresh', content: `0; URL=${this.$page.building.path}`},
-        ],
-        link: [
-            { rel: 'canonical', href: `https://electrifychicago.net/${this.$page.building.path}` },
-        ],
+      title: `Redirecting to ${this.$page.building.path}`,
+      meta: [
+        {
+          'http-equiv': 'refresh',
+          content: `0; URL=${this.$page.building.path}`,
+        },
+      ],
+      link: [
+        {
+          rel: 'canonical',
+          href: `https://electrifychicago.net/${this.$page.building.path}`,
+        },
+      ],
     };
   },
 };
@@ -24,4 +30,4 @@ query ($id: ID!) {
     path
   }
 }
-</page-query>
\ No newline at end of file
+</page-query>
diff --git a/src/templates/BuildingOwner.vue b/src/templates/BuildingOwner.vue
index 932bf9ea..fc96ef88 100644
--- a/src/templates/BuildingOwner.vue
+++ b/src/templates/BuildingOwner.vue
@@ -7,12 +7,17 @@ import DataSourceFootnote from '~/components/DataSourceFootnote.vue';
 import NewTabIcon from '~/components/NewTabIcon.vue';
 import { IBuildingBenchmarkStats, IBuilding } from '../common-functions.vue';
 import {
-  BuildingOwners, IBuildingOwner, BuildingsCustomInfo, IBuildingCustomInfo,
+  BuildingOwners,
+  IBuildingOwner,
+  BuildingsCustomInfo,
+  IBuildingCustomInfo,
 } from '../constants/buildings-custom-info.constant.vue';
 
 import BuildingBenchmarkStats from '../data/dist/building-benchmark-stats.json';
 
-interface IBuildingEdge { node: IBuilding; }
+interface IBuildingEdge {
+  node: IBuilding;
+}
 
 // TODO: Figure out a way to get metaInfo working without any
 // https://github.com/xerebede/gridsome-starter-typescript/issues/37
@@ -24,14 +29,17 @@ interface IBuildingEdge { node: IBuilding; }
     NewTabIcon,
   },
   metaInfo() {
-    return { title:  (this.currOwner?.nameShort + ' Buildings') || 'Building Owner' };
+    return {
+      title: this.currOwner?.nameShort + ' Buildings' || 'Building Owner',
+    };
   },
 })
 export default class BiggestBuildings extends Vue {
   readonly BuildingOwners = BuildingOwners;
 
   /** Expose stats to template */
-  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats = BuildingBenchmarkStats;
+  readonly BuildingBenchmarkStats: IBuildingBenchmarkStats =
+    BuildingBenchmarkStats;
 
   /** Set by Gridsome to results of GraphQL query */
   readonly $static: any;
@@ -61,16 +69,21 @@ export default class BiggestBuildings extends Vue {
 
   filterBuildings(ownerId: string): void {
     // Loop through BuildingsCustomInfo to get the IDs of buildings we are looking for
-    const ownerBuildingsSlugs: Array<string> = Object.entries(BuildingsCustomInfo)
-      .filter(([ , buildingInfo ]: [string, IBuildingCustomInfo]) => {
+    const ownerBuildingsSlugs: Array<string> = Object.entries(
+      BuildingsCustomInfo,
+    )
+      .filter(([, buildingInfo]: [string, IBuildingCustomInfo]) => {
         return buildingInfo.owner === ownerId;
-      }).map(([ buildingID ]: [string, IBuildingCustomInfo]) => buildingID);
-
-    this.buildingsFiltered =
-      this.$static.allBuilding.edges.filter((buildingEdge: IBuildingEdge) => {
-        return ownerBuildingsSlugs.some((ownedBuildingID) =>
-          buildingEdge.node.ID  === ownedBuildingID);
-      });
+      })
+      .map(([buildingID]: [string, IBuildingCustomInfo]) => buildingID);
+
+    this.buildingsFiltered = this.$static.allBuilding.edges.filter(
+      (buildingEdge: IBuildingEdge) => {
+        return ownerBuildingsSlugs.some(
+          (ownedBuildingID) => buildingEdge.node.ID === ownedBuildingID,
+        );
+      },
+    );
   }
 
   calculateOwnedBuildingStats(): void {
@@ -85,13 +98,16 @@ export default class BiggestBuildings extends Vue {
     });
 
     this.totalGHGEmissions = Math.round(totalGHGEmissions).toLocaleString();
-    const avgGHGIntensity: number = totalGHGIntensity / this.buildingsFiltered.length;
+    const avgGHGIntensity: number =
+      totalGHGIntensity / this.buildingsFiltered.length;
     this.avgGHGIntensity = avgGHGIntensity.toFixed(1);
 
-    this.medianGHGIntensityMultiple =
-      (avgGHGIntensity / BuildingBenchmarkStats.GHGIntensity.median).toFixed(0);
-    this.medianGHGEmissionsMultiple =
-      (totalGHGEmissions / BuildingBenchmarkStats.TotalGHGEmissions.median).toFixed(0);
+    this.medianGHGIntensityMultiple = (
+      avgGHGIntensity / BuildingBenchmarkStats.GHGIntensity.median
+    ).toFixed(0);
+    this.medianGHGEmissionsMultiple = (
+      totalGHGEmissions / BuildingBenchmarkStats.TotalGHGEmissions.median
+    ).toFixed(0);
   }
 }
 </script>
@@ -133,33 +149,23 @@ export default class BiggestBuildings extends Vue {
 <template>
   <DefaultLayout>
     <div class="building-owner-page">
-      <h1
-        id="main-content"
-        tabindex="-1"
-      >
-        <div class="top-title">
-          Buildings Owned By
-        </div>
-
-        <img
-          :src="currOwner.logoLarge"
-          alt=""
-        >
+      <h1 id="main-content" tabindex="-1">
+        <div class="top-title">Buildings Owned By</div>
+
+        <img :src="currOwner.logoLarge" alt="" />
 
         {{ currOwner.name }}
       </h1>
 
       <p class="constrained -wide">
-        These are buildings that we have manually tagged as being owned by {{ currOwner.name }},
-        so this may not be a definitive list.
+        These are buildings that we have manually tagged as being owned by
+        {{ currOwner.name }}, so this may not be a definitive list.
       </p>
 
       <h2>Building Stats</h2>
 
       <ul class="stats">
-        <li class="bold">
-          {{ buildingsFiltered.length }} Tagged Buildings
-        </li>
+        <li class="bold">{{ buildingsFiltered.length }} Tagged Buildings</li>
 
         <li>
           <strong>
@@ -169,10 +175,12 @@ export default class BiggestBuildings extends Vue {
 
           <p class="footnote">
             <strong>
-              Equivalent to {{ medianGHGEmissionsMultiple }} of the median benchmarked
-              building
+              Equivalent to {{ medianGHGEmissionsMultiple }} of the median
+              benchmarked building
             </strong>
-            ({{ BuildingBenchmarkStats.TotalGHGEmissions.median.toLocaleString() }}
+            ({{
+              BuildingBenchmarkStats.TotalGHGEmissions.median.toLocaleString()
+            }}
             tons CO<sub>2</sub>e)
           </p>
         </li>
@@ -184,17 +192,19 @@ export default class BiggestBuildings extends Vue {
           </strong>
 
           <p class="footnote">
-            <strong>{{ medianGHGIntensityMultiple }}x the median benchmarked building</strong>
-            ({{ BuildingBenchmarkStats.GHGIntensity.median }} kg CO<sub>2</sub>/sqft)
+            <strong
+              >{{ medianGHGIntensityMultiple }}x the median benchmarked
+              building</strong
+            >
+            ({{ BuildingBenchmarkStats.GHGIntensity.median }} kg
+            CO<sub>2</sub>/sqft)
           </p>
         </li>
       </ul>
 
       <DataDisclaimer />
 
-      <BuildingsTable
-        :buildings="buildingsFiltered"
-      />
+      <BuildingsTable :buildings="buildingsFiltered" />
 
       <DataSourceFootnote />
     </div>
@@ -218,15 +228,21 @@ export default class BiggestBuildings extends Vue {
     }
   }
 
-  h2 { margin-bottom: 0.5rem; }
+  h2 {
+    margin-bottom: 0.5rem;
+  }
 
   .stats {
     margin-top: 0;
     padding-left: 1.25rem;
 
-    li + li { margin-top: 0.5rem; }
+    li + li {
+      margin-top: 0.5rem;
+    }
 
-    .footnote { margin: 0rem; }
+    .footnote {
+      margin: 0rem;
+    }
   }
 }
 </style>
diff --git a/src/vue-shims.d.ts b/src/vue-shims.d.ts
index 0660bd67..8f6f4102 100644
--- a/src/vue-shims.d.ts
+++ b/src/vue-shims.d.ts
@@ -1,4 +1,4 @@
-declare module "*.vue" {
-  import Vue from "vue";
+declare module '*.vue' {
+  import Vue from 'vue';
   export default Vue;
 }
diff --git a/static/README.md b/static/README.md
index 1dd0aae4..db048ce9 100644
--- a/static/README.md
+++ b/static/README.md
@@ -1,3 +1,3 @@
 Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
 
-This file should be deleted.
\ No newline at end of file
+This file should be deleted.
diff --git a/tsconfig.json b/tsconfig.json
index 1a6ccf26..a2c82de5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,21 +1,19 @@
 {
-    "compilerOptions": {
-        "target": "es5",
-        "module": "es6",
-        "moduleResolution": "node",
-        "noImplicitReturns": true,
-        "experimentalDecorators": true,
-        "outDir": "./built/",
-        "sourceMap": true,
-        "strict": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
-    },
-    "paths": {
-      "~/*": ["./src/*"],
-      "@/*": ["./src/*"]
-    },
-    "include": [
-        "./src/**/*"
-    ]
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es6",
+    "moduleResolution": "node",
+    "noImplicitReturns": true,
+    "experimentalDecorators": true,
+    "outDir": "./built/",
+    "sourceMap": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  },
+  "paths": {
+    "~/*": ["./src/*"],
+    "@/*": ["./src/*"]
+  },
+  "include": ["./src/**/*"]
 }
diff --git a/yarn.lock b/yarn.lock
index f632067e..a71b135c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8621,6 +8621,11 @@ prettier@1.16.3:
   resolved "https://registry.npmjs.org/prettier/-/prettier-1.16.3.tgz"
   integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
 
+prettier@3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f"
+  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
+
 "prettier@^1.18.2 || ^2.0.0":
   version "2.8.8"
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz"