diff --git a/images/assoociate-1.png b/images/associate-1.png
similarity index 100%
rename from images/assoociate-1.png
rename to images/associate-1.png
diff --git a/images/associate-2.png b/images/associate-2.png
new file mode 100644
index 0000000..4bb3b19
Binary files /dev/null and b/images/associate-2.png differ
diff --git a/images/associate-3.png b/images/associate-3.png
new file mode 100644
index 0000000..cf448c5
Binary files /dev/null and b/images/associate-3.png differ
diff --git a/images/associate-4.png b/images/associate-4.png
new file mode 100644
index 0000000..348ea6c
Binary files /dev/null and b/images/associate-4.png differ
diff --git a/images/associate-5.png b/images/associate-5.png
new file mode 100644
index 0000000..461482d
Binary files /dev/null and b/images/associate-5.png differ
diff --git a/images/associate-6.png b/images/associate-6.png
new file mode 100644
index 0000000..e8e70b4
Binary files /dev/null and b/images/associate-6.png differ
diff --git a/images/facebook.png b/images/facebook.png
new file mode 100644
index 0000000..d8635af
Binary files /dev/null and b/images/facebook.png differ
diff --git a/images/instagram.png b/images/instagram.png
new file mode 100644
index 0000000..f670996
Binary files /dev/null and b/images/instagram.png differ
diff --git a/images/tiktok.png b/images/tiktok.png
new file mode 100644
index 0000000..b4f88b3
Binary files /dev/null and b/images/tiktok.png differ
diff --git a/index.html b/index.html
index 18dd283..e3a7e45 100644
--- a/index.html
+++ b/index.html
@@ -127,7 +127,7 @@ <h2 class="center">Associates</h2>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-1.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
@@ -151,14 +151,14 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-2.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
             />
             
             <img class="associatePocket"
-              src="/images/pocket-red.png"
+              src="/images/pocket-blush.png"
               width="170"
               height="170"
               alt="A pocket"
@@ -175,14 +175,14 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-3.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
             />
             
             <img class="associatePocket"
-              src="/images/pocket-red.png"
+              src="/images/pocket-violet.png"
               width="170"
               height="170"
               alt="A pocket"
@@ -199,7 +199,7 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-4.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
@@ -223,14 +223,14 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-5.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
             />
             
             <img class="associatePocket"
-              src="/images/pocket-red.png"
+              src="/images/pocket-blush.png"
               width="170"
               height="170"
               alt="A pocket"
@@ -247,14 +247,14 @@ <h3>Oliver twist</h3>
         <div class="associateHolder">
           <div class="associate">
             <img class="associateCard"
-              src="/images/assoociate-1.png"
+              src="/images/associate-6.png"
               width="170"
               height="170"
               alt="A card showing one of our associates" 
             />
             
             <img class="associatePocket"
-              src="/images/pocket-red.png"
+              src="/images/pocket-violet.png"
               width="170"
               height="170"
               alt="A pocket"
@@ -318,16 +318,18 @@ <h2>Contact</h2>
       </div>
     </section>
   </div>
- 
+
   </main>
 
-  <footer class="center width-xl stack-lg">
+  <footer class="center row width-xl stack-lg">
+
+  
     <h2>footer title </h2>
     
-    <div class="social-media-group center width-md row justify-center">
-      <p> instagram </p>
-      <p> facebook </p>
-      <p> tiktok </p>
+    <div class="social-media-group center width-xl row justify-center">
+      <img src="/images/facebook.png" heigh="50" width="50">
+      <img src="/images/instagram.png" heigh="50" width="50"> 
+      <img src="/images/tiktok.png" heigh="40" width="40"> 
     </div>
     
     <p>More footer text</p>
diff --git a/style.css b/style.css
index e48eed0..d504202 100644
--- a/style.css
+++ b/style.css
@@ -33,8 +33,10 @@ html {font-size: 10px;}
   margin-right: auto; 
 }
 
+
 .pad2 {padding: 2rem;}
 .pad3 {padding: 3rem;}
+.pad0Top {padding-top: :0;}
 .pad5Top {padding-top: 5rem;}
 
 .width-sm {max-width: 20rem;}
@@ -339,4 +341,14 @@ input[type="checkbox"] {
 .contact-text {text-align: center;}
 
 /* footer css */
-footer {text-align: center;}
\ No newline at end of file
+#black-background {
+  height: 5rem; 
+  width:100%; 
+  background-color: var(--black);
+}
+
+footer {
+  text-align: center;
+  padding: 2rem; 
+  height: 30rem ; 
+  }
\ No newline at end of file