diff --git a/src/components/common/footer/Footer.jsx b/src/components/common/footer/Footer.jsx
index aa17a8b..18502fb 100644
--- a/src/components/common/footer/Footer.jsx
+++ b/src/components/common/footer/Footer.jsx
@@ -14,7 +14,7 @@ const ADDRESS = <div className='missionStatement'>Nouri's Address:<br />7241 185
 
 export const Footer = () => {
   return (
-    <div>
+    <span>
       <div className='links-container'>
         <a href='https://www.facebook.com/teamnouri/' className='facebook' target='_blank' rel='noopener noreferrer'>
           <FontAwesomeIcon
@@ -47,7 +47,7 @@ export const Footer = () => {
         <br />
         {ADDRESS}
       </footer>
-    </div>
+    </span>
 
   )
 }
diff --git a/src/components/common/footer/footer.scss b/src/components/common/footer/footer.scss
index f7b69f4..cf9e7a2 100644
--- a/src/components/common/footer/footer.scss
+++ b/src/components/common/footer/footer.scss
@@ -1,4 +1,8 @@
-.links-container {
+.links-container { 
+  @media only screen and (min-width: 1024px) and (max-width: 1366px){
+        display: inline-flex; 
+        padding-left: 25vh;
+      } 
   display: flex;
   justify-content: center;
   margin-top: 5%;
diff --git a/src/components/home/sections/BoardMembers.jsx b/src/components/home/sections/BoardMembers.jsx
new file mode 100644
index 0000000..8cb7d08
--- /dev/null
+++ b/src/components/home/sections/BoardMembers.jsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import './volunteer.scss'
+import './boardmembers.scss'
+/*  IMAGES   */
+import johnson from '../../../images/johnson.jpg'
+import kim from '../../../images/kim.jpg'
+import timKim from '../../../images/tim-kim.jpg'
+import green from '../../../images/green.jpg'
+import roger from '../../../images/roger.jpg'
+export const BoardMembers = () => {
+  return (
+    <div className='main'>
+      <div className='volunteer-content'>
+
+        <h1 className='volunteer-title'>Board Members</h1>
+        <div className='board'>
+          <div className='individual'>
+            <img src={kim} alt='board-img' />
+            <div className='text-div'>
+              <p>Amber Kim</p>
+              <p>Chair</p>
+            </div>
+          </div>
+
+          <div className='individual'>
+            <img src={green} alt='board-img' />
+            <div className='text-div'>
+              <p>Cody Green</p>
+              <p>Vice Chair</p>
+            </div>
+          </div>
+          <div className='individual'>
+            <img src={johnson} alt='board-img' />
+            <div className='text-div'>
+              <p>Ryan Johnson</p>
+              <p>Member of the Board</p>
+            </div>
+          </div>
+
+        </div>
+        <div id='team'>
+          <h1 className='volunteer-title'>Leadership Team</h1>
+          <div className='board'>
+            <div className='individual'>
+              <img src={timKim} alt='board-img' />
+              <div className='text-div'>
+                <p>Timothy Kim</p>
+                <p>Chief of Operations</p>
+              </div>
+            </div>
+
+            <div className='individual'>
+              <img src={roger} alt='deadpool' />
+              <div className='text-div'>
+                <p>Roger Keith</p>
+                <p>Lead Software Engineer</p>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/home/sections/Volunteer.js b/src/components/home/sections/Volunteer.js
index 15d9b7f..bede78c 100644
--- a/src/components/home/sections/Volunteer.js
+++ b/src/components/home/sections/Volunteer.js
@@ -1,11 +1,6 @@
 import React from 'react'
 import './volunteer.scss'
-
-/*  IMAGES   */
-import johnson from '../../../images/johnson.jpg'
-import kim from '../../../images/kim.jpg'
-import timKim from '../../../images/tim-kim.jpg'
-import green from '../../../images/green.jpg'
+import { BoardMembers } from './BoardMembers.jsx'
 
 const CONTENT1 = 'If you are another nonprofit or social worker in the Redmond, Kirkland, Woodinville, Bothell, or Bellevue who would like to refer families with school-aged, disabled, or unborn children, we would love to help. Currently, we are only able to deliver within Redmond, Kirkland, Woodinville, Bothell, and Bellevue. Hopefully, we\'ll be able to expand soon.'
 const CONTENT2 = 'If you are looking for ways to volunteer remotely from your home, we would love to chat with you. Some of the things we could use help in include marketing, organizing, and developing apps to help us automate some processes with our deliveries (stack: JavaScript, Node, React, AWS, DynamoDB).'
@@ -14,52 +9,24 @@ const SECTION_TITLE = 'An invitation from our board members'
 
 export const Volunteer = () => {
   return (
-    <section id='volunteer'>
-
-      <div className='volunteer-content'>
+    <span>
+      <section id='volunteer'>
 
-        <h1 className='volunteer-title'>{SECTION_TITLE}</h1>
-        <p>{CONTENT1}</p>
-        <a href='https://docs.google.com/forms/d/e/1FAIpQLScEOOuZ1iZw9IWbsiWc1AX3OHhFQ4wpxYs_TZHyykx2glsrFw/viewform' target='_blank' rel='noopener noreferrer'><button className='btn-container'>Sign Up</button></a>
-        <p>{CONTENT2}</p>
-        <p>{CONTENT3}</p>
+        <div className='volunteer-content'>
 
-        <a href='https://docs.google.com/forms/d/e/1FAIpQLSd9N1_wWETbeMs7UAxzUTCMl0FhCnVneozlA-EMAMQXSBFy3A/viewform' target='_blank' rel='noopener noreferrer'>
-          <button className='btn-container'>volunteer with us</button>
-        </a>
-      </div>
+          <h1 className='volunteer-title'>{SECTION_TITLE}</h1>
+          <p>{CONTENT1}</p>
+          <a href='https://docs.google.com/forms/d/e/1FAIpQLScEOOuZ1iZw9IWbsiWc1AX3OHhFQ4wpxYs_TZHyykx2glsrFw/viewform' target='_blank' rel='noopener noreferrer'><button className='btn-container'>Sign Up</button></a>
+          <p>{CONTENT2}</p>
+          <p>{CONTENT3}</p>
 
-      <div className='image-col'>
-        <div className='overlay'>
-          <img src={kim} alt='board-img' />
-          <div className='text-div'>
-            <p>Amber Kim</p>
-            <p>Chair</p>
-          </div>
+          <a href='https://docs.google.com/forms/d/e/1FAIpQLSd9N1_wWETbeMs7UAxzUTCMl0FhCnVneozlA-EMAMQXSBFy3A/viewform' target='_blank' rel='noopener noreferrer'>
+            <button className='btn-container'>volunteer with us</button>
+          </a>
         </div>
+      </section>
+      <BoardMembers />
 
-        <div className='overlay'>
-          <img src={green} alt='board-img' />
-          <div className='text-div'>
-            <p>Cody Green</p>
-            <p>Vice Chair</p>
-          </div>
-        </div>
-        <div className='overlay'>
-          <img src={johnson} alt='board-img' />
-          <div className='text-div'>
-            <p>Ryan Johnson</p>
-            <p>Member of the Board</p>
-          </div>
-        </div>
-        <div className='overlay'>
-          <img src={timKim} alt='board-img' />
-          <div className='text-div'>
-            <p>Timothy Kim</p>
-            <p>Chief of Operations</p>
-          </div>
-        </div>
-      </div>
-    </section>
+    </span>
   )
 }
diff --git a/src/components/home/sections/boardmembers.scss b/src/components/home/sections/boardmembers.scss
new file mode 100644
index 0000000..fa7ad53
--- /dev/null
+++ b/src/components/home/sections/boardmembers.scss
@@ -0,0 +1,77 @@
+.main{ 
+    @media only screen and (max-width: 768px){
+        display: block; 
+        width: 30ev;
+        height: 20ev;  
+        .volunteer-content{
+            margin:auto; 
+            
+        }
+        .board{
+            margin: auto;
+        }
+        } 
+    @media only screen and (max-width: 1024px){
+        display: flex; 
+        width: 30ev;
+        height: 20ev; 
+        
+        } 
+    display: flex; 
+    direction: row; 
+    @media only screen and (max-width: 430px){
+        display: none;
+    }
+.volunteer-content{ 
+    width: 70%; 
+    h1{ 
+        text-align: center}
+    .board{
+    display: flex;
+    direction: row; 
+    align-content: center; 
+    align-self: center;
+    width: 500px; 
+    @media only screen and (max-width: 1024px){ 
+        width: 250px;
+    }
+    #team{
+        flex: 2; 
+        align-items: center; 
+        //float: right; 
+
+        
+    } 
+         img{  
+             @media only screen and (max-width: 1024px) {
+                width: 100px; 
+                height: 100px;   
+             }
+          width: 200px;
+          height: 200px;
+    } 
+    div{
+        border: 1px solid #000;
+       // padding: 0 5px; 
+       
+    }
+} 
+
+} } 
+
+.individual{
+    width: 250px; 
+    height: 250px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    p{ 
+        font-size: 16px;
+    } 
+    .text-div {
+          //position: absolute;
+          bottom: 15px;
+          width: 90px;
+          color: white;
+          background-color: rgba(0, 0, 0, 0.75);
+          padding: 5px; }
+
+}
\ No newline at end of file
diff --git a/src/components/home/sections/volunteer.scss b/src/components/home/sections/volunteer.scss
index f8f97f0..7b61e34 100644
--- a/src/components/home/sections/volunteer.scss
+++ b/src/components/home/sections/volunteer.scss
@@ -1,20 +1,27 @@
 $dark-purple: #412F8A;
 
-#volunteer {
-  @media only screen and (min-width: 1024px) {
+#volunteer { 
+  width: 100%; 
+  @media only screen and (min-width: 1024px) { 
+    width: 60%;
     flex-direction: row;
-
+    float: left; 
+    padding: 1em;
     @media only screen and (min-width: 1366px) {
-      width: 80%;
-      margin: auto;
+      width: 40%;
+      margin: auto; 
+      padding-left: 20vh;
     }
   }
 
   .volunteer-content {
     display: flex;
     flex-direction: column;
-    margin: 5%;
-
+    margin: 5%; 
+   
+    @media only screen and (min-width: 320px){
+      padding: 0;
+    }
     @media only screen and (min-width: 1024px) {
       width: 50%;
       margin: 0 5% 0 5%;
diff --git a/src/images/roger.jpg b/src/images/roger.jpg
new file mode 100644
index 0000000..34ffcd2
Binary files /dev/null and b/src/images/roger.jpg differ