diff --git a/css/index_interface2.css b/css/index_interface2.css
index f1f86be7..d18e1d94 100644
--- a/css/index_interface2.css
+++ b/css/index_interface2.css
@@ -127,8 +127,8 @@ body {
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
-	height: 36px;
+	width: 220px;
+	height: 40px;
 	color:#9f9f9f;
 	text-decoration:none;
 	padding:8px 0px 0px 18px;
@@ -139,8 +139,8 @@ body {
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
-	height: 36px;
+	width: 220px;
+	height: 40px;
 	text-decoration:none;
 	color:#49b848;
 }
@@ -153,7 +153,7 @@ body {
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
+	width: 220px;
 	height: 36px;
 	text-decoration:none;
 	color:#9f9f9f;
@@ -162,7 +162,7 @@ body {
 }
 .item_2_half_height a{
 	float: left;
-	width: 145px;
+	width: 220px;
 	height: 1px;
 	text-decoration:none;
 	color:#b8b8ba;
@@ -172,7 +172,7 @@ body {
 list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
+	width: 220px;
 	height: 36px;
 	text-decoration:none;
 	color:#05b0f7;
@@ -183,7 +183,7 @@ list-style: none;
 }
 .item_2_half_height {
 	float: left;
-	width: 145px;
+	width: 220px;
 	height: 1px;
 	display:none;
 }
@@ -192,7 +192,7 @@ list-style: none;
 }
 .item_3_half_height {
 	float: left;
-	width: 145px;
+	width: 220px;
 	height: 1px;
 	display:none;
 }
@@ -201,7 +201,7 @@ list-style: none;
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
+	width: 220px;
 	height: 36px;
 	text-decoration:none;
 	color:#9f9f9f;
@@ -214,7 +214,7 @@ list-style: none;
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
+	width: 220px;
 	height: 36px;
 	text-decoration:none;
 	color:#ff3506;
@@ -343,9 +343,9 @@ a:active {
 
 .header {
   position : absolute;
-  width : 20%;
-  height : 38%;
-  top : 40%;
+  width : 50%;
+  height : 30%;
+  top : 30%;
   right : 0;
   bottom : auto;
   left : 0;
@@ -354,31 +354,33 @@ a:active {
 #calllist {
   position : absolute;
   width : 50%;
-  height : 38%;
+  height : 28%;
   top : 2%;
-  left : 50%;
-  right : 0;
+  left : 48%;
+  right : 1%;
   /*max-height:180px;*/
   bottom : auto;
 }
 #qstatus {
   position : absolute;
   width : 30%;
-  height : 38%;
+  height : 30%;
   top : 2%;
-  right : 0;
-  left: 20%;
+  right : 2%;
+  left: 17%;
   bottom : auto;
   /*max-height:38%;*/
 }
 #casefunctions {
   position : absolute;
-  width : 17%;
-  height : 38%;
-  top : 2%;
+  width : 12%;
+  height : 30%;
+  top : 0;
   right : 0;
-  left: 3%;
-  font-size:15px;
+  left: 0;
+  font-size:18px;
+  padding:1%;
+  
   bottom : auto;
 }
 #casefunctions li {
@@ -386,11 +388,12 @@ a:active {
 }
 #content {
   position : absolute;
-  top : 40%;
-  left : 0;
+  top : 31%;
+  left : 0.5%;
+  right :0.5%;
   bottom : auto;
-  width : 100%;
-  height : 60%;
+  width : 99%;
+  height : 69%;
 }
 .embeddedobject {
   width:100%;
@@ -398,11 +401,11 @@ a:active {
   position:absolute;
 }
 #main-qstatus {
-  width:185px;
+  width:95%;
   /*max-height:116px;*/
   position:absolute;
   left:3%;
-  top:2%;
+  top:1%;
   height:90%;
  border: 2px solid #e9e9eb;
 border-radius: 15px;
@@ -431,7 +434,7 @@ margin: 0 auto;
 position:absolute;
 top:40%;
 height:60%;
-width:160px;
+width:260px;
 left:40%;
 list-style:none;
 }
@@ -443,20 +446,21 @@ list-style:none;
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
-	height: 36px;
+	width: 220px;
+	height: 40px;
 	color:#9f9f9f;
 	text-decoration:none;
 	padding:8px 0px 0px 18px;
 	border:none;
+	 margin-bottom: 20px;
 }
 
 .wait_li_1 a:hover{
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
-	height: 36px;
+	width: 220px;
+	height: 40px;
 	text-decoration:none;
 	color:#49b848;
 }
