diff --git a/css/animations.css b/css/animations.css
index 2979a9b..9346351 100644
--- a/css/animations.css
+++ b/css/animations.css
@@ -717,3 +717,72 @@
   }
 }
 
+.device {
+  transform: rotateX(25deg) rotateZ(-25deg) translateX(0) scale(.93);
+  margin: auto;
+	position: relative;
+	display: inline-block;
+	background: #333333;
+	box-shadow:
+		0 1px 4px 0 rgba(0,0,0,0.20),
+		0 8px 24px 0 rgba(0,0,0,0.20),
+		0 0 0 1px rgba(0, 0, 0, 0.53),
+		inset 0 -2px 2px 2px rgba(0,0,0,0.55);
+  box-shadow: -1px 1px 4px 0 rgba(0, 0, 0, 0.20), -8px 8px 24px 0 rgba(0, 0, 0, 0.20), inset 5px -5px 5px 5px rgba(0, 0, 0, 0.24);
+	border-radius: 40px;
+	position: relative;
+	box-sizing: content-box;
+	padding: 50px 10px;
+  padding: 45px 10px 55px 20px;
+  width: 200px;
+  height: 360px;
+}
+.device-screen {
+	width: 98%;
+	height: 98%;
+	background: #111111;
+	overflow: hidden;
+	border-radius: 4px;
+	box-shadow: inset 0px 1px 3px rgba(0,0,0,0.1);
+	position: relative;
+}
+.device-screen:before {
+	content: "";
+	top: 0;
+	bottom: 0;
+	width: 98%;
+	height: 98%;
+	box-shadow: inset 0px 1px 3px rgba(0,0,0,0.1);
+	position: absolute;
+	border-radius: 8px;
+	overflow: hidden;
+}
+.device video {
+	border-radius: 0px;
+	width: 100%;
+	height: 105%;
+  object-fit: cover;
+}
+
+.device-screen img {
+  height: 100%;
+  width: 105%;
+  object-fit: cover;
+}
+
+@media (max-width: 850px) {
+  .device {
+    border-radius: 4.6vw;
+    padding: 6vw 1.2vw;
+    width: 33vw;
+    height: 59vw;
+  }
+  .device video,
+  .device-screen {
+    border-radius: .33vw;
+  }
+}
+
+
+
+
diff --git a/index.html b/index.html
index b9e7b90..d7d2b3e 100644
--- a/index.html
+++ b/index.html
@@ -99,18 +99,28 @@
   <!-- Article style section -->
   <div class="py-5">
     <div class="container">
-      <div class="row py-5" style="" id="about">
-        <div class="col-md-5 order-2 order-md-1 animate-in-left">
-          <div>
-            <img src="images/phone_front.svg" style="max-height: 65%;max-width: 50%; box-shadow: 0 0px 12px 10px rgba(0, 155, 255, 0.2), 0 0px 15px 10px rgba(0, 155, 255, 0.19);" class="justify-content-center align-items-center flex-grow-1 d-flex mx-auto glow ">
+      <div class="row" style="" id="about">
+        <div class="col-md-6 order-2 order-md-1 animate-in-left d-flex flex-grow-1 align-items-center justify-content-center">
+          <div class="flex-grow-1 justify-content-center align-items-center">
+            <div class="device iphone animate-in-left d-flex flex-grow-1 align-items-center justify-content-center">
+              <div class="device-screen">
+                <img src="" alt="">
+              </div>
+              <video muted="" playsinline="" autoplay="" loop="" preload="metadata">
+				<source src="videos/bliss-phone-demo.webm" type="video/webm">
+                <source src="videos/bliss-phone-demo.mp4" type="video/mp4">
+              </video>
+            </div>
+            <!-- 
+			<img src="images/phone_front.svg" style="max-height: 65%;max-width: 50%; box-shadow: 0 0px 12px 10px rgba(0, 155, 255, 0.2), 0 0px 15px 10px rgba(0, 155, 255, 0.19);" class="justify-content-center align-items-center flex-grow-1 d-flex mx-auto glow ">
             <div>
               <video style="max-width: 45%;vertical-align: middle;display: inline-flex;float: none;margin-top: -90%;z-index: 999" preload="" muted="" autoplay="autoplay" oncanplay="this.muted=true" loop="loop" class="justify-content-center align-items-center flex-grow-1 d-flex mx-auto" width="90%" height="39%">
                 <source src="videos/bliss-phone-demo.webm" type="video/webm">
                 <source src="videos/bliss-phone-demo.mp4" type="video/mp4"> Your browser does not support VP9 or H.264 video content. </video>
-            </div>
+				-->
           </div>
         </div>
-        <div class="col-md-7 align-self-center order-1 order-md-2 my-3 text-md-left text-center">
+        <div class="col-md-6 align-self-center order-1 order-md-2 my-3 text-md-left text-center">
           <h3 class="display-3">About Bliss</h3>
           <p class="my-4 text-light">We are a volunteer based non-profit organization that works to maintain various development projects. We provide the training and mentorship to help our team members dreams become reality.&nbsp;<br>Our main focus is to provide a quality OS that can run on all your devices, preserving customizations and options by syncing across all platforms. With all the bells and whistles, you can imagine.&nbsp;We believe you'll soon learn why we call it Bliss.</p>
           <a class="btn btn-outline-primary" href="#features">Learn more</a>
@@ -703,7 +713,7 @@
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   <!-- Script: Smooth scrolling between anchors in the same page -->
   <script src="js/smooth-scroll.js"></script>
-  
+
 </body>
 
 </html>
\ No newline at end of file