diff --git a/frontend/src/assets/css/global.scss b/frontend/src/assets/css/global.scss
index e0ed848..bd05fe4 100644
--- a/frontend/src/assets/css/global.scss
+++ b/frontend/src/assets/css/global.scss
@@ -1,7 +1,8 @@
 @import 'theme';
 @import '../font/font.css';
 
-.draw-toggle-btn {
+.draw-toggle-btn,
+.clear-filters-btn {
   background-repeat: no-repeat;
   background-size: 60% 60%;
   background-position: center;
@@ -26,15 +27,5 @@
 
 .clear-filters-btn {
   background-image: url('/ClearFilter.ico');
-  background-repeat: no-repeat;
-  background-size: 60% 60%;
   background-color: white;
-  background-position: center;
-  border-radius: 4px;
-  width: 34px;
-  height: 34px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
diff --git a/frontend/src/assets/css/theme.scss b/frontend/src/assets/css/theme.scss
index 9e0a996..75967f1 100644
--- a/frontend/src/assets/css/theme.scss
+++ b/frontend/src/assets/css/theme.scss
@@ -98,10 +98,6 @@ mark {
   color: inherit;
 }
 
-p {
-  max-width: 70rem;
-}
-
 .snip-2 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
diff --git a/frontend/src/assets/justin-mcfadden-unsplash.jpg b/frontend/src/assets/justin-mcfadden-unsplash.jpg
new file mode 100644
index 0000000..417278d
Binary files /dev/null and b/frontend/src/assets/justin-mcfadden-unsplash.jpg differ
diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
index 8bc7a67..d01bca6 100644
--- a/frontend/src/views/AboutView.vue
+++ b/frontend/src/views/AboutView.vue
@@ -1,199 +1,301 @@
 <template>
-  <v-container fluid class="pa-0">
-    <home-view></home-view>
-
-    <div class="pa-4">
-      <div class="useful-links-wrapper mb-5">
-        <h3>Hydrologic Process Knowledge Platform</h3>
-        <p>
-          This project enables users to view and search a hydrologic process knowledge database
-          derived from perceptual models of research watersheds around the globe (McMillan et al.,
-          2023, 2025). The relational database captures extensive knowledge from hundreds of
-          experimental watersheds using standardized workflows and a hierarchical Hydrologic Process
-          Taxonomy to ensure consistency and data quality (McMillan, 2022).
-        </p>
-        <p>
-          Potential use cases for this platform include, but are not limited to, exploring global
-          patterns of hydrologic function and analyzing how dominant processes relate to physical
-          watershed features. The database can also support evaluation of next-generation,
-          continental-scale hydrologic models, which often lack the process-level data needed to
-          inform model structure.
-        </p>
-      </div>
+  <v-container fluid class="about-page px-0">
+    <section class="about-shell">
+      <div class="about-hero">
+        <div class="about-hero-text">
+          <p class="about-eyebrow">PROJECTS, PEOPLE, & PUBLICATIONS</p>
+          <h1 class="about-title">About the Hydrological Process Knowledge Hub</h1>
+          <p class="about-text">
+            A shared platform for exploring hydrologic process knowledge across site, regional, and
+            continental scales. Below you can find the team, funding resources, publications, and
+            data citations behind each project.
+          </p>
+        </div>
 
-      <div class="useful-links-wrapper mb-5">
-        <h3>Hydrologic Processes</h3>
-        <p>
-          Hydrologic processes describe the flow paths and mechanisms that move water from the
-          canopy and land surface to its release into streams, deep groundwater or
-          evapotranspiration. Hydrologists often communicate process knowledge using a perceptual
-          model, a qualitative summary of our knowledge about the hydrologic system presented as a
-          schematic figure or a text description. Perceptual models are one of the best tools that
-          the hydrologic community has to organize hydrologic knowledge, test hypotheses about
-          runoff generation, design accurate computer models to predict river flows, and identify
-          knowledge gaps.
-        </p>
+        <v-img
+          :src="aboutTemplate"
+          alt="Hydrologic Process Knowledge Hub overview"
+          class="about-image"
+          cover
+        />
       </div>
 
-      <div class="useful-links-wrapper mb-5">
-        <h3>Funding</h3>
-        <p>
-          This project is supported by the National Science Foundation (NSF), Division of Earth
-          Sciences, under Award No. 2322510:
-          <a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2322510" target="_blank">
-            Synthesizing hydrologic process knowledge to determine global drivers of dominant
-            processes.
-          </a>
+      <section class="about-citation">
+        <h2 class="citation-title">
+          <v-icon class="citation-title-icon" :icon="mdiFileDocumentOutline" size="18" />
+          How to cite
+        </h2>
+        <p class="citation-lead">
+          Journal articles document the scientific methods; HydroShare hosts reusable maps,
+          illustrations, and text shown in the tool. Choose the citation that matches what you are
+          using.
         </p>
-      </div>
 
-      <div class="useful-links-wrapper mb-5">
-        <h3>Project Team</h3>
-        <v-container fluid>
-          <v-row dense>
-            <v-col v-for="member in members" :key="member.name" cols="4">
-              <v-card>
-                <v-img
-                  :src="member.img"
-                  class="align-end"
-                  gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
-                  height="350px"
-                >
-                  <v-card-title class="text-white">{{ member.name }}</v-card-title>
-                </v-img>
-
-                <v-card-actions>
-                  <v-card-text>{{ member.designation }}</v-card-text>
-
-                  <v-btn
-                    :icon="mdiOpenInNew"
-                    class="mx-auto"
-                    :href="member.link"
-                    size="small"
-                    target="_blank"
-                  ></v-btn>
-                </v-card-actions>
-              </v-card>
-            </v-col>
-          </v-row>
-        </v-container>
-      </div>
+        <div class="citation-grid">
+          <article class="citation-card">
+            <h3>Citing the science</h3>
+            <p>Cite the journal articles listed under each project tab below.</p>
+          </article>
 
-      <div class="useful-links-wrapper mb-5">
-        <h3>Useful Links:</h3>
-        <v-list density="compact">
-          <v-list-item class="mb-4">
-            <div>
-              <div class="text-h6 font-weight-medium mb-1">
-                Interactive Hydrologic Process Taxonomy:
-              </div>
-              <div class="text-body-2">
-                <a
-                  href="http://mcmillanhydrology.org/ProcessTaxonomy/ProcessTaxonomyDiagram.html"
-                  target="_blank"
-                >
-                  http://mcmillanhydrology.org/ProcessTaxonomy/ProcessTaxonomyDiagram.html
-                </a>
-              </div>
-            </div>
-          </v-list-item>
-
-          <v-list-item class="mb-4">
-            <div>
-              <div class="text-h6 font-weight-medium mb-1">
-                Journal Articles Describing this Project:
-              </div>
-
-              <div class="text-body-2 mb-3">
-                McMillan, H. (2022). A taxonomy of hydrological processes and watershed function.
-                <i>Hydrological Processes, 36</i>(3), e14537.
-                <a href="https://onlinelibrary.wiley.com/doi/10.1002/hyp.14537" target="_blank">
-                  https://doi.org/10.1002/hyp.14537
-                </a>
-              </div>
-
-              <div class="text-body-2 mb-3">
-                McMillan, H., Araki, R., Gnann, S., Woods, R., & Wagener, T. (2023). How do
-                hydrologists perceive watersheds? A survey and analysis of perceptual model figures
-                for experimental watersheds.
-                <i>Hydrological Processes, 37</i>(5), e14845.
-                <a
-                  href="https://onlinelibrary.wiley.com/doi/full/10.1002/hyp.14845"
-                  target="_blank"
-                >
-                  https://doi.org/10.1002/hyp.14845
-                </a>
-              </div>
-
-              <div class="text-body-2 mb-3">
-                McMillan, H., Araki, R., Bolotin, L., Kim, D-H., Coxon, G., Clark, M., Seibert, J.
-                (2025). Global patterns in observed hydrologic processes.
-                <i>Nature Water</i>, in press.
-              </div>
-            </div>
-          </v-list-item>
-        </v-list>
-      </div>
-    </div>
+          <article class="citation-card">
+            <h3>Reusing materials from this site</h3>
+            <p>
+              Images, geospatial feature boundaries, popup, or sidebar text come from HydroShare.
+            </p>
+          </article>
+        </div>
+      </section>
+    </section>
   </v-container>
 </template>
 
 <script setup>
-import { mdiOpenInNew } from '@mdi/js'
-import hilary from '@/assets/hilary.jpg'
-import ryoko from '@/assets/ryoko.jpg'
-import tony from '@/assets/tony.jpg'
-import devin from '@/assets/devin.jpg'
-import irene from '@/assets/irene.jpg'
-import sandesh from '@/assets/sandesh.jpg'
-
-const members = [
-  {
-    name: 'Hilary McMillan',
-    designation: 'Professor & Project Lead, San Diego State University',
-    img: hilary,
-    link: 'http://www.mcmillanhydrology.org/'
-  },
-  {
-    name: 'Ryoko Araki',
-    designation: 'PhD Student & Developer, San Diego State University',
-    img: ryoko,
-    link: 'http://rarakihydro.com/'
-  },
-  {
-    name: 'Anthony Castronova',
-    designation: 'Senior Research Scientist, CUAHSI',
-    img: tony,
-    link: 'https://www.linkedin.com/in/anthony-castronova-900a2632/'
-  },
-  {
-    name: 'Devin Cowan',
-    designation: 'Research Programmer, CUAHSI',
-    img: devin,
-    link: 'https://www.linkedin.com/in/devin-cowan/'
-  },
-  {
-    name: 'Irene Garousi-Nejad',
-    designation: 'Research Scientist, CUAHSI',
-    img: irene,
-    link: 'https://www.linkedin.com/in/irene-garousi-nejad-phd-0809a047/'
-  },
-  {
-    name: 'Sandesh Maddila',
-    designation: 'Software Engineer, CUAHSI',
-    img: sandesh,
-    link: 'https://www.cuahsi.org/about/our-team/sandesh-maddilia'
-  }
-]
+import { mdiFileDocumentOutline } from '@mdi/js'
+import aboutTemplate from '@/assets/justin-mcfadden-unsplash.jpg'
 </script>
-<style>
-.link-item-description {
-  font-size: 18px;
+
+<style scoped>
+.about-page {
+  background: #f2f3f5;
+  min-height: calc(100vh - 64px);
+  padding: 0 0 2rem;
+}
+
+.about-shell {
+  width: min(1024px, calc(100% - 2rem));
+  margin: 0 auto;
+  background: #ffffff;
+  box-shadow: none;
+  font-family: 'Roboto', sans-serif;
+}
+
+.about-hero {
+  display: grid;
+  grid-template-columns: 0.95fr 1.45fr;
+  align-items: stretch;
+  height: 200px;
+  position: relative;
+}
+
+.about-hero-text {
+  padding: 0.7rem 1.2rem 0.55rem;
+  position: relative;
+  z-index: 3;
+  margin-right: -110px;
+  max-width: calc(100% + 110px);
+}
+
+.about-eyebrow {
+  margin: 0 0 0.3rem;
+  font-size: 0.82rem;
+  letter-spacing: 0.05em;
+  color: #666a71;
+  font-weight: 700;
 }
 
-.useful-links-wrapper {
-  max-width: 950px;
-  margin-left: auto;
-  margin-right: auto;
+.about-title {
+  margin: 0 0 0.28rem;
+  font-size: clamp(0.96rem, 1.25vw, 1.2rem);
+  line-height: 1.24;
+  letter-spacing: 0.01em;
+  color: #26176f;
+}
+
+.about-text {
+  margin: 0;
+  color: #202329;
+  line-height: 1.34;
+  font-size: 0.96rem;
+}
+
+.about-image {
+  height: 200px;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.about-image :deep(.v-img__img) {
+  object-position: 72% center;
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.22) 10%,
+    rgba(0, 0, 0, 0.58) 22%,
+    rgba(0, 0, 0, 0.86) 34%,
+    rgba(0, 0, 0, 1) 46%
+  );
+  mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.22) 10%,
+    rgba(0, 0, 0, 0.58) 22%,
+    rgba(0, 0, 0, 0.86) 34%,
+    rgba(0, 0, 0, 1) 46%
+  );
+}
+
+.about-image::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.38) 0%,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.08) 36%,
+    rgba(255, 255, 255, 0.02) 50%,
+    rgba(255, 255, 255, 0) 66%
+  );
+  filter: blur(4px);
+  transform: scale(1.03);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.about-citation {
+  padding: 0.8rem 1.5rem 0.95rem;
+  border-top: 1px solid #d7e4f2;
+  background: #e9f2fc;
+}
+
+.citation-title {
+  margin: 0 0 0.2rem;
+  font-size: 0.95rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  color: #26176f;
+}
+
+.citation-title-icon {
+  margin-right: 0.5rem;
+  color: #26176f;
+}
+
+.citation-lead {
+  margin: 0 0 0.6rem;
+  color: #2b2b31;
+  font-size: 0.82rem;
+  line-height: 1.3;
+}
+
+.citation-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.citation-card {
+  background: #c9dbef;
+  border: 0;
+  padding: 0.5rem 0.62rem;
+}
+
+.citation-card h3 {
+  margin: 0 0 0.15rem;
+  font-size: 0.82rem;
+  color: #14306d;
+}
+
+.citation-card p {
+  margin: 0;
+  color: #33363d;
+  font-size: 0.8rem;
+  line-height: 1.32;
+}
+
+@media (max-width: 900px) {
+  .about-shell {
+    width: calc(100% - 1rem);
+  }
+
+  .about-hero {
+    display: block;
+    position: relative;
+    height: 220px;
+    min-height: 220px;
+    overflow: hidden;
+  }
+
+  .about-hero-text {
+    margin-right: 0;
+    max-width: 100%;
+    padding: 0.75rem 1rem 0.65rem;
+  }
+
+  .about-eyebrow,
+  .about-title,
+  .about-text {
+    text-shadow:
+      0 0 3px rgba(255, 255, 255, 0.98),
+      0 0 10px rgba(255, 255, 255, 0.92);
+  }
+
+  .about-image {
+    position: absolute;
+    inset: 0;
+    height: 100%;
+    min-height: 0;
+    aspect-ratio: auto;
+    opacity: 1;
+  }
+
+  .about-image :deep(.v-img__img) {
+    object-position: 70% center;
+    -webkit-mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.24) 12%,
+      rgba(0, 0, 0, 0.62) 26%,
+      rgba(0, 0, 0, 0.9) 40%,
+      rgba(0, 0, 0, 1) 54%
+    );
+    mask-image: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.24) 12%,
+      rgba(0, 0, 0, 0.62) 26%,
+      rgba(0, 0, 0, 0.9) 40%,
+      rgba(0, 0, 0, 1) 54%
+    );
+  }
+
+  .about-image::after {
+    display: block;
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.6) 0%,
+      rgba(255, 255, 255, 0.36) 28%,
+      rgba(255, 255, 255, 0.14) 48%,
+      rgba(255, 255, 255, 0.04) 64%,
+      rgba(255, 255, 255, 0) 78%
+    );
+    filter: blur(3px);
+    transform: scale(1.04);
+  }
+
+  .about-title {
+    font-size: clamp(0.88rem, 3.2vw, 1.08rem);
+  }
+
+  .about-text {
+    font-size: 0.95rem;
+  }
+
+  .citation-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .about-image {
+    display: none;
+  }
+
+  .about-hero {
+    height: auto;
+    min-height: 0;
+  }
 }
 </style>
