diff --git a/css/style.css b/css/style.css
index a866575..86d8cd6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -437,8 +437,8 @@
 /* our team section */
 #team, #family {
   background-color: #0080ff;
-  font-weight: 700;
-  font-size: 21px;  
+  /*font-weight: 700;
+  font-size: 21px; */
 }
 .hr.invisible_hr {
     height: 0;
@@ -468,6 +468,7 @@
 .team-name, .family-name {font-size: 21px}
 .team-links, .family-links {
   padding-top: .75em;
+  color: #07374a;
 }
 .team-image img, .family-image img {
   max-width:150px;
@@ -622,3 +623,210 @@
     padding-right: 15px;
   }
 }
+
+/* --- Mock-up Setting --- */
+/* Paste link to your image 310x550px */
+/* Screen Setting */
+/* ---  --- */
+/* --- Animation Setting --- */
+/* ---  --- */
+
+h1 {
+  color: #fff;
+  z-index: 10;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: default;
+}
+
+h1 span:nth-of-type(1) {
+  font-size: 1em;
+  line-height: 0.5em;
+}
+h1 span:nth-of-type(2) {
+  font-size: .4em;
+  font-weight: 400;
+  line-height: 3.65em;
+  color: #0080ff;
+  background-color: #282828;
+  padding: 3px 10px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
+}
+h1 span:nth-of-type(3) {
+  font-size: 1.5em;
+  line-height: .85em;
+}
+
+.space {
+  will-change: transform;
+  position: relative;
+  left:50%;
+  -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.8);
+          transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.8);
+  -webkit-transition: all 600ms;
+  transition: all 600ms;
+}
+
+.space-hover {
+  -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.8);
+          transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.8);
+}
+
+.phone-container {
+  width: 338px;
+  height: 700px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform: translateX(-80%);
+          transform: translateX(-80%);
+  border-radius: 60px;
+}
+
+.phone-front {
+  will-change: transform;
+  width: 336px;
+  height: 700px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background-image: url("https://goo.gl/T50KD8");
+  background-repeat: no-repeat;
+  background-position: -16px 0;
+  background-size: 370px 701px;
+  border-radius: 60px;
+  box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
+  -webkit-transition: -webkit-transform 600ms;
+  transition: -webkit-transform 600ms;
+  transition: transform 600ms;
+  transition: transform 600ms, -webkit-transform 600ms;
+  -webkit-transition: box-shadow 450ms;
+  transition: box-shadow 450ms;
+}
+
+.phone-front-hover {
+  box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
+  -webkit-transition: -webkit-transform 600ms;
+  transition: -webkit-transform 600ms;
+  transition: transform 600ms;
+  transition: transform 600ms, -webkit-transform 600ms;
+  -webkit-transition: box-shadow 450ms;
+  transition: box-shadow 450ms;
+}
+
+.phone-screen {
+  width: 310px;
+  height: 550px;
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 68.5px;
+  margin: auto;
+  background-color: #000;
+  overflow: hidden;
+}
+.phone-screen::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
+  background-image: url("../images/bliss_screens.gif");
+  background-repeat: no-repeat;
+  background-position: 50% 0px;
+  background-size: cover;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+.phone-screen::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(250, 250, 250, 0.1);
+}
+
+.phone-side {
+  will-change: transform;
+  width: 400px;
+  height: 750px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 50px;
+  background-repeat: no-repeat;
+  background-position: 22px 5px;
+  background-size: 400px 742px;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
+          transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
+  -webkit-transition: all 350ms;
+  transition: all 350ms;
+}
+
+.phone-side-hover {
+  -webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
+          transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
+  -webkit-transition: all 350ms;
+  transition: all 350ms;
+}
+
+@-webkit-keyframes figure-anim {
+  from {
+    border-radius: 50%;
+    -webkit-transform: rotate(0deg) scale(1);
+            transform: rotate(0deg) scale(1);
+  }
+  to {
+    border-radius: 30%;
+    -webkit-transform: rotate(360deg) scale(0.5);
+            transform: rotate(360deg) scale(0.5);
+  }
+}
+
+@keyframes figure-anim {
+  from {
+    border-radius: 50%;
+    -webkit-transform: rotate(0deg) scale(1);
+            transform: rotate(0deg) scale(1);
+  }
+  to {
+    border-radius: 30%;
+    -webkit-transform: rotate(360deg) scale(0.5);
+            transform: rotate(360deg) scale(0.5);
+  }
+}
+@-webkit-keyframes figure-container-anim {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes figure-container-anim {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
diff --git a/images/bliss_screens.gif b/images/bliss_screens.gif
new file mode 100644
index 0000000..987cac2
--- /dev/null
+++ b/images/bliss_screens.gif
Binary files differ
diff --git a/images/phone_front.svg b/images/phone_front.svg
new file mode 100644
index 0000000..eeadb13
--- /dev/null
+++ b/images/phone_front.svg
@@ -0,0 +1,43 @@
+<svg id="Группа_1" data-name="Группа 1" xmlns="http://www.w3.org/2000/svg" width="862" height="1764.03" viewBox="0 0 862 1764.03">
+  <metadata><?xpacket begin="﻿" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
+   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+      <rdf:Description rdf:about=""/>
+   </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?></metadata>
+<defs>
+    <style>
+      .cls-1 {
+        fill: #3a3a3a;
+      }
+
+      .cls-2 {
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <rect id="Прямоугольник_скругл._углы_1" data-name="Прямоугольник, скругл. углы 1" class="cls-1" x="191.5" y="28.5" width="496" height="1716" rx="10" ry="10"/>
+  <path id="iphone_black" data-name="iphone black" class="cls-2" d="M1344.5,4869.5h-5.03V5986.4a141.06,141.06,0,0,1-127.07,140.44,1.993,1.993,0,0,0-1.84-1.21h-8.81a2,2,0,0,0-1.99,1.87c-0.4.01-.81,0.02-1.21,0.02h-14.81a1.989,1.989,0,0,0-1.99-1.89h-8.81a1.983,1.983,0,0,0-1.99,1.89h-16.09a1.983,1.983,0,0,0-1.99-1.89h-8.81a1.989,1.989,0,0,0-1.99,1.89h-16.02a1.983,1.983,0,0,0-1.99-1.89h-8.87a1.983,1.983,0,0,0-1.99,1.89h-16.02a1.989,1.989,0,0,0-1.99-1.89h-8.82a1.98,1.98,0,0,0-1.98,1.89h-16.03a1.983,1.983,0,0,0-1.99-1.89h-8.87a1.989,1.989,0,0,0-1.99,1.89H1005.5v-0.02a2.006,2.006,0,0,0-2-2h-16a2,2,0,0,0-2,2v0.02h-24V6126a2.5,2.5,0,0,0-2.5-2.5H868a2.5,2.5,0,0,0-2.5,2.5v1.52h-22v-0.02a2,2,0,0,0-2-2h-16a2,2,0,0,0-2,2v0.02H773.489a1.987,1.987,0,0,0-1.989-1.89h-8.875a1.987,1.987,0,0,0-1.989,1.89H744.614a1.987,1.987,0,0,0-1.989-1.89h-8.812a1.987,1.987,0,0,0-1.99,1.89H715.8a1.987,1.987,0,0,0-1.989-1.89h-8.876a1.987,1.987,0,0,0-1.989,1.89H686.927a1.987,1.987,0,0,0-1.99-1.89h-8.812a1.987,1.987,0,0,0-1.989,1.89H658.052a1.987,1.987,0,0,0-1.99-1.89H647.25a1.987,1.987,0,0,0-1.989,1.89H629.239a1.987,1.987,0,0,0-1.989-1.89h-8.813a1.99,1.99,0,0,0-1.894,1.38A141.041,141.041,0,0,1,487.53,5986.4V5029.5H484.5a1,1,0,0,1-1-1v-126a1,1,0,0,1,1-1h3.03v-32H484.5a1,1,0,0,1-1-1v-126a1,1,0,0,1,1-1h3.03v-82H484.5a1,1,0,0,1-1-1v-70a1,1,0,0,1,1-1h3.03v-82.87c0-77.94,63.094-141.13,140.923-141.13h570.1c77.83,0,140.92,63.19,140.92,141.13V4741.5h5.03a1,1,0,0,1,1,1v126A1,1,0,0,1,1344.5,4869.5Zm-567-404a14,14,0,1,0,14,14A14,14,0,0,0,777.5,4465.5Zm136,1618a68,68,0,1,0-68-68A68,68,0,0,0,913.5,6083.5Zm-0.022-1669.13a10,10,0,1,0,9.994,10A10,10,0,0,0,913.478,4414.37ZM987.5,4477.5a4,4,0,0,0-4-4h-140a4,4,0,0,0-4,4v4a4,4,0,0,0,4,4h140a4,4,0,0,0,4-4v-4Zm-74,1477c33.137,0,60,27.31,60,61s-26.863,61-60,61-60-27.31-60-61S880.363,5954.5,913.5,5954.5Z" transform="translate(-483.5 -4363.5)"/>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 5f19f48..4f41e85 100644
--- a/index.html
+++ b/index.html
@@ -65,59 +65,34 @@
       </div>
     </div>
     <div id="about" class="row cover">
-      <h2 class="text-center">About Bliss</h2>
-      <div class="row">
-        <div class="col-md-6 text-center about-info">
-          <img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
-          <p class="text-center">We are a team of designers, developers, maintainers, and business professionals who work together to help achieve the dreams of our teammates and the Android Community. Our goal is to help provide a unique learning environment, using the FOSS
-            mentality, and not only train people how to make and monetize what they aspire, but also help provide unique business opportunities for already existing projects too. </p>
-          <p class="text-center">If you are interested in joining our team, please fill out the form found here:
-            <a href="https://goo.gl/forms/PdiaAj1PojosmehK2"></a>
-          </p>
-            <a href="https://goo.gl/forms/PdiaAj1PojosmehK2">Join Team Bliss</a>
-          <p></p>
-          <p class="text-center">Or if you represent an already existing project and would like to join the <a href="#family">Bliss Family</a>, please fill out the form found here:
-            <a href="https://goo.gl/kAb7ti"></a>
-          </p>
-            <a href="https://goo.gl/kAb7ti">Join Bliss Family</a>
-          <p></p>
-        </div>
-        <div class="col-md-6 about-tools">
-          <p class="text-center">The nature of our business is to train and develop. So we have quite the diverse list of things we have experience with, and the list is growing constantly
-            <br>
-            <br>Here's a few of the types of projects we work on</p>
-          <div class="col-xs-6">
-            <ul>
-              <li>Android Development</li>
-              <li>Graphic Design</li>
-              <li>Web Development</li>
-              <li>IOT Software Development</li>
-              <li>Server Admin</li>
-              <li>Prototype Design</li>
-              <li>Animation</li>
-              <li>Brand Imaging</li>
-            </ul>
-          </div>
-          <div class="col-xs-6">
-            <ul>
-              <li>Development Training</li>
-              <li>Design Training</li>
-              <li>Team Management</li>
-              <li>Marketing</li>
-              <li>Product Technology Strategy</li>
-              <li>New Product Development</li>
-              <li>Product Testing</li>
-              <li>OEM Software Resources</li>
-            </ul>
-          </div>
-        </div>
-        <div class="row break">
-          <div class="centered col-md-6 about-last">
-            <p class="text-center"><a href="#portfolio" id="scrollPortfolio">Head To The Downloads <span class="glyphicon glyphicon-arrow-down"></span></a></p>
-          </div>
-        </div>
-      </div>
+      <div class="container">
+		<div class="family-header text-center"> 
+		  <h2 class="text-center">About Bliss OS</h2></div>
+		  <div class="row">
+			<div class="col-md-6 text-center about-info">
+			  <img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
+			  <p class="text-center">Bliss OS is a lightweight OS with tons of options, based on Android that works across a multitude of devices. Even PC’s</p>
+			  <p class="text-center">Our focus is to bring the Open Source community a quality OS that can run ad a daily driver, syncing your apps, settings and customizations across all platforms you run Bliss on.</p>
+			</div>
+			<div class="col-md-6 about-tools">
+			  <div class="space">
+				<div class="phone-container">
+				  <div class="phone-side"></div>
+				  <div class="phone-front">
+					<div class="phone-screen"></div>
+				  </div>
+				</div>
+			  </div>
+			</div>
+			<div class="row break">
+			  <div class="centered col-md-6 about-last">
+				<p class="text-center"><a href="#portfolio" id="scrollPortfolio">Head To The Downloads <span class="glyphicon glyphicon-arrow-down"></span></a></p>
+			  </div>
+			</div>
+		  </div>
+		</div>
     </div>
+	
     <!-- End #About -->
     <div id="portfolio" class="row cover">
       <h2 class="text-center">Downloads</h2>
@@ -214,8 +189,8 @@
   <div id="team" class="row cover bottom text-center section">
 	<h2 class="highlight_secondary team-header">Our Team</h2>
       <div class="container">
-        <p> It takes alot of talent to make a team run this smoothly.
-          <br>Here are the people that help make it Bliss </p>
+        <h3> It takes alot of talent to make a team run this smoothly.
+          <br>Here are the people that help make it Bliss </h3>
         <div class="hr big_size_hr invisible_hr"> <i class="fa fa-"></i> </div>
         <div class="row">
 		  <div class="col-md-2 col-sm-4 col-xs-6">
@@ -575,6 +550,57 @@
 <div class="container">
 	<div class="family-header text-center"> 
       <h2 class="text-center">About Bliss Family</h2></div>
+	  <div class="row">
+        <div class="col-md-6 text-center about-info">
+          <img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
+          <p class="text-center">We are a team of designers, developers, maintainers, and business professionals who work together to help achieve the dreams of our teammates and the Android Community. Our goal is to help provide a unique learning environment, using the FOSS
+            mentality, and not only train people how to make and monetize what they aspire, but also help provide unique business opportunities for already existing projects too. </p>
+          <p class="text-center">If you are interested in joining our team, please fill out the form found here:
+            <a href="https://goo.gl/forms/PdiaAj1PojosmehK2"></a>
+          </p>
+            <a href="https://goo.gl/forms/PdiaAj1PojosmehK2">Join Team Bliss</a>
+          <p></p>
+          <p class="text-center">Or if you represent an already existing project and would like to join the <a href="#family">Bliss Family</a>, please fill out the form found here:
+            <a href="https://goo.gl/kAb7ti"></a>
+          </p>
+            <a href="https://goo.gl/kAb7ti">Join Bliss Family</a>
+          <p></p>
+        </div>
+        <div class="col-md-6 about-tools">
+          <p class="text-center">The nature of our business is to train and develop. So we have quite the diverse list of things we have experience with, and the list is growing constantly
+            <br>
+            <br>Here's a few of the types of projects we work on</p>
+          <div class="col-xs-6">
+            <ul>
+              <li>Android Development</li>
+              <li>Graphic Design</li>
+              <li>Web Development</li>
+              <li>IOT Software Development</li>
+              <li>Server Admin</li>
+              <li>Prototype Design</li>
+              <li>Animation</li>
+              <li>Brand Imaging</li>
+            </ul>
+          </div>
+          <div class="col-xs-6">
+            <ul>
+              <li>Development Training</li>
+              <li>Design Training</li>
+              <li>Team Management</li>
+              <li>Marketing</li>
+              <li>Product Technology Strategy</li>
+              <li>New Product Development</li>
+              <li>Product Testing</li>
+              <li>OEM Software Resources</li>
+            </ul>
+          </div>
+        </div>
+        <div class="row break">
+          <div class="centered col-md-6 about-last">
+            <p class="text-center"><a href="#portfolio" id="scrollPortfolio">Head To The Downloads <span class="glyphicon glyphicon-arrow-down"></span></a></p>
+          </div>
+        </div>
+      </div>
       <div class="row">
         <div class="text-center">
           <img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
diff --git a/js/script.js b/js/script.js
index 50719bd..fc46cbf 100644
--- a/js/script.js
+++ b/js/script.js
@@ -12,7 +12,22 @@
           }
 
         });
+		
+		$('.phone-container').hover(function() {
+		  $('.space').toggleClass('space-hover');
+		  $('.phone-side').toggleClass('phone-side-hover');
+		  $('.phone-front').toggleClass('phone-front-hover');
+		});
 
+		$("[class^='figure-']")
+		  .within({
+			  distance: 1000,
+			  cord: 'center'
+			},
+			function(distance, ele, event) {
+			  ele.style.transform = 'scale(' + (7000 - distance) / 7000 + ')';
+			}
+		  )
 
         // Scrolling effect for Arrow icons
         $("#scrollIcon").click(function(e) {