diff --git a/src/complete-order.html b/src/complete-order.html
index aecb22c0a8f4227e02264d7ea741453401f3f325..3efe9cd36083c45f0324afcca26da49ffab89378 100644
--- a/src/complete-order.html
+++ b/src/complete-order.html
@@ -1,59 +1,93 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
+
 <html>
   <head>
-    <title>Complete order</title>
-    <link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
+    <title>Complete Order</title>
+    <link rel="stylesheet" href="css/fan2.css"/>
   </head>
 
   <body>
+    <div class="card mcenter">
 
-    <div class="page-header">
-      <div class="company-info">
-        <p class="company-name"><span>PR</span>-<span>OJEK</span></p>
-        <p class="company-tagline">wushh.. wush.. wush.. ngeeeeng...</p>
+      <div class="rowflex">
+        <div class="flexone">
+          <div>
+            <span class="font-header" style="color: green;">PR</span>
+            -
+            <span class="font-header" style="color: red;">OJEK</span>
+          </div>
+          <div style="color: green;">
+            wushh... wushh... ngeeeeeeenggg...
+          </div>
+        </div>
 
+        <div class="mtop10 flexone textright">
+          <span>Hi, </span>
+          <span id="username">pikapikachu</span>
+          <br  />
+          <a href="#">Logout</a>
+        </div>
+      </div>
+
+      <div class="mtop10 rowflex">
+            <div class="flexone box font-header selected-navbar">ORDER</div>
+            <div class="flexone box font-header">HISTORY</div>
+            <div class="flexone box font-header">MY PROFILE</div>
       </div>
-      <div class="user-info">
-          <p class="user-name">Hi, <span>pikapikapikachu</span> !</p>
-          <p class="logout">Logout</p></div>
-    </div>
 
-    <div class="container">
-      <div class="header-box">ORDER</div>
-      <div class="header-box">HISTORY</div>
-      <div class="header-box">MY PROFILE </div>
-    </div>
 
-    <h1>MAKE AN ORDER</h1>
-    <div class="step-container">
-      <div class="step-box">
-        <div class="round-num">1</div>
-        <p>Select Destination</p>
+      <div class="mtop10">
+        <span class="font-title flexone">MAKE AN ORDER</span>
       </div>
-      <div class="step-box">
-        <div class="round-num">2</div>
-        <p>Select a Driver</p>
+
+      <div class="mtop10 rowflex">
+            <div class="rowflex order-step flexone box font-order">
+              <div class="number mr20 lh40">
+                1
+              </div>
+              <div class="lh40">
+                Select Destination
+              </div>
+            </div>
+            <div class="rowflex order-step flexone box font-order">
+              <div class="number mr20 lh40">
+                2
+              </div>
+              <div class="lh40">
+                Select a Driver
+              </div>
+            </div>
+            <div class="rowflex order-step flexone box font-order selected-order">
+              <div class="number mr20 lh40">
+                3
+              </div>
+              <div class="lh40">
+                Complete your order
+              </div>
+            </div>
       </div>
-      <div class="step-box">
-        <div class="round-num">3</div>
-        <p>Complete your order</p>
+
+      <h2>HOW WAS IT ?</h2>
+      <div class="mtop30 textcenter" >
+        <img class="mtop10 profilepic" src="img/foto-profil.jpg" />
+        <div class="mtop10" id="username">
+          @pikapikachu
+        </div>
+        <div class="mtop10" id="fullname">
+          Pikachu Smith
+        </div>
+        <div class="mtop10" style="font-size: 30px;">
+          <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
+        </div>
+        <textarea class="mtop10" style="height: 40px; width: 100%;"placeholder="Your comment..."></textarea>
+
       </div>
-    </div>
-    <h2>HOW WAS IT?</h2>
-    <div class="driver-container">
-      <img class="driver-pic" src="img/rattata.png"/>
-      <p class="driver-username">@bombarattata</p>
-      <p class="driver-fullname">Bomba-rattata Ttatatatta</p>
-      
-      <div class="rating-container">
-        <div class="rating"></div>
-        <div class="rating"></div>
-        <div class="rating"></div>
-        <div class="rating"></div>
-        <div class="rating"></div>
+
+      <div class="mtop10 button float-right">
+        Complete Order
       </div>
-      <textarea placeholder="Your comment..."></textarea>>
+
+
     </div>
-    <div class="compl-button">COMPLETE ORDER</div>
   </body>
 </html>
