diff --git a/keith-portfolio/src/assets/projects/network.jpg b/keith-portfolio/src/assets/projects/network.jpg
new file mode 100644
index 0000000..5e90514
Binary files /dev/null and b/keith-portfolio/src/assets/projects/network.jpg differ
diff --git a/keith-portfolio/src/assets/projects/sccm.jpg b/keith-portfolio/src/assets/projects/sccm.jpg
new file mode 100644
index 0000000..5be4c51
Binary files /dev/null and b/keith-portfolio/src/assets/projects/sccm.jpg differ
diff --git a/keith-portfolio/src/assets/projects/server.jpg b/keith-portfolio/src/assets/projects/server.jpg
new file mode 100644
index 0000000..f9a264f
Binary files /dev/null and b/keith-portfolio/src/assets/projects/server.jpg differ
diff --git a/keith-portfolio/src/assets/projects/voice.jpg b/keith-portfolio/src/assets/projects/voice.jpg
new file mode 100644
index 0000000..e3a5c62
Binary files /dev/null and b/keith-portfolio/src/assets/projects/voice.jpg differ
diff --git a/keith-portfolio/src/data/content.ts b/keith-portfolio/src/data/content.ts
index 3feff10..4b5f8c6 100644
--- a/keith-portfolio/src/data/content.ts
+++ b/keith-portfolio/src/data/content.ts
@@ -2,6 +2,10 @@ import portrait from '../assets/portrait.jpg';
 import leadership from '../assets/leadership.webp';
 import systems from '../assets/systems.webp';
 import signalMark from '../assets/signal-mark.webp';
+import networkPhoto from '../assets/projects/network.jpg';
+import serverPhoto from '../assets/projects/server.jpg';
+import sccmPhoto from '../assets/projects/sccm.jpg';
+import voicePhoto from '../assets/projects/voice.jpg';
 
 import type { DiagramKind } from '../components/ProjectDiagram';
 
@@ -88,7 +92,7 @@ export const projects = [
     body: 'Fortinet Firewall upgrade, Fortinet 48P Switches upgrade, Fortinet access point uplift, and network topology upgrade.',
     delivered: ['Fortinet firewall upgrade', 'Fortinet 48P switches upgrade', 'Fortinet access point uplift', 'Network topology upgrade'],
     diagram: 'network' as DiagramKind,
-    photo: systems,
+    photo: networkPhoto,
     photoPosition: 'center',
   },
   {
@@ -97,8 +101,8 @@ export const projects = [
     body: 'Upgraded the server with existing VMs and services, migrated data, and configured updated network settings.',
     delivered: ['Server upgraded with existing VMs and services', 'Data migrated', 'Updated network settings configured'],
     diagram: 'server' as DiagramKind,
-    photo: leadership,
-    photoPosition: '70% 40%',
+    photo: serverPhoto,
+    photoPosition: 'center',
   },
   {
     category: 'Endpoint',
@@ -106,8 +110,8 @@ export const projects = [
     body: 'Installed and configured SCCM, prepared the required settings, and established the task-sequence process.',
     delivered: ['SCCM installed and configured', 'Required settings prepared', 'Task-sequence process established'],
     diagram: 'sccm' as DiagramKind,
-    photo: systems,
-    photoPosition: '80% 20%',
+    photo: sccmPhoto,
+    photoPosition: 'center',
   },
   {
     category: 'Voice',
@@ -115,8 +119,8 @@ export const projects = [
     body: 'Delivered number-porting support, call-flow and dial-plan design, user training, documentation, and adoption monitoring.',
     delivered: ['Number-porting support', 'Call-flow and dial-plan design', 'User training and documentation', 'Adoption monitoring'],
     diagram: 'voice' as DiagramKind,
-    photo: leadership,
-    photoPosition: '50% 80%',
+    photo: voicePhoto,
+    photoPosition: 'center',
   },
 ];
 
diff --git a/keith-portfolio/src/sections/ProjectsSection.tsx b/keith-portfolio/src/sections/ProjectsSection.tsx
index 9d6b7f4..7ddea9f 100644
--- a/keith-portfolio/src/sections/ProjectsSection.tsx
+++ b/keith-portfolio/src/sections/ProjectsSection.tsx
@@ -39,10 +39,10 @@ function ProjectCard({ project, index, total }: { project: Project; index: numbe
           <div className="flex flex-col gap-3 sm:w-[40%] sm:gap-4">
             <img
               src={project.photo}
-              alt=""
+              alt={`${project.name}: illustrative photo`}
               loading="lazy"
-              className={`hidden w-full object-cover sm:block ${radius}`}
-              style={{ height: 'clamp(130px, 16vw, 230px)', objectPosition: project.photoPosition }}
+              className={`w-full object-cover ${radius}`}
+              style={{ height: 'clamp(150px, 16vw, 230px)', objectPosition: project.photoPosition }}
             />
             <div
               className={`flex flex-1 flex-col justify-center gap-3 border border-[#D7E2EA]/25 p-5 sm:gap-4 sm:p-6 md:p-8 ${radius}`}