diff --git a/public/AboutBanner.png b/public/AboutBanner.png
new file mode 100644
index 0000000..b26c788
Binary files /dev/null and b/public/AboutBanner.png differ
diff --git a/public/earliest-prototype.png b/public/earliest-prototype.png
new file mode 100644
index 0000000..b5653bd
Binary files /dev/null and b/public/earliest-prototype.png differ
diff --git a/public/first-sim-renders.png b/public/first-sim-renders.png
new file mode 100644
index 0000000..3424397
Binary files /dev/null and b/public/first-sim-renders.png differ
diff --git a/public/polished-plugin.png b/public/polished-plugin.png
new file mode 100644
index 0000000..a87d378
Binary files /dev/null and b/public/polished-plugin.png differ
diff --git a/src/components/divisions/DivisionManagement.jsx b/src/components/divisions/DivisionManagement.jsx
index 6a7742c..1195507 100644
--- a/src/components/divisions/DivisionManagement.jsx
+++ b/src/components/divisions/DivisionManagement.jsx
@@ -857,7 +857,21 @@ const DivisionManagement = () => {
         }),
       });
 
-      if (!response.ok) throw new Error('Failed to add member');
+      if (!response.ok) {
+        if (response.status === 409) {
+          setShowAddMember(false);
+          setNewMemberCid('');
+          setNewMemberRole('nav_member');
+          setToastConfig({
+            variant: 'warning',
+            title: 'Failed to Add Member',
+            description: 'User is already a member of this division',
+          });
+          setShowToast(true);
+          return;
+        }
+        throw new Error('Failed to add member');
+      }
 
       const newMember = await response.json();
       setMembers([...members, newMember]);
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index b2a5c73..51c0b35 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -15,7 +15,7 @@ const TeamMemberCard = ({ name, role, email }) => {
   };
 
   return (
-    <Card className="flex items-center justify-between !p-4">
+    <Card className="flex items-center justify-between p-4!">
       <div>
         <p className="font-medium text-white">{name}</p>
         <p className="text-sm text-zinc-400">{role}</p>
@@ -67,15 +67,24 @@ const About = () => {
 
   return (
     <Layout>
-      <section className="pt-38 pb-20">
+      {/* Hero Banner */}
+      <div className="relative w-full h-[200px] sm:h-[300px] md:h-[450px] mt-[95px] sm:mt-16 overflow-hidden">
+        <img
+          src="/AboutBanner.png"
+          alt="About banner"
+          className="w-full h-full object-cover object-center"
+          draggable={false}
+        />
+        {/* Bottom fade overlay */}
+        <div className="absolute inset-0 bg-linear-to-t from-zinc-950 via-zinc-950/40 to-transparent pointer-events-none" />
+      </div>
+
+      <section className="pt-10 pb-20">
         <div className="max-w-4xl mx-auto px-6">
           <div
             ref={setSectionRef(0)}
             className="space-y-6 pb-12 opacity-0 translate-y-10 transition-all duration-1000 ease-out"
           >
-            <span className="inline-block px-4 py-1.5 text-xs font-medium uppercase tracking-widest text-emerald-400 bg-emerald-950/50 border border-emerald-800/40 rounded-full">
-              About
-            </span>
             <h1 className="text-4xl md:text-5xl font-bold tracking-tight">What is BARS?</h1>
             <p className="text-base md:text-lg text-zinc-400 leading-relaxed">
               BARS is an advanced airport lighting simulation platform that synchronizes real-time
@@ -131,7 +140,9 @@ const About = () => {
               BARS development began in late 2024, after the idea of a vatSys plugin to manage
               stopbars came up amongst members of the community. The{' '}
               <a
-                href="/"
+                href="/earliest-prototype.png"
+                target="_blank"
+                rel="noopener noreferrer"
                 className="text-white border-b border-red-500/70 hover:border-red-400 transition-colors"
               >
                 earliest prototype
@@ -139,14 +150,18 @@ const About = () => {
               was a simple controller only plugin that showed stopbar state changes only inside the
               client, displayed through a simple ground window. That quickly led to a{' '}
               <a
-                href="/"
+                href="/polished-plugin.png"
+                target="_blank"
+                rel="noopener noreferrer"
                 className="text-white border-b border-red-500/70 hover:border-red-400 transition-colors"
               >
                 more polished plugin
               </a>
               , experiments with SimConnect, object placement, and the first{' '}
               <a
-                href="/"
+                href="/first-sim-renders.png"
+                target="_blank"
+                rel="noopener noreferrer"
                 className="text-white border-b border-red-500/70 hover:border-red-400 transition-colors"
               >
                 visible in-sim lighting renders