diff --git a/src/assets/img/confetti1.png b/src/assets/img/confetti1.png
new file mode 100644
index 0000000..058d2d1
Binary files /dev/null and b/src/assets/img/confetti1.png differ
diff --git a/src/assets/img/confetti2.png b/src/assets/img/confetti2.png
new file mode 100644
index 0000000..09b06d2
Binary files /dev/null and b/src/assets/img/confetti2.png differ
diff --git a/src/assets/img/confetti3.png b/src/assets/img/confetti3.png
new file mode 100644
index 0000000..0aa2057
Binary files /dev/null and b/src/assets/img/confetti3.png differ
diff --git a/src/assets/img/fun2.png b/src/assets/img/fun2.png
new file mode 100644
index 0000000..3bcc6a3
Binary files /dev/null and b/src/assets/img/fun2.png differ
diff --git a/src/assets/img/fun3.png b/src/assets/img/fun3.png
new file mode 100644
index 0000000..d9b5e6d
Binary files /dev/null and b/src/assets/img/fun3.png differ
diff --git a/src/assets/img/fun4.png b/src/assets/img/fun4.png
new file mode 100644
index 0000000..685e500
Binary files /dev/null and b/src/assets/img/fun4.png differ
diff --git a/src/assets/img/fun5.png b/src/assets/img/fun5.png
new file mode 100644
index 0000000..bacea51
Binary files /dev/null and b/src/assets/img/fun5.png differ
diff --git a/src/assets/img/fun6.png b/src/assets/img/fun6.png
new file mode 100644
index 0000000..e0b5c88
Binary files /dev/null and b/src/assets/img/fun6.png differ
diff --git a/src/assets/img/mps_bg.jpg b/src/assets/img/mps_bg.jpg
new file mode 100644
index 0000000..9f89320
Binary files /dev/null and b/src/assets/img/mps_bg.jpg differ
diff --git a/src/assets/img/oc_bg.jpg b/src/assets/img/oc_bg.jpg
new file mode 100644
index 0000000..2fd8bf5
Binary files /dev/null and b/src/assets/img/oc_bg.jpg differ
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 2349b9b..8355fe0 100755
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -9,58 +9,141 @@
           <div class="company_name">Motion Picture Solutions</div>
           <div class="first_title">Welcome</div>
           <div class="first_second">to</div>
-          <div class="first_third">MPS.Fun</div>
+          <div class="first_third"><span style="color:#fbdc00;">MPS</span>.Fun</div>
           <div class="slogan"><p class="text-center">Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p></div>
           <br>
           <div class="row column text-center">
             <button class="hollow button">PLAY NOW</button>
+            <p>Skip game, Maybe next time</p>
           </div>
           
         </div>
+        <img class="fetti" src="../assets/img/confetti1.png" alt="">
+        <img class="fettitwo" src="../assets/img/confetti2.png" alt="">
+        <img class="fettithree" src="../assets/img/confetti3.png" alt="">
       </div>
       <img class="shades" src="../assets/img/mps-glasses.png" alt="">
 
     </div>
-    <div class="row align-middle card_info_one">
-        <div class="columns">
-          <h2>Direct KDM Automation</h2>
-          <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+    <div class="large-expanded row"></div>
+    <div class="cards_info large-12 columns">
+      <div class="card_header">
+        <h2 class="text-center">Train Your Brain This New Years</h2>
+        <p class="text-center">Some small information about the cards and what they repersent</p> 
+      </div>
+      
+      <div class="expanded row large-expanded smal l-up-2 medium-up-3 large-up-4">
+        <div class="column vertical_block column-block">
+          <div class="column text-center">
+            <img class="mps_card_one thumbnail" src="../assets/img/fun1.png" alt="motion picture solutions logo">
+          </div>
+          <div class="columns">
+            <h3>Direct KDM Automation</h3>
+            <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+          </div>
         </div>
-        <div class="large-6 columns">
-          <img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
+
+        <div class="column vertical_block column-block">
+          <div class="column text-center">
+            <img class="mps_card_one thumbnail" src="../assets/img/fun2.png" alt="motion picture solutions logo">
+          </div>
+          <div class="columns">
+            <h3>Direct KDM Automation</h3>
+            <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+          </div>
         </div>
+
+        <div class="column vertical_block column-block">
+          <div class="column text-center">
+            <img class="mps_card_one thumbnail" src="../assets/img/fun3.png" alt="motion picture solutions logo">
+          </div>
+          <div class="columns">
+            <h3>Direct KDM Automation</h3>
+            <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+          </div>
+        </div>
+
+        <div class="column vertical_block column-block">
+          <div class="column text-center">
+            <img class="mps_card_one thumbnail" src="../assets/img/fun5.png" alt="motion picture solutions logo">
+          </div>
+          <div class="columns">
+            <h3>Direct KDM Automation</h3>
+            <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+          </div>
+        </div>
+        <!-- Second Row -->
+        <div class="column vertical_block column-block">
+          <div class="column text-center">
+            <img class="mps_card_one thumbnail" src="../assets/img/fun1.png" alt="motion picture solutions logo">
+          </div>
+          <div class="columns">
+            <h3>Direct KDM Automation</h3>
+            <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+          </div>
+        </div>
+
+        <div class="column vertical_block column-block">
+          <div class="column text-center">
+            <img class="mps_card_one thumbnail" src="../assets/img/fun2.png" alt="motion picture solutions logo">
+          </div>
+          <div class="columns">
+            <h3>Direct KDM Automation</h3>
+            <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+          </div>
+        </div>
+
+        <div class="column vertical_block column-block">
+          <div class="column text-center">
+            <img class="mps_card_one thumbnail" src="../assets/img/fun3.png" alt="motion picture solutions logo">
+          </div>
+          <div class="columns">
+            <h3>Direct KDM Automation</h3>
+            <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+          </div>
+        </div>
+
+        <div class="column vertical_block column-block">
+          <div class="column text-center">
+            <img class="mps_card_one thumbnail" src="../assets/img/fun6.png" alt="motion picture solutions logo">
+          </div>
+          <div class="columns">
+            <h3>Direct KDM Automation</h3>
+            <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
+          </div>
+        </div>
+
+      </div>
     </div>
