diff --git a/app/views/origami/order_reservation/index.html.erb b/app/views/origami/order_reservation/index.html.erb
index 22052479..fe23f40e 100644
--- a/app/views/origami/order_reservation/index.html.erb
+++ b/app/views/origami/order_reservation/index.html.erb
@@ -2,17 +2,17 @@
   <div class="row">
     <div class="col-lg-4 col-md-4 col-sm-4">
       <ul class="nav nav-tabs tab-col-teal" role="tablist">
-        <li class="nav-item">
-          <a class="nav-link" data-toggle="tab" href="#complete" role="tab"><%= t :competed %></a>
+        <li class="nav-item active" data-color="#F44336">
+          <a class="nav-link" data-toggle="tab" href="#complete" role="tab"><%= t :pending %></a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link active" data-toggle="tab" href="#tables" role="tab"><%= t :tables %></a>
+        <li class="nav-item" data-color="#673AB7">
+          <a class="nav-link" data-toggle="tab" href="#tables" role="tab"><%= t :processing %></a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" data-toggle="tab" href="#rooms" role="tab"><%= t :rooms %></a>
+        <li class="nav-item" data-color="#009688">
+          <a class="nav-link" data-toggle="tab" href="#rooms" role="tab"><%= t :delivering %></a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" data-toggle="tab" href="#orders" role="tab"><%= t :orders %></a>
+        <li class="nav-item" data-color="#03A9F4">
+          <a class="nav-link" data-toggle="tab" href="#orders" role="tab"><%= t :completed %></a>
         </li>
       </ul>
 
@@ -61,5 +61,14 @@
 </div>
 <!-- Column One -->
 <script>
+  $(document).ready(function() {
+   color = $(".active").attr("data-color");
+   
+});
   
 </script>
+<style type="text/css">
+  .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
+  color
+}
+</style>
\ No newline at end of file