diff --git a/app/images/about/bg-utilities.jpg b/app/images/about/bg-utilities.jpg
new file mode 100644
index 0000000000..31435c79d1
Binary files /dev/null and b/app/images/about/bg-utilities.jpg differ
diff --git a/app/images/about/utilities-1.png b/app/images/about/utilities-1.png
new file mode 100644
index 0000000000..a52c808396
Binary files /dev/null and b/app/images/about/utilities-1.png differ
diff --git a/app/layout/about/utilities/component.tsx b/app/layout/about/utilities/component.tsx
index eaa2272a14..f921b83886 100644
--- a/app/layout/about/utilities/component.tsx
+++ b/app/layout/about/utilities/component.tsx
@@ -3,6 +3,9 @@ import React from 'react';
 import Column from 'layout/statics/column';
 import Wrapper from 'layout/wrapper';
 
+import BackgroundImage from 'images/about/bg-utilities.jpg';
+import UtilitiesImage from 'images/about/utilities-1.png';
+
 import { UTILITIES } from './constants';
 
 export interface AboutUtilitiesProps {
@@ -11,25 +14,29 @@ export interface AboutUtilitiesProps {
 
 export const AboutUtilities: React.FC<AboutUtilitiesProps> = () => {
   return (
-    <Wrapper>
-      <div className="grid w-full max-w-5xl grid-cols-2 py-16 mx-auto border-t border-white gap-x-36 border-opacity-20">
-        <Column
-          title="What can I do with this Marxan planning platform?"
-          subtitle="This platform hosts the Marxan software suite which includes Marxan, Marxan with Zones, and Marxan with Connectivity on a stable Azure cloud environment. You can use this platform to:"
-          caption="Learn more"
-          href="https://marxansolutions.org"
-          external
-        />
-        <div className="flex flex-col items-start gap-10">
-          {UTILITIES.map((u) => (
-            <div className="flex flex-row gap-16" key={u.order}>
-              <p className="text-2xl font-semibold text-gray-600">{u.order}</p>
-              <p className="text-lg font-heading">{u.description}</p>
-            </div>
-          ))}
+    <div
+      style={{
+        backgroundImage: `url(${BackgroundImage})`,
+        backgroundSize: 'cover',
+      }}
+    >
+      <Wrapper>
+        <div className="grid w-full max-w-5xl grid-cols-2 py-28 mx-auto border-t border-white gap-x-36 border-opacity-20">
+          <Column
+            title="What can I do with this Marxan planning platform?"
+            image={UtilitiesImage}
+          />
+          <div className="flex flex-col items-start gap-10">
+            {UTILITIES.map((u) => (
+              <div className="flex flex-row gap-16" key={u.order}>
+                <p className="text-2xl font-semibold text-primary-500">{u.order}</p>
+                <p className="text-lg font-heading">{u.description}</p>
+              </div>
+            ))}
+          </div>
         </div>
-      </div>
-    </Wrapper>
+      </Wrapper>
+    </div>
   );
 };
 
diff --git a/app/layout/about/values/component.tsx b/app/layout/about/values/component.tsx
index 6e25bcb563..9ff2cc1270 100644
--- a/app/layout/about/values/component.tsx
+++ b/app/layout/about/values/component.tsx
@@ -41,7 +41,7 @@ export const AboutValues: React.FC<AboutValuesProps> = () => {
                 <p className="mb-5 text-sm text-black">
                   {v.description}
                 </p>
-                <a className="text-base text-black hover:underline" href={v.hyperlink} rel="noopener noreferrer" target="_blank">{v.hypertext}</a>
+                <a className="text-base text-black underline" href={v.hyperlink} rel="noopener noreferrer" target="_blank">{v.hypertext}</a>
               </div>
             ))}
           </div>
diff --git a/app/layout/statics/column/component.tsx b/app/layout/statics/column/component.tsx
index fba4b2b59b..fae7a6bd3d 100644
--- a/app/layout/statics/column/component.tsx
+++ b/app/layout/statics/column/component.tsx
@@ -6,8 +6,9 @@ export interface StaticColumnProps {
   title: string;
   subtitle?: string;
   description?: string;
-  caption: string;
-  href: string,
+  caption?: string;
+  image?: string;
+  href?: string,
   external?: boolean,
 }
 
