diff --git a/src/images/jules.JPEG b/src/images/jules.JPEG
new file mode 100644
index 0000000..781ea9b
Binary files /dev/null and b/src/images/jules.JPEG differ
diff --git a/src/pages/Developers.tsx b/src/pages/Developers.tsx
index 1dea9be..8575a85 100644
--- a/src/pages/Developers.tsx
+++ b/src/pages/Developers.tsx
@@ -5,10 +5,14 @@ const Developers = () => {
     <div className='container mx-auto p-5'>
         <h1>Developers</h1>
         <div className='p-5 m-5 grid grid-cols-6'>            
-                {/* Add your profile here. You can upload your image to the repo under "images"  directory
-                    and link it here.                
-                */}
-
+                {/* grid item */}
+                <div className="flex flex-wrap justify-center">
+                    <div className="w-64 sm:w-64 px-4">
+                    <img src="images\jules.jpg" width="90" height="90">
+                    <h3 className='font-bold mr-1'>Jonathan Jules L. Serato </h3>
+                    <p className='font-thin italic'> Developer</p>
+                </div>           
+                {/* grid item */}               
 
                 {/* grid item */}
                 <div className="flex flex-wrap justify-center">
@@ -16,7 +20,7 @@ const Developers = () => {
                         <img src="https://avatars.githubusercontent.com/u/74034797?s=400&u=8d250db9bceb4f7415526ea5b276c203f10e3fa9&v=4" alt="..." className="shadow rounded-full max-w-full h-auto align-middle border-none" />
                     </div>
                     <h3 className='font-bold mr-1'>John Paulin, </h3>
-                    <p className='font-thin italic'>Lead Developer</p>
+                    <p className='font-thin italic'> Lead Developer</p>
                 </div>           
                 {/* grid item */}