diff --git a/app/assets/stylesheets/components/_select.scss b/app/assets/stylesheets/components/_select.scss
index 44c856431..5d61265fa 100644
--- a/app/assets/stylesheets/components/_select.scss
+++ b/app/assets/stylesheets/components/_select.scss
@@ -33,6 +33,6 @@ $select-selected-color: $grey-light;
 // selects
 //--------------------------------------------------
 .select {
-  @import './select/select';
+  @import './select/select-equity';
   @import './select/select-searchable';
 }
diff --git a/app/assets/stylesheets/components/hero/_hero-basic.scss b/app/assets/stylesheets/components/hero/_hero-basic.scss
index 601e13916..efc9933d5 100644
--- a/app/assets/stylesheets/components/hero/_hero-basic.scss
+++ b/app/assets/stylesheets/components/hero/_hero-basic.scss
@@ -5,9 +5,9 @@
   @include hero-medium;
   @include flex;
   @include flex-v-center;
+  z-index: 0;
   
   &.about { background-image: image_url('hero/about.png'); }
-  &.equity { background-image: image_url('hero/equity.png'); }
 
   .hero__content {
     @include breakpoint($small) { width: 80%; }
diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
new file mode 100644
index 000000000..1763d67aa
--- /dev/null
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -0,0 +1,161 @@
+&--equity {
+    @include breakpoint($medium) {
+        display: flex;
+        max-width: none;
+    }
+    
+    max-width: rem-calc(685);
+    margin: 0 auto;
+    display: block;
+
+    &__button {
+        @include flex-vs-start;
+        border-radius: rem-calc(4);
+    }
+
+    &__content {
+        @include breakpoint-down($small) {
+            img {
+                object-fit: contain;
+            }
+        }
+        @include breakpoint($small) {
+            height: rem-calc(507);
+            padding: rem-calc(30 0);
+
+            img {
+                object-fit: cover; 
+            }
+        }
+        @include breakpoint($medium) {
+            width: 50%;
+            height: auto;
+            padding: rem-calc(60 0);
+        }
+
+        @include flex;
+        border: 1px solid $grey-dark;
+       
+        height: rem-calc(271);
+        padding: rem-calc(20 0);
+
+        img {
+            margin: 0 auto;                 
+        }
+    }
+
+    &__description {
+        @include flex-grow;
+    }
+
+    &__header {
+        @include breakpoint($small) {
+            margin-bottom: rem-calc(8);
+        }
+        @include breakpoint($medium) {
+            margin-bottom: rem-calc(14);
+        }
+
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    &__panel {
+        @include breakpoint($small) {
+            padding: rem-calc(50 44 62 49);
+        }
+        @include breakpoint($medium) {
+            padding: rem-calc(41 40 29 57);
+            width: 50%;
+        }
+        padding: rem-calc(32 13 29 18);
+
+        @include flex;
+        @include flex-column;
+
+        background-color: $grey-xlight;
+    }
+
+
+}
+
+// Custom select for this component
+&--dropdown {
+    &__custom-select {
+        @include breakpoint($small) {
+            margin: rem-calc(30 0 36);
+        }
+        @include breakpoint($medium) {
+            margin: rem-calc(14 0 19);
+        }
+        margin: rem-calc(0 0 27);
+        position: relative;
+        user-select: none;
+        width: 100%;
+    }
+
+    &__selected {
+        @include breakpoint($small) {
+            padding: rem-calc(20 24);
+        }
+
+        @include flex;
+        @include flex-v-center;
+        @include flex-h-between;
+        @include text-body;
+
+        background: $white;
+        border: 1px solid $grey-black;
+        cursor: pointer;
+        line-height: 1.9;
+        padding: rem-calc(11 20);
+        position: relative;
+    }
+
+    &__options {
+        display: none;
+
+        &--active {
+            height: 40vh;
+            background: $white;
+            border: 1px solid $grey-black;
+            border-top: 0;
+            overflow: scroll;
+            display: block;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            z-index: 2;
+        }
+    }
+
+    &__option {
+        @include breakpoint($small) {
+            padding: rem-calc(5 24);
+        }
+        
+        @include text-body;
+
+        line-height: 1.9;
+        display: block;
+        padding: rem-calc(2 20);
+        position: relative;
+
+        &:hover {
+            background-color: $grey-light;
+        }
+    }
+
+    &__dropdown {
+        @include icon-chevron-black-down;
+        height: rem-calc(10);
+        width: rem-calc(18);
+        transform: rotate(0deg);
+
+        &--active {
+            @extend .select--dropdown__dropdown;
+            transform: rotate(180deg);
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/controllers/wdpa_controller.rb b/app/controllers/wdpa_controller.rb
index 09e5cd7cb..19a8e0c37 100644
--- a/app/controllers/wdpa_controller.rb
+++ b/app/controllers/wdpa_controller.rb
@@ -8,23 +8,6 @@ def index
     }.to_json
 
     @filters = { db_type: ['wdpa'] }
-    @tabs = get_tabs(3).to_json
-  end
-
-  private
-
-  def get_tabs total_tabs
-    tabs = []
-
-    total_tabs.times do |i|
-      tab = {
-        id: i+1,
-        title: @cms_page.fragments.where(identifier: "tab-title-#{i+1}").first.content
-      }
-
-      tabs << tab
-    end
-
-    tabs
+    @tabs = helpers.get_cms_tabs(3).to_json
   end
 end
\ No newline at end of file
diff --git a/app/helpers/cms_helper.rb b/app/helpers/cms_helper.rb
index d4e1a7591..e7695bf0c 100644
--- a/app/helpers/cms_helper.rb
+++ b/app/helpers/cms_helper.rb
@@ -36,6 +36,21 @@ def cms_page_path page
     "#"
   end
 
+  def get_cms_tabs total_tabs
+    tabs = []
+
+    total_tabs.times do |i|
+      tab = {
+        id: i+1,
+        title: @cms_page.fragments.where(identifier: "tab-title-#{i+1}").first.content
+      }
+
+      tabs << tab
+    end
+
+    tabs
+  end
+
   def hasParent? page
     page.parent
   end
diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
new file mode 100644
index 000000000..085f2cf28
--- /dev/null
+++ b/app/helpers/equity_helper.rb
@@ -0,0 +1,32 @@
+module EquityHelper
+    def tabs
+        @tabs = get_cms_tabs(2).to_json
+    end
+
+    def pa_pages
+        @pa_pages ||= @cms_page.children.first.children
+    end
+
+    def text
+        @text ||= cms_fragment_content(:text, @pa_pages.first)
+    end
+    
+    def protected_areas
+        pa_pages.published.map do |child|
+            {
+                title: child.label,
+                text: parsed_text(text),
+                url: child.full_path,
+                image: include_image(cms_fragment_content(:text, child))
+            }          
+        end
+    end
+    
+    def include_image(pa_page)
+        Nokogiri::HTML(pa_page).css("img").attr('src').value
+    end
+
+    def parsed_text(text)
+        Nokogiri::HTML(text).css("p").last.text rescue "No description available."
+    end
+end
\ No newline at end of file
diff --git a/app/javascript/components/select/SelectDropdown.vue b/app/javascript/components/select/SelectDropdown.vue
new file mode 100644
index 000000000..cbbefa933
--- /dev/null
+++ b/app/javascript/components/select/SelectDropdown.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="select--dropdown__custom-select">
+    <div class="select--dropdown__custom-select-box">
+      <div class="select--dropdown__selected" @click="toggleVis">
+        <span>{{ selected.title }}</span>
+        <div
+          :class="[ isActive ? 'select--dropdown__dropdown--active' : 'select--dropdown__dropdown' ]"
+        ></div>
+      </div>
+      <div :class="[ isActive ? 'select--dropdown__options--active' : 'select--dropdown__options' ]">
+        <span
+          v-for="(area, index) in protectedAreas"
+          :key="index"
+          class="select--dropdown__option"
+          @click="selectArea(index)"
+        >{{ area.title }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixinPopupCloseListeners from "../../mixins/mixin-popup-close-listeners"
+
+export default {
+  name: "SelectDropdown",
+  mixins: [ mixinPopupCloseListeners({closeCallback: 'close', toggleVariable: 'isActive'}) ],
+  props: {
+    protectedAreas: {
+      type: Array
+    }
+  },
+
+  data() {
+    return {
+      isActive: false,
+      selected: this.protectedAreas[0]
+    };
+  },
+  methods: {
+    toggleVis() {
+      this.isActive ? this.close() : this.open();
+    },
+    close() {
+      this.isActive = false;
+    },
+    open() {
+      this.isActive = true;
+    },
+    selectArea(index) {
+        this.selected = this.protectedAreas[index];
+        this.close();
+        this.$emit('pa-selected', this.selected);
+    }
+  }
+};
+</script>
+
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
new file mode 100644
index 000000000..59d31d95b
--- /dev/null
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="select--equity">
+    <div class="select--equity__content">
+      <img :src="selected.image" :alt="'Visual results for ' + selected.title" />
+    </div>
+
+    <div class="select--equity__panel">
+      <h2 class="select--equity__header">Results from study sites</h2>
+      <p class="select--equity__description">{{ selected.text }}</p>
+      <select-dropdown :protected-areas="protectedAreas" @pa-selected="changeSelection" />
+      <a
+        :href="selected.url"
+        class="button--primary select--equity__button"
+        title="View the protected area"
+      >View Protected Area</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectDropdown from "./SelectDropdown";
+
+export default {
+  name: "select-equity",
+  components: { SelectDropdown },
+  props: {
+    protectedAreas: {
+      type: Array
+    }
+  },
+
+  data() {
+    return {
+      selected: this.protectedAreas[0]
+    };
+  },
+  methods: {
+    changeSelection(selected) {
+      this.selected = selected;
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/app/javascript/vue.js b/app/javascript/vue.js
index f360b7476..75d3fdf71 100644
--- a/app/javascript/vue.js
+++ b/app/javascript/vue.js
@@ -38,6 +38,7 @@ import SearchAreas from './components/search/SearchAreas'
 import SearchAreasHome from './components/search/SearchAreasHome'
 import SearchSite from './components/search/SearchSite'
 import SearchSiteTopbar from './components/search/SearchSiteTopbar'
+import SelectEquity from './components/select/SelectEquity'
 import SelectWithContent from './components/select/SelectWithContent'
 import StickyBar from './components/sticky/StickyBar'
 import StickyNav from './components/sticky/StickyNav'
@@ -89,6 +90,7 @@ document.addEventListener('DOMContentLoaded', () => {
         SearchAreasHome,
         SearchSite,
         SearchSiteTopbar,
+        SelectEquity,
         SelectWithContent,
         StickyBar,
         StickyNav,
diff --git a/app/views/layouts/cms/_equity.html.erb b/app/views/layouts/cms/_equity.html.erb
index b81e6b721..a320b1f5d 100644
--- a/app/views/layouts/cms/_equity.html.erb
+++ b/app/views/layouts/cms/_equity.html.erb
@@ -1,8 +1,21 @@
-<%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %>
+
+<%= render partial: "./layouts/partials/hero-basic", locals: { 
+    classes: "#{@cms_page.slug} bg-image-overlay--white" ,
+    hero_image: cms_fragment_render(:theme_image, @cms_page),
+    summary: cms_fragment_render("summary"),
+    title: @cms_page.label
+  } 
+%>
+
+<section class="container">
+  <%= render partial: "partials/tabs/tabs-equity", locals: { 
+    tabs: tabs
+  } %>
+</section>
 
 <section class="container">
-  <%= cms_fragment_render("content") %>
+  <%= render "partials/cards/resources" %>
 </section>
 
-<%#= render "partials/carousels/themes" %>
+<%= render "partials/carousels/themes" %>
 <%= render "partials/ctas/live-report" %>
\ No newline at end of file
diff --git a/app/views/partials/tabs/_tabs-equity.html.erb b/app/views/partials/tabs/_tabs-equity.html.erb
new file mode 100644
index 000000000..164fb9c93
--- /dev/null
+++ b/app/views/partials/tabs/_tabs-equity.html.erb
@@ -0,0 +1,24 @@
+<tabs
+  class="tabs--hero"
+  :tab-triggers="<%= tabs %>"
+>
+  <template slot-scope="{ selectedId }">
+    <tab-target :id="1" :selected-id="selectedId">
+      <section class="container--medium section-padding--bottom">
+        <%= cms_fragment_render("tab-content-1") %>
+      </section>
+  
+      <section class="section-padding--bottom">
+        <select-equity
+          :protected-areas="<%= protected_areas.to_json %>"
+        />
+      </section>
+    </tab-target>
+
+    <tab-target :id="2" :selected-id="selectedId">
+      <section class="container--medium">
+        <%= cms_fragment_render("tab-content-2") %>
+      </section>
+    </tab-target>
+  </template>
+</tabs>
\ No newline at end of file
diff --git a/db b/db
index 93c53057c..1d1133155 160000
--- a/db
+++ b/db
@@ -1 +1 @@
-Subproject commit 93c53057c07db4e2bc086bd4858fb30af5b1c1f4
+Subproject commit 1d1133155f6000eb45b0cd75c6915dd7c74a9ef4