diff --git a/frontend/src/views/IndexView.vue b/frontend/src/views/IndexView.vue
index 9d86fbe..69757d7 100644
--- a/frontend/src/views/IndexView.vue
+++ b/frontend/src/views/IndexView.vue
@@ -327,9 +327,10 @@ const section4AudienceCards = [
   background: linear-gradient(
     90deg,
     rgba(248, 248, 248, 0.95) 0%,
-    rgba(248, 248, 248, 0.85) 34%,
-    rgba(248, 248, 248, 0.45) 55%,
-    rgba(248, 248, 248, 0.08) 72%,
+    rgba(248, 248, 248, 0.88) 20%,
+    rgba(248, 248, 248, 0.62) 32%,
+    rgba(248, 248, 248, 0.24) 42%,
+    rgba(248, 248, 248, 0.04) 50%,
     rgba(248, 248, 248, 0) 100%
   );
   z-index: 1;
@@ -813,8 +814,9 @@ const section4AudienceCards = [
     background: linear-gradient(
       180deg,
       rgba(248, 248, 248, 0.93) 0%,
-      rgba(248, 248, 248, 0.8) 42%,
-      rgba(248, 248, 248, 0.15) 82%,
+      rgba(248, 248, 248, 0.82) 24%,
+      rgba(248, 248, 248, 0.48) 38%,
+      rgba(248, 248, 248, 0.14) 50%,
       rgba(248, 248, 248, 0) 100%
     );
   }