-
-        <div class="row align-middle card_info_two">
-            <div class="large-6 columns">
-              <img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
-            </div>
-            <div class="columns">
-              <h2>Direct KDM Automation</h2>
-              <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
-            </div>
-            
+    <!-- Oncinema section -->
+    <div class="expanded row links">
+      <div class="small-12 large-6 columns mps">
+        <h3 class="text-center">Motion Picture solutions</h3>
+        <p class="text-center">MPS has been creating DCPs since the advent of digital cinema, giving us unparalleled expertise in the sector.</p>
+        <div class="text-center">
+          <a href="" class="button "> Find out More</a>
         </div>
-
-        <div class="row align-middle card_info_three">
-            <div class="columns">
-              <h2>Direct KDM Automation</h2>
-              <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
-            </div>
-            <div class="large-6 columns">
-              <img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
-            </div>
+      </div>
+      <div class="small-12 large-6 columns oc">
+        <h3 class="text-center">Oncinema</h3>
+        <p class="text-center">MPS has been creating DCPs since the advent of digital cinema, giving us unparalleled expertise in the sector.</p>
+        <div class="text-center">
+          <a href="" class="button "> Find out More</a>
         </div>
-
-        <div class="row align-middle card_info_four">
-            <div class="large-6 columns">
-              <img class="mps_card_one" src="../assets/img/fun1.png" alt="motion picture solutions logo">
-            </div>
-            <div class="columns">
-              <h2>Direct KDM Automation</h2>
-              <p>Replace The Negatives In Your Life With Positives And Move Your Life Ahead</p>
-            </div>
+      </div>
+    </div>
+<!-- 
+    <footer>
+      <div class="expanded row ">
+        <div class="large-6 columns">
+          <p class="large-4 columns">Motion Picture Solutions, is a forerunner in digital cinema and has been mastering and distributing theatrical content since 2006.</p>
         </div>
+        <div class="large-2 columns"></div>
+        <div class="large-2 columns"></div>
+        <div class="large-2 columns"></div>
+      </div>
+    </footer>
+ -->
   </div>
 </template>
 
@@ -80,6 +163,47 @@
   }
   .first_window {
     min-height:1060px;
+    position:relative;
+    .fetti, .fettitwo, .fettithree {
+      position:absolute;
+      top:10%;
+      width:200%;
+    }
+  }
+  .cards_info {
+    background-color:#FFF;
+    padding-top:rem-calc(120);
+    .card_header {
+      padding-bottom:rem-calc(90);
+      h2 {
+        font-weight:bolder;
+      }
+    }
+    .column-block {
+      padding-bottom:rem-calc(30);
+    }
+    .vertical_block {
+      text-align: center;
+      img {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+      }
+    }
+  }
+  .oc {
+    .button {
+      background-color:#C33280;
+    }
+  }
+  .mps {
+    .button {
+      background-color:#080E1A;
+    }
+  }
+  .card_info_one, .card_info_two, .card_info_three, .card_info_four {
+    color:#fff;
+    img {
+      max-width:40%;
+    }
   }
   .intro_text {
     padding-top:rem-calc(250);
@@ -111,10 +235,48 @@
   }
   .shades {
     position:absolute;
-    bottom:-10;
+    bottom:-10px;
 
   }
+  .links {
+    .mps {
+      background: url('../assets/img/mps_bg.jpg') no-repeat left bottom fixed;
+      -webkit-background-size: auto;
+      -moz-background-size: auto;
+      -o-background-size: auto;
+      background-size: auto;
+      max-height:rem-calc(190);
+      min-height:rem-calc(567);
+      padding-right:0 !important;
+      padding-left:0 !important;
+      color:#161624;
+      h3 {
+        font-weight:bolder;
+        padding-top:rem-calc(250);
+      }
+    }
+    .oc {
+      background: url('../assets/img/oc_bg.jpg') no-repeat right bottom fixed;
+      -webkit-background-size: auto;
+      -moz-background-size: auto;
+      -o-background-size: auto;
+      background-size: auto;
+      max-height:rem-calc(190);
+      min-height:rem-calc(567);
+      padding-right:0 !important;
+      padding-left:0 !important;
+      color:#fff;
+      h3 {
+        font-weight:bolder;
+        padding-top:rem-calc(250);
+      }
+    }
 
+  }
+ footer {
+  padding-top:rem-calc(90);
+  padding-bottom:rem-calc(90);
+ }
 
 </style>
 
diff --git a/src/styles/_settings.scss b/src/styles/_settings.scss
index 8183288..0ffcd77 100755
--- a/src/styles/_settings.scss
+++ b/src/styles/_settings.scss
@@ -59,6 +59,8 @@ $foundation-palette: (
   success: #4fc08d,
   warning: #FCB738,
   alert: #DA5961,
+  mps: #161624,
+  oc: #C33280,
 );
 $light-gray: #f8f8f8;
 $medium-gray: #cacaca;