@@ -465,8 +469,8 @@ list-style:none;
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
-	height: 36px;
+	width: 220px;
+	height: 40px;
 	color:#9f9f9f;
 	text-decoration:none;
 	padding:8px 0px 0px 18px;
@@ -477,8 +481,8 @@ list-style:none;
 	list-style: none;
 	display: inline; 
 	float: left;
-	width: 145px;
-	height: 36px;
+	width: 220px;
+	height: 40px;
 	text-decoration:none;
 	color:#ff3506;
 }
diff --git a/css/tabber_interface2.css b/css/tabber_interface2.css
index 5f3cd627..fcb58b4f 100644
--- a/css/tabber_interface2.css
+++ b/css/tabber_interface2.css
@@ -45,7 +45,7 @@ ul.tabbernav li a
  border-bottom: none;
  background: #e9e9eb;
  text-decoration: none;
- font-size: 9px;
+ font-size: 12px;
 border-top-left-radius: 5px;
 -moz-border-radius-topleft: 5px;
 border-top-right-radius: 5px;
diff --git a/index_interface2.php b/index_interface2.php
index b7da752f..4762dfc2 100644
--- a/index_interface2.php
+++ b/index_interface2.php
@@ -194,7 +194,7 @@ else if (HEADER_EXPANDER_MANUAL)
 }
 
 
-xhtml_head(T_("Case"), $body, array("css/index_interface2.css","css/tabber_interface2.css","include/jquery-ui/jquery-ui.min.css") , $js);
+xhtml_head(T_("Case"), $body, array("include/bootstrap/css/bootstrap.min.css","css/index_interface2.css","css/tabber_interface2.css","include/jquery-ui/jquery-ui.min.css") , $js);
 print $script;
 
 $case_id = get_case_id($operator_id,true);
@@ -208,9 +208,10 @@ $scr = $db->GetRow($sql);
 $sc = $scr['self_complete'];
 $ref = $scr['referral'];
 
-?>
 
-<ul id="casefunctions" class="header">
+?>
+<div id="casefunctions" class="col-sm-2">
+<ul id="casefunctions" class="header ">
     <li id="item_1"><a href="javascript:poptastic('call_interface2.php');"><?php  echo T_("Outcome"); ?> <img src="css/images/play.jpg" /></a></li>
     <li id="item_2_e" class="item_2_full_height"><a href="javascript:poptastic('appointment.php');"><?php  echo T_("Appointment"); ?><img src="css/images/plius.jpg" /></a></li>
 <?php if ($sc == 1) { ?>
@@ -221,15 +222,15 @@ $ref = $scr['referral'];
 <?php } ?>
     <li id="item_3_e" class="item_3_full_height"><a href="?endwork=endwork"><?php  echo T_("End work"); ?> <img src="css/images/end.jpg" /></a></li>
 </ul>
+</div>
 
-
-<div id="qstatus" class="header">
+<div id="qstatus" class="header col-sm-4">
 <?php xhtml_object("status_interface2.php","main-qstatus");?>
 <?php  if (HEADER_EXPANDER_MANUAL){ ?> <div class='headerexpand'><img id='headerexpandimage' src='./images/arrow-up-2.jpg' alt='<?php  echo T_('Arrow for expanding or contracting'); ?>'/></div> <?php  } ?>
 </div>
 
 
-<div id="calllist" class="header">
+<div id="calllist" class="header col-sm-6">
 
 
 <div class="tabber" id="tab-main">
@@ -396,7 +397,6 @@ if (!$call_id)
 		{
 			$respondent_id = $rs['respondent_id'];
 		}
-
 		$call_id = get_call($operator_id,$respondent_id,$contact_phone_id,true);
 	}
 }