diff --git a/src/order-ojek.html b/src/order-ojek.html
index 28c57a05ebc7537c6aaee3bd8bb71924d6cba6cb..002928b71b2728c7cc8ae1c3aaa61ca15be5582e 100644
--- a/src/order-ojek.html
+++ b/src/order-ojek.html
@@ -1,60 +1,100 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
+
 <html>
   <head>
-    <title>Order ojek</title>
-    <link type="text/css" rel="stylesheet" href="css/stylesheet3.css"/>
+    <title>Order Ojek</title>
+    <link rel="stylesheet" href="css/fan2.css"/>
   </head>
 
   <body>
+    <div class="card mcenter">
 
-    <div class="page-header">
-      <div class="company-info">
-        <p class="company-name"><span>PR</span>-<span>OJEK</span></p>
-        <p class="company-tagline">wushh.. wush.. wush.. ngeeeeng...</p>
+      <div class="rowflex">
+        <div class="flexone">
+          <div>
+            <span class="font-header" style="color: green;">PR</span>
+            -
+            <span class="font-header" style="color: red;">OJEK</span>
+          </div>
+          <div style="color: green;">
+            wushh... wushh... ngeeeeeeenggg...
+          </div>
+        </div>
 
+        <div class="mtop10 flexone textright">
+          <span>Hi, </span>
+          <span id="username">pikapikachu</span>
+          <br  />
+          <a href="#">Logout</a>
+        </div>
+      </div>
+
+      <div class="mtop10 rowflex">
+            <div class="flexone box font-header selected-navbar">ORDER</div>
+            <div class="flexone box font-header">HISTORY</div>
+            <div class="flexone box font-header">MY PROFILE</div>
       </div>
-      <div class="user-info">
-          <p class="user-name">Hi, <span>pikapikapikachu</span> !</p>
-          <p class="logout">Logout</p></div>
-    </div>
 
-    <div class="container">
-      <div class="header-box">ORDER</div>
-      <div class="header-box">HISTORY</div>
-      <div class="header-box">MY PROFILE </div>
-    </div>
 
-    <h1>MAKE AN ORDER</h1>
-    <div class="step-container">
-      <div class="step-box">
-        <div class="round-num">1</div>
-        <p>Select Destination</p>
+      <div class="mtop10">
+        <span class="font-title flexone">MAKE AN ORDER</span>
       </div>
-      <div class="step-box">
-        <div class="round-num">2</div>
-        <p>Select a Driver</p>
+
+      <div class="mtop10 rowflex">
+            <div class="rowflex order-step flexone box font-order">
+              <div class="number mr20 lh40">
+                1
+              </div>
+              <div class="lh40">
+                Select Destination
+              </div>
+            </div>
+            <div class="rowflex order-step flexone box font-order selected-order">
+              <div class="number mr20 lh40">
+                2
+              </div>
+              <div class="lh40">
+                Select a Driver
+              </div>
+            </div>
+            <div class="rowflex order-step flexone box font-order">
+              <div class="number mr20 lh40">
+                3
+              </div>
+              <div class="lh40">
+                Complete your order
+              </div>
+            </div>
       </div>
-      <div class="step-box">
-        <div class="round-num">3</div>
-        <p>Complete your order</p>
+
+      <div class="rowflex mtop30">
+        <div class="labels mlauto">
+          Picking Point
+        </div>
+        <input class="mrauto" placeholder="  insert picking point"/>
       </div>
-    </div>
 
 
+      <div class="rowflex mtop10">
+        <div class="labels mlauto">
+          Destination
+        </div>
+        <input class="mrauto" placeholder="  insert destination"/>
+      </div>
+
 
-    <div class="dest-input">
-      <p>Picking point</p>
-      <input placeholder="  insert picking point"></input>
-    </div>
-    <div class="dest-input">
-      <p>Destination</p>
-      <input placeholder="  insert destination"></input>
-    </div>
-    <div class="dest-input">
-      <p>Preferred Driver</p>
-      <input placeholder="  (optional)"></input>
-    </div>
-    <div class="next-button">NEXT</div>
+      <div class="rowflex mtop10">
+        <div class="labels mlauto">
+          Preferred Driver
+        </div>
+        <input class="mrauto" placeholder="  optional"/>
+      </div>
 
+      <div class="mtop50 button mcenter">
+        Complete Order
+      </div>
+
+
+    </div>
   </body>
 </html>