@@ -16,12 +17,13 @@ export const StaticColumn: React.FC<StaticColumnProps> = ({
   subtitle,
   description,
   caption,
+  image,
   href,
   external = false,
 }: StaticColumnProps) => {
   return (
     <div>
-      <h2 className="h-56 pb-10 text-4xl leading-relaxed text-transparent font-heading max-w-max bg-gradient-to-r from-blue-700 via-blue-400 to-green-300 bg-clip-text">
+      <h2 className="h-56 pb-10 text-4xl leading-relaxed font-heading max-w-max">
         {title}
       </h2>
       {subtitle && (
@@ -34,7 +36,22 @@ export const StaticColumn: React.FC<StaticColumnProps> = ({
           {description}
         </p>
       )}
-      <ButtonLink caption={caption} href={href} external={external} />
+      {image && (
+        <div>
+          <img
+            src={image}
+            alt=""
+            style={{
+              width: '403px',
+              height: 'auto',
+              filter: 'drop-shadow(0px 8px 15px rgba(0, 0, 0, .35))',
+            }}
+          />
+        </div>
+      )}
+      {href && (
+        <ButtonLink caption={caption} href={href} external={external} />
+      )}
     </div>
   );
 };
diff --git a/app/layout/statics/hero/component.tsx b/app/layout/statics/hero/component.tsx
index 748b7d7d7d..467a048cc0 100644
--- a/app/layout/statics/hero/component.tsx
+++ b/app/layout/statics/hero/component.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 
+import classnames from 'classnames';
+
 import Backlink from 'layout/statics/backlink';
 import Wrapper from 'layout/wrapper';
 
 export interface StaticHeroProps {
-  section: string;
+  section?: string;
   title: string;
   description: string;
-  backlink?: string,
+  backlink?: string;
+  theme?: 'dark' | 'light';
 }
 
 export const StaticHero: React.FC<StaticHeroProps> = ({
@@ -15,29 +18,31 @@ export const StaticHero: React.FC<StaticHeroProps> = ({
   title,
   description,
   backlink,
+  theme = 'dark',
 }: StaticHeroProps) => {
   return (
-    <Wrapper>
-      <div className="w-full max-w-5xl mx-auto my-32">
-        {backlink && (
-          <Backlink href={backlink}>{section}</Backlink>
-        )}
-        {!backlink && (
-          <h1 className="max-w-3xl text-lg font-semibold font-heading opacity-40">
-            {section}
-          </h1>
-        )}
-        <h2
-          className="pb-16 mt-3 font-semibold leading-tight text-left max-w-max bg-clip-text text-7xl"
-        >
-          {title}
-        </h2>
+    <div className={classnames({
+      'bg-primary-50 text-black': theme === 'light',
+      'bg-black': theme === 'dark',
+    })}
+    >
+      <Wrapper>
+        <div className="w-full max-w-5xl mx-auto my-32">
+          {backlink && (
+            <Backlink href={backlink}>{section}</Backlink>
+          )}
+          <h2
+            className="pb-16 mt-3 font-semibold leading-tight text-left max-w-max bg-clip-text text-7xl"
+          >
+            {title}
+          </h2>
 
-        <p className="text-lg leading-8 text-justify max-w-max font-heading">
-          {description}
-        </p>
-      </div>
-    </Wrapper>
+          <p className="text-lg leading-8 max-w-max">
+            {description}
+          </p>
+        </div>
+      </Wrapper>
+    </div>
   );
 };
 
diff --git a/app/pages/about.tsx b/app/pages/about.tsx
index 805d2b772f..a54f02c605 100644
--- a/app/pages/about.tsx
+++ b/app/pages/about.tsx
@@ -41,9 +41,9 @@ const About: React.FC = () => {
       />
 
       <main>
-        <Header size="base" />
+        <Header size="base" theme="light" />
         <Hero
-          section="About"
+          theme="light"
           title={TITLE_TEXT}
           description={DESCRIPTION_TEXT}
         />