diff --git a/src/components/Maps.vue b/src/components/Maps.vue
index f08c3232096107c1361daf9351793394e8f0e8ef..026beae421bd57cbcdecd8b8dae64dc6038e3ce8 100644
--- a/src/components/Maps.vue
+++ b/src/components/Maps.vue
@@ -1,105 +1,79 @@
 <template>
   <section id="map">
-    <div id="grid-container-map">
-      <div id="title" class="text-container title-text">
-        <h3>Case studies across the Western states</h3>
-        <p>Orange = Positively correlated to water insecurity conditions</p>
-        <p>Blue = Negatively correlated to water insecurity conditions</p>
-      </div>
-
-      <div id="map-images" class="img-container">
-        <img src="@/assets/images/tot_households_2022.png" alt="Map of total households 2022">
-        <img src="@/assets/images/tot_female_households_2022.png" alt="Map of total female led households 2022">
-        <img src="@/assets/images/med_income_census_2022.png" alt="Map of median income 2022">
-        <img src="@/assets/images/median_rent_2022.png" alt="Map of median rent 2022">
-        <img src="@/assets/images/tot_latino_census_2022.png" alt="Map of total latino population 2022">
-        <img src="@/assets/images/perc_latino_census_2022.png" alt="Map of percent latino population 2022">
-      </div>
-
-      <div id="description" class="text-container">
-        <p>
-          Factors associated with social vulnerability to water insecurity are not equally distributed across the Western United States.
-          Certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties
-          have much lower median household incomes than other counties do. Understanding where these vulnerable populations live is
-          important information for water-resource managers to make equitable decisions about water availability and use.
-        </p>
-      </div>
-    </div>
+    <div
+      id="title"
+      class="text-container title-text"
+    >
+      <h3>Case studies across the Western states</h3>
+      <p>Orange = Positively correlated to water insecurity conditions</p>
+  <p>Blue = Negatively correlated to water insecurity conditions</p><br>
+      <img src="@/assets/images/tot_households_2022.png" alt="Map of total households 2022">
+      <img src="@/assets/images/tot_female_households_2022.png" alt="Map of total female led households 2022">
+      <img src="@/assets/images/med_income_census_2022.png" alt="Map of median income 2022">
+      <img src="@/assets/images/median_rent_2022.png" alt="Map of median rent 2022">
+      <img src="@/assets/images/tot_latino_census_2022.png" alt="Map of total latino population 2022">
+      <img src="@/assets/images/perc_latino_census_2022.png" alt="Map of percent latino population 2022"><br><br>
+      Factors associated with social vulnerability to water insecurity are not equally distributed across the Western United States. Certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties have much lower median household incomes than other counties do. Understanding where these vulnerable populations live is important information for water-resource managers to make equitable decisions about water availability and use. 
+</div>
+      <!-- <h3 v-html="mapsText.title"/> -->
+    <div id="map-container"></div>
+    <!-- <div
+      id="text1"
+      class="text-container"
+    >
+      <p v-html="mapsText.paragraph1"/>
+    </div> -->
   </section>
 </template>
 
 <script>
-import { onMounted, ref } from "vue";
-import { isMobile } from 'mobile-device-detect';
-import * as d3 from 'd3';
-import mapText from './../assets/text/mapText';
+  import { onMounted, ref } from "vue";
+  import { isMobile } from 'mobile-device-detect';
+  import * as d3 from 'd3';
+  import mapText from './../assets/text/mapText';
+
+  // global variables
+  const mobileView = isMobile;
+  const mapsText = mapText.mapText;
 
-export default {
-  name: "MapSection",
-  components: {},
-  data() {
-    return {
-      mobileView: isMobile,
-      mapsText: mapText.mapText
-    };
-  },
-  mounted() {
-    const self = this;
-  }
-};
 </script>
 
 <style scoped lang="scss">
-#grid-container-map {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto auto auto auto;
-  grid-template-areas:
-    "title"
-    "map-images"
-    "description"
-    "map-container";
-  justify-content: center;
-  max-width: 90vw;
-  margin: auto;
-  display: grid;
-  padding: 20px 0 20px 0;
-  gap: 5px;
-  margin: 0rem auto 3rem auto;
-  max-width: 90vw;
-  min-width: 90vw;
-}
-
-#title {
-  grid-area: title;
-  margin: 1rem 0;
-  text-align: center; 
-  max-width: 90vw;
-  margin: auto;
-  display: grid;
+  #grid-container-interactive {
+    display: grid;
     padding: 20px 0 20px 0;
     gap: 5px;
+    grid-template-columns: 65vw 25vw;
+    grid-template-rows: max-content max-content max-content max-content;
+    grid-template-areas:
+      "title title"
+      "text text"
+      "map legend";
+    justify-content: center;
     margin: auto;
     max-width: 90vw;
     min-width: 90vw;
-}
+    // @media screen and (max-height: 770px) {
+    //   row-gap: 4vh;
+    //   margin: 4rem 0rem 5rem 0rem;
+    // }
+  }
 
-#map-images {
-  grid-area: map-images;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 1rem;
-  margin: 5rem 0;
-}
+  #grid-title {
+    grid-area: title;
+    align-self: center;
+  }
 
-.img-container img {
-  width: 100%;
-  max-width: 35%;
-}
+  #text {
+    grid-area: text;
+  }
+
+  #map-container {
+    pointer-events: none;
+    grid-area: map;
+    height: 100%;
+    max-height: 70vh;
+  }
 
-#description {
-  grid-area: description;
-}
 
 </style>
\ No newline at end of file