diff --git a/web/src/features/fba/components/infoPanel/TabPanel.tsx b/web/src/features/fba/components/infoPanel/TabPanel.tsx
index a49259023f..229b3d56e4 100644
--- a/web/src/features/fba/components/infoPanel/TabPanel.tsx
+++ b/web/src/features/fba/components/infoPanel/TabPanel.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@mui/material'
 import React from 'react'
+import { theme } from 'app/theme'
 
 interface TabPanelProps {
   children?: React.ReactNode
@@ -9,7 +10,12 @@ interface TabPanelProps {
 
 const TabPanel = ({ children, index, value }: TabPanelProps) => {
   return (
-    <div hidden={value !== index} id={`tabpanel-${index}`} data-testid={`tabpanel-${index}`}>
+    <div
+      hidden={value !== index}
+      id={`tabpanel-${index}`}
+      data-testid={`tabpanel-${index}`}
+      style={{ backgroundColor: theme.palette.common.white }}
+    >
       {value === index && <Box border={'1px solid #ccc'}>{children}</Box>}
     </div>
   )
diff --git a/web/src/features/fba/components/viz/ElevationFlag.tsx b/web/src/features/fba/components/viz/ElevationFlag.tsx
index 94dcc06a38..408e40a595 100644
--- a/web/src/features/fba/components/viz/ElevationFlag.tsx
+++ b/web/src/features/fba/components/viz/ElevationFlag.tsx
@@ -1,40 +1,30 @@
 import React from 'react'
-import { Box, Grid, Typography } from '@mui/material'
-
-const FLAG_COLOUR = '#CCCCCC'
+import { Typography } from '@mui/material'
+import Grid from '@mui/material/Unstable_Grid2'
+import Flag from '@/features/fba/components/viz/FillableFlag'
 
 interface ElevationFlagProps {
-  testId?: string
+  id: string
   percent: number
+  testId?: string
 }
 
-const ElevationFlag = ({ percent, testId }: ElevationFlagProps) => {
+const ElevationFlag = ({ id, percent, testId }: ElevationFlagProps) => {
   return (
-    <Grid item sx={{ display: 'flex', alignItems: 'center', flexGrow: 1, justifyContent: 'flex-start' }} xs={12}>
-      <Box
+    <Grid sx={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-end' }} xs={6}>
+      <Flag maskId={id} percent={percent} />
+      <Typography
         sx={{
-          backgroundColor: FLAG_COLOUR,
-          clipPath: 'polygon(0 50%, 10% 0, 100% 0, 100% 100%, 10% 100%)',
-          height: '32px',
-          padding: '1px',
-          width: '65%'
+          fontSize: '1.25em',
+          fontWeight: 'bold',
+          position: 'absolute',
+          right: '60px',
+          textShadow: '-2px 2px 4px #FFF, 2px 2px 4px #FFF, 2px -2px 4px #FFF, -2px -2px 4px #FFF'
         }}
+        data-testid={testId}
       >
-        <Box
-          sx={{
-            alignItems: 'center',
-            backgroundImage: `linear-gradient(to right, ${FLAG_COLOUR} ${percent}%, #FFFFFFFF ${percent}%)`,
-            clipPath: 'polygon(0 50%, 10% 0, 100% 0, 100% 100%, 10% 100%)',
-            display: 'flex',
-            height: '30px',
-            justifyContent: 'center'
-          }}
-        >
-          <Typography sx={{ fontSize: '0.75em' }} data-testid={testId}>
-            {percent}%
-          </Typography>
-        </Box>
-      </Box>
+        {percent}%
+      </Typography>
     </Grid>
   )
 }
diff --git a/web/src/features/fba/components/viz/ElevationLabel.tsx b/web/src/features/fba/components/viz/ElevationLabel.tsx
index c2efeb1392..8ef9819812 100644
--- a/web/src/features/fba/components/viz/ElevationLabel.tsx
+++ b/web/src/features/fba/components/viz/ElevationLabel.tsx
@@ -7,8 +7,8 @@ interface ElevationLabelProps {
 
 const ElevationLabel = ({ label }: ElevationLabelProps) => {
   return (
-    <Grid item sx={{ alignItems: 'center', display: 'flex', height: '25%', justifyContent: 'flex-end' }} xs={12}>
-      <Typography sx={{ fontSize: '0.75em' }}>{label}</Typography>
+    <Grid item sx={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start' }} xs={6}>
+      <Typography sx={{ fontWeight: 'bold' }}>{label}</Typography>
     </Grid>
   )
 }
diff --git a/web/src/features/fba/components/viz/ElevationStatus.tsx b/web/src/features/fba/components/viz/ElevationStatus.tsx
index 503c0ef605..12c1376217 100644
--- a/web/src/features/fba/components/viz/ElevationStatus.tsx
+++ b/web/src/features/fba/components/viz/ElevationStatus.tsx
@@ -4,14 +4,14 @@ import Grid from '@mui/material/Unstable_Grid2'
 import Typography from '@mui/material/Typography'
 import ElevationFlag from 'features/fba/components/viz/ElevationFlag'
 import ElevationLabel from 'features/fba/components/viz/ElevationLabel'
-import TPIMountain from 'features/fba/components/viz/TPIMountain'
 import { Box } from '@mui/material'
 import { FireZoneTPIStats } from '@/api/fbaAPI'
+import Mountain from '@/features/fba/images/mountain.svg'
 
 enum ElevationOption {
   BOTTOM = 'Valley Bottom',
   MID = 'Mid Slope',
-  Upper = 'Upper Slope'
+  UPPER = 'Upper Slope'
 }
 
 interface ElevationStatusProps {
@@ -25,50 +25,63 @@ const ElevationStatus = ({ tpiStats }: ElevationStatusProps) => {
   const upper_percent = tpiStats.upper_slope === 0 ? 0 : Math.round((tpiStats.upper_slope / total) * 100)
   const bottom_percent = tpiStats.valley_bottom === 0 ? 0 : Math.round((tpiStats.valley_bottom / total) * 100)
   return (
-    <Box sx={{ paddingBottom: theme.spacing(2), paddingTop: theme.spacing(2) }} data-testid="elevation-status">
-      <Grid container sx={{ minHeight: theme.spacing(19) }} xs={12}>
-        <Grid container sx={{ paddingRight: theme.spacing(2) }} xs={4}>
-          <Grid sx={{ alignItems: 'center', display: 'flex', height: '25%', justifyContent: 'flex-end' }} xs={12}>
-            <Typography
-              sx={{
-                fontSize: '0.75em',
-                textAlign: 'right',
-                fontWeight: 'bold',
-                maxWidth: '75%'
-              }}
-            >
-              Topographic Position:
-            </Typography>
-          </Grid>
-          <ElevationLabel label={ElevationOption.Upper} />
-          <ElevationLabel label={ElevationOption.MID} />
-          <ElevationLabel label={ElevationOption.BOTTOM} />
+    <Grid container xs={12} data-testid="elevation-status">
+      <Grid container sx={{ height: theme.spacing(6) }} xs={12}>
+        <Grid sx={{ paddingLeft: theme.spacing(0.5), paddingRight: theme.spacing(0.5) }} xs={6}>
+          <Typography
+            sx={{
+              color: '#003366',
+              fontWeight: 'bold',
+              textAlign: 'left',
+              width: '50%'
+            }}
+          >
+            Topographic Position:
+          </Typography>
         </Grid>
-        <Grid container sx={{ alignItems: 'flex-end', display: 'flex' }} xs={4} data-testid="tpi-mountain">
-          <Grid sx={{ display: 'flex', alignItems: 'flex-end', height: '80%', justifyContent: 'center' }} xs={12}>
-            <TPIMountain />
-          </Grid>
+        <Grid sx={{ display: 'flex', justifyContent: 'flex-end' }} xs={6}>
+          <Typography
+            sx={{
+              color: '#003366',
+              fontWeight: 'bold',
+              textAlign: 'right',
+              width: '65%'
+            }}
+          >
+            Proportion of Advisory Area:
+          </Typography>
         </Grid>
-        <Grid container sx={{ paddingLeft: theme.spacing(2) }} xs={4}>
-          <Grid sx={{ alignItems: 'center', display: 'flex', height: '25%', justifyContent: 'flex-start' }} xs={12}>
-            <Typography
-              sx={{
-                fontSize: '0.75em',
-                textAlign: 'left',
-                fontWeight: 'bold',
-                maxWidth: '75%'
-              }}
-            >
-              Proportion of Advisory Area:
-            </Typography>
+      </Grid>
+      <Grid xs={12}>
+        <Box
+          sx={{
+            backgroundBlendMode: 'overlay',
+            backgroundColor: 'rgba(255, 255, 255, 0.6)',
+            backgroundImage: `url(${Mountain})`,
+            backgroundRepeat: 'round',
+            display: 'flex',
+            width: '100%'
+          }}
+          data-testId="tpi-mountain"
+        >
+          <Grid sx={{ paddingLeft: theme.spacing(0.5), paddingRight: theme.spacing(0.5) }} container xs={12}>
+            <Grid container sx={{ height: theme.spacing(8) }} xs={12}>
+              <ElevationLabel label={ElevationOption.UPPER} />
+              <ElevationFlag id="upper" percent={upper_percent} testId="upper-slope" />
+            </Grid>
+            <Grid container sx={{ height: theme.spacing(8) }} xs={12}>
+              <ElevationLabel label={ElevationOption.MID} />
+              <ElevationFlag id="mid" percent={mid_percent} testId="mid-slope" />
+            </Grid>
+            <Grid container sx={{ height: theme.spacing(8) }} xs={12}>
+              <ElevationLabel label={ElevationOption.BOTTOM} />
+              <ElevationFlag id="lower" percent={bottom_percent} testId="valley-bottom" />
+            </Grid>
           </Grid>
-          <ElevationFlag percent={upper_percent} testId="upper-slope" />
-          <ElevationFlag percent={mid_percent} testId="mid-slope" />
-          <ElevationFlag percent={bottom_percent} testId="valley-bottom" />
-        </Grid>
+        </Box>
       </Grid>
-    </Box>
+    </Grid>
   )
 }
 
-export default ElevationStatus
+export default ElevationStatus
\ No newline at end of file
diff --git a/web/src/features/fba/components/viz/FillableFlag.tsx b/web/src/features/fba/components/viz/FillableFlag.tsx
new file mode 100644
index 0000000000..99d2229c65
--- /dev/null
+++ b/web/src/features/fba/components/viz/FillableFlag.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+
+interface FillableFlagProps {
+  maskId: string
+  percent: number
+}
+
+const FillableFlag = ({ maskId, percent }: FillableFlagProps) => {
+  const fillWidth = (percent / 100) * 120
+  return (
+    <svg width="120" height="43" viewBox="0 0 120 43" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
+      <defs>
+        <mask id={`mask-${maskId}`}>
+          <rect x="0" y="0" width={`${fillWidth}`} height="43" fill="white" />
+        </mask>
+      </defs>
+      <path
+        d="M10.7443 41.822L0.558603 21.375L10.7443 0.928009L119.5 0.928009L119.5 41.822L10.7443 41.822Z"
+        stroke="black"
+        fill="black"
+        mask={`url(#mask-${maskId})`}
+      />
+      <path
+        d="M10.7443 41.822L0.558603 21.375L10.7443 0.928009L119.5 0.928009L119.5 41.822L10.7443 41.822Z"
+        stroke="black"
+      />
+    </svg>
+  )
+}
+
+export default React.memo(FillableFlag)
\ No newline at end of file
diff --git a/web/src/features/fba/components/viz/TPIMountain.tsx b/web/src/features/fba/components/viz/TPIMountain.tsx
deleted file mode 100644
index 64f59355d9..0000000000
--- a/web/src/features/fba/components/viz/TPIMountain.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-export const TPIMountain = () => {
-  return (
-    <svg width="135" height="119" viewBox="0 0 135 119" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M118.164 51.2412L135 72H0L13.2837 41.7437L27.6487 32.7889L35.9897 45.8141L52.8261 18L64.7197 36.1809L70.8982 23.6985L90.9783 51.2412L99.7826 39.0302L118.164 51.2412Z"
-        fill="#8FA3AD"
-      />
-      <path
-        d="M15.7431 47.4348L0 77.0574H126.234L113.813 33.882L100.38 21.1037L92.5811 39.6904L76.8379 0L65.7167 25.9439L59.9394 8.13168L41.1632 47.4348L32.9305 30.0098L15.7431 47.4348Z"
-        fill="#556F7A"
-      />
-      <path
-        d="M134.998 73.0628C134.998 57.1284 102.243 66.8071 89.3596 73.0628H64.9023V92.664H134.998V73.0628Z"
-        fill="#9BCB66"
-      />
-      <path
-        d="M26.5748 59.8836C11.7296 46.5784 3.93307 52.9503 0 59.8836V95.5901H135V77.2168C130.429 81.4346 119.322 75.1776 87.8031 59.8836C74.9513 53.6475 83.2192 51.5001 56.4041 55.5C40.6849 61 35.9416 68.2786 26.5748 59.8836Z"
-        fill="#7BB243"
-      />
-      <path
-        d="M51.573 89.2011C22.024 79.0481 6.32022 77.4057 0 89.2011V119H135V83.8207C118.062 97.4096 78.0197 98.2881 51.573 89.2011Z"
-        fill="#689F38"
-      />
-    </svg>
-  )
-}
-
-export default React.memo(TPIMountain)
diff --git a/web/src/features/fba/components/viz/elevationFlag.test.tsx b/web/src/features/fba/components/viz/elevationFlag.test.tsx
index b663af3127..7453a3869d 100644
--- a/web/src/features/fba/components/viz/elevationFlag.test.tsx
+++ b/web/src/features/fba/components/viz/elevationFlag.test.tsx
@@ -4,9 +4,7 @@ import ElevationFlag from 'features/fba/components/viz/ElevationFlag'
 
 describe('ElevationFlag', () => {
   it('should have width relative to parent', () => {
-    const { getByTestId } = render(
-        <ElevationFlag percent={50} testId='valley-bottom' />
-    )
+    const { getByTestId } = render(<ElevationFlag id="test" percent={50} testId="valley-bottom" />)
 
     const element = getByTestId('valley-bottom')
     expect(element).toBeInTheDocument()
diff --git a/web/src/features/fba/components/viz/fillableFlag.test.tsx b/web/src/features/fba/components/viz/fillableFlag.test.tsx
new file mode 100644
index 0000000000..8733b19f15
--- /dev/null
+++ b/web/src/features/fba/components/viz/fillableFlag.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import FillableFlag from '@/features/fba/components/viz/FillableFlag'
+
+describe('FillableFlag', () => {
+  it('should render', () => {
+    const maskId = 'test'
+    const { getByRole } = render(<FillableFlag maskId={maskId} percent={50} />)
+    const element = getByRole('img')
+    expect(element).toBeInTheDocument()
+  })
+  it("should use maskId in svg mask element's id", () => {
+    const maskId = 'test'
+    const result = render(<FillableFlag maskId={maskId} percent={50} />)
+    const element = result.container.querySelector(`#mask-${maskId}`)
+    expect(element).toBeInTheDocument()
+  })
+})
diff --git a/web/src/features/fba/images/mountain.svg b/web/src/features/fba/images/mountain.svg
new file mode 100644
index 0000000000..109e98dc03
--- /dev/null
+++ b/web/src/features/fba/images/mountain.svg
@@ -0,0 +1,28 @@
+<svg
+      width="360"
+      height="148"
+      viewBox="0 0 360 148"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M315.103 63.8593L360 90H0L35.4233 51.8995L73.73 40.6231L95.9725 57.0251L140.87 22L172.586 44.8945L189.062 29.1759L242.609 63.8593L266.087 48.4824L315.103 63.8593Z"
+        fill="#8FA3AD"
+      />
+      <path
+        d="M41.9851 58.9945L0.00390625 95.8361H336.624L303.501 42.1389L267.682 26.2465L246.884 49.3628L204.903 -6.10352e-05L175.246 32.2664L159.841 10.1133L109.771 58.9945L87.8178 37.323L41.9851 58.9945Z"
+        fill="#4D5F66"
+      />
+      <path
+        d="M359.995 90.8681C359.995 71.0504 272.649 83.0879 238.293 90.8681H173.074V115.246H359.995V90.8681Z"
+        fill="#9BCB66"
+      />
+      <path
+        d="M70.8693 74.477C31.2825 57.9294 10.492 65.854 0.00390625 74.477V118.885H360V96.0343C347.811 101.28 318.193 93.4981 234.143 74.477C199.872 66.7212 221.919 64.0504 150.413 69.0251C108.496 75.8655 95.8471 84.9179 70.8693 74.477Z"
+        fill="#61A022"
+      />
+      <path
+        d="M137.531 110.939C58.734 98.312 16.8577 96.2694 0.00390625 110.939V148H360V104.248C314.832 121.148 208.054 122.241 137.531 110.939Z"
+        fill="#B3E488"
+      />
+</svg>
\ No newline at end of file