diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/sco.css b/koha-tmpl/opac-tmpl/bootstrap/css/sco.css
index 38fe877..e8b6d8f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/sco.css
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/sco.css
@@ -1,5 +1,74 @@
+@font-face {
+    font-family: 'NotoSans';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Noto Sans Regular'),
+        url('fonts/NotoSans-Regular-webfont.woff2') format('woff2'),
+        url('fonts/NotoSans-Regular-webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'NotoSans';
+    font-style: bold;
+    font-weight: 700;
+    src: local('Noto Sans Bold'),
+        url('fonts/NotoSans-Bold-webfont.woff2') format('woff2'),
+        url('fonts/NotoSans-Bold-webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'NotoSans';
+    font-style: italic;
+    font-weight: 400;
+    src: local('Noto Sans Italic'),
+        url('fonts/NotoSans-Italic-webfont.woff2') format('woff2'),
+        url('fonts/NotoSans-Italic-webfont.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'NotoSans';
+    font-style: italic;
+    font-weight: 700;
+    src: local('Noto Sans Bold Italic'),
+        url('fonts/NotoSans-BoldItalic-webfont.woff2') format('woff2'),
+        url('fonts/NotoSans-BoldItalic-webfont.woff') format('woff');
+}
+
 body {
-    background-color: #EAEAE6;
+    background: #FCF9FC none;
+    font-family: 'NotoSans';
+    font-size: 16px;
+}
+
+#wrap {
+    height: auto !important;
+    height: 100%;
+    min-height: 100%;
+    padding-right: 40px;
+    padding-left: 40px;
+}
+
+#logo {
+  background: transparent url("../images/koha-green-logo.png") no-repeat scroll 0%;
+  border: 0;
+  float: left !important;
+  margin: 0;
+  padding: 0;
+  width: 100px;
+}
+#logo a {
+  border: 0;
+  cursor: pointer;
+  display: block;
+  height: 0 !important;
+  margin: 0;
+  overflow: hidden;
+  padding: 40px 0 0;
+  text-decoration: none;
+  width: 100px;
+}
+#logo a:focus {
+  background-color: transparent;
 }
 
 a, a:visited,
@@ -9,20 +78,24 @@ a, a:visited,
 }
 
 a.title {
+    font-size: 108%;
     font-weight: bold;
 }
 
 h1 {
     font-size : 140%;
     line-height: 150%;
+    color: #727272;
 }
 h2 {
 
+    color: #727272;
     font-size : 130%;
     line-height: 150%;
 }
 h3 {
 
+    color: #727272;
     font-size : 120%;
     line-height: 150%;
 }
@@ -33,14 +106,21 @@ h4 {
 h5 {
 
     font-size : 100%;
+    color: #727272;
 }
 caption {
+    color: #727272;
     font-size: 120%;
     font-weight: bold;
-    margin : .5em 0;
+    margin: 0;
     text-align: left;
 }
 
+input[type="text"]:focus {
+    border-color: #85ca11;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(194,228,136,.6)
+}
+
 input,
 textarea {
     width: auto;
@@ -49,34 +129,119 @@ textarea {
 legend {
     font-size: 110%;
     font-weight: bold;
+    color: #727272;
 }
 th {
-    background-color: #ECEDE6;
+    background-color: #E2E8E8;
+}
+@media only screen and (min-width:768px)
+{
+    .main {
+        margin-left:20px;
+        margin-right:20px;
 }
 .main {
     background-color: #FFF;
-    border: 1px solid #D2D2CF;
-    border-radius: 8px 8px 8px 8px;
-    margin: 0.5em 20px;
-    padding: 0.8em 0;
-    -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2);
-    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .2);
-}
-.navbar-inverse .brand, .navbar-inverse .nav > li > a {
-    color: #9FE1FF;
-    font-weight: bold;
+    border: 1px solid #F0F3F3;
+    margin-bottom: .5em;
+    margin-top: .5em;
+}
+
+.navbar .divider-vertical {
+  border-left-color: #fcf9fc;
+  border-right-color: #fcf9fc;
+}
+.navbar .nav li.dropdown > a:focus .caret {
+  border-top-color: #85ca11;
+  border-bottom-color: #85ca11;
+}
+.navbar .nav li.dropdown > a:hover .caret {
+  border-top-color: #85ca11;
+  border-bottom-color: #85ca11;
+}
+.navbar-inverse .brand {
+  color: #9fe1ff;
+  font-weight: bold;
+}
+.navbar-inverse .navbar-inner {
+  background: #fcf9fc none;
+  border-color: #fcf9fc;
+  box-shadow: none;
+}
+.navbar-inverse .nav > li > a {
+  color: #727272;
+  font-weight: bold;
+  text-shadow: none;
+}
+.navbar-inverse .nav > li > a:hover {
+  color: #85ca11;
+}
+.navbar-inverse .nav > li > a:focus {
+  color: #85ca11;
+}
+.navbar-inverse .nav li.dropdown > a:hover .caret {
+  border-top-color: #85ca11;
+  border-bottom-color: #85ca11;
+}
+.navbar-inverse .nav li.dropdown > a:focus .caret {
+  border-top-color: #85ca11;
+  border-bottom-color: #85ca11;
+}
+.navbar-inverse .nav li.dropdown.open > .dropdown-toggle {
+  background-color: transparent;
+  color: #85ca11;
+}
+.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret {
+  border-top-color: #85ca11;
+  border-bottom-color: #85ca11;
+}
+.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret:hover {
+  border-top-color: #85ca11;
+  border-bottom-color: #85ca11;
+}
+.navbar-inner {
+  background: #fcf9fc none;
+}
+.navbar-fixed-bottom.navbar-static-bottom {
+  margin-top: 0.5em;
+  position: static;
+}
+.navbar-fixed-bottom .navbar-inner {
+  box-shadow: none;
 }
 
 .table-striped tbody > tr:nth-child(odd) > td,
 .table-striped tbody > tr:nth-child(odd) > th {
-  background-color: #F4F4F4;
+  background-color: #F0F3F3;
 }
+
 /* Redefine a new style for Bootstrap's class "close" since we use that already */
 /* Use <a class="closebtn" href="#">&times;</a> */
-.alert .closebtn{position:relative;top:-2px;right:-21px;line-height:20px;}
-.modal-header .closebtn{margin-top:2px;}
-.closebtn{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.2;filter:alpha(opacity=20);}.closebtn:hover{color:#000000;text-decoration:none;cursor:pointer;opacity:0.4;filter:alpha(opacity=40);}
-button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;}
+.modal-header .closebtn {
+  margin-top: 2px;
+}
+.closebtn {
+  color: #000;
+  float: right;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 20px;
+  opacity: 0.2;
+  text-shadow: 0 1px 0 #fff;
+}
+.closebtn:hover {
+  color: #000;
+  cursor: pointer;
+  opacity: 0.4;
+  text-decoration: none;
+}
+button.closebtn {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
 .btn-group label,
 .btn-group select {
     font-size: 13px;
@@ -84,56 +249,47 @@ button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit
 
 /* Override Bootstrap alert */
 .alert {
-    background: #fffbe5; /* Old browsers */
-    background: -moz-linear-gradient(top,  #fffbe5 0%, #fff0b2 9%, #fff1a8 89%, #f7e665 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffbe5), color-stop(9%,#fff0b2), color-stop(89%,#fff1a8), color-stop(100%,#f7e665)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #fffbe5 0%,#fff0b2 9%,#fff1a8 89%,#f7e665 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffbe5', endColorstr='#f7e665',GradientType=0 ); /* IE6-9 */
-    border-color : #D6C43B;
+    background: linear-gradient( to bottom, #FFFBE5 0%, #FFF0B2 9%, #FFF1A8 89%, #F7E665 100% );
+    border-color: #D6C43B;
     color: #333;
+
+    /* Redefine a new style for Bootstrap's class "close" since we use that already */
+    /* Use <a class="closebtn" href="#">&times;</a> */
+
+    .closebtn {
+        line-height: 20px;
+        position: relative;
+        right: -21px;
+        top: -2px;
+    }
 }
 
 /* Override Bootstrap alert.alert-info */
 .alert-info {
-    background: #f4f6fa; /* Old browsers */
-    background: -moz-linear-gradient(top,  #f4f6fa 0%, #eaeef5 4%, #e8edf6 96%, #cddbf2 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f6fa), color-stop(4%,#eaeef5), color-stop(96%,#e8edf6), color-stop(100%,#cddbf2)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #f4f6fa 0%,#eaeef5 4%,#e8edf6 96%,#cddbf2 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f6fa', endColorstr='#cddbf2',GradientType=0 ); /* IE6-9 */
-    border-color : #C5D1E5;
+    background: linear-gradient( to bottom, #F4F6FA 0%, #EAEEF5 4%, #E8EDF6 96%, #CDDBF2 100% );
+    border-color: #C5D1E5;
     color: #333;
 }
 
 /* Override Bootstrap alert.alert-success */
 .alert-success {
-    background: #f8ffe8; /* Old browsers */
-    background: -moz-linear-gradient(top,  #f8ffe8 0%, #e3f5ab 4%, #dcf48d 98%, #9ebf28 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(4%,#e3f5ab), color-stop(98%,#dcf48d), color-stop(100%,#9ebf28)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #f8ffe8 0%,#e3f5ab 4%,#dcf48d 98%,#9ebf28 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#9ebf28',GradientType=0 ); /* IE6-9 */
-    border-color : #9FBA35;
+    background: linear-gradient( to bottom, #F8FFE8 0%, #E3F5AB 4%, #DCF48D 98%, #9EBF28 100% );
+    border-color: #9FBA35;
     color: #333;
 }
+
 #members p {
-    color : #EEE;
+    color : #727272;
 }
 
 #members a {
-    color: #A6D8ED;
+    color: #E8583C;
     font-weight: bold;
 }
 
 #members a.logout {
     color : #E8583C;
+    font-weight: bold;
     padding : 0 .3em 0 .3em;
 }
 
@@ -177,22 +333,22 @@ i.help {
 
 .table .sorting_asc {
     padding-right: 19px;
-    background: url("../images/asc.gif") no-repeat scroll right center #EEEEEE;
+    background: url("../images/asc.gif") no-repeat scroll 100% 80% #E2E8E8;
 }
 .table .sorting_desc {
     padding-right: 19px;
-    background: url("../images/desc.gif") no-repeat scroll right center #EEEEEE;
+    background: url("../images/desc.gif") no-repeat scroll 100% 80% #E2E8E8;
 }
 .table .sorting {
     padding-right: 19px;
-    background: url("../images/ascdesc.gif") no-repeat scroll right center #EEEEEE;
+    background: url("../images/ascdesc.gif") no-repeat scroll 100% 75% #E2E8E8;
 }
 .table .nosort,
 .table .nosort.sorting_asc,
 .table .nosort.sorting_desc,
 .table .nosort.sorting {
     padding-right: 19px;
-    background: #EEEEEE none;
+    background: #E2E8E8 none;
 }
 
 #sci_logout {
@@ -205,4 +361,4 @@ i.help {
 
 #sci_refresh_button {
     color: rgb(51, 51, 51);
-}
\ No newline at end of file
+}
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc
index 5b18006..b7b4140 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead-sco.inc
@@ -5,10 +5,12 @@
     <div class="navbar navbar-inverse navbar-static-top">
         <div class="navbar-inner">
             <div class="container-fluid">
-                <a class="brand" href="/cgi-bin/koha/sco/sco-main.pl"><img src="[% interface | html %]/[% theme | html %]/images/koha-logo-navbar.png" alt=""></a>
+                <h1 id="logo">
+                    <a class="brand" href="/cgi-bin/koha/sco/sco-main.pl"></a>
+                </h1>
                 <div id="checkouthelp">
                     <ul class="nav pull-right">
-                        <li><a href="/cgi-bin/koha/sco/help.pl"><i class="icon help"></i> Help</a></li>
+                        <li><a href="/cgi-bin/koha/sco/help.pl"><i class="fa fa-question-circle" aria-hidden="true"></i> Help</a></li>
                     </ul>
                 </div>
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
index df09322..27ce763 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/sco/sco-main.tt
@@ -11,6 +11,7 @@
 <link rel="shortcut icon" href="[% IF ( Koha.Preference('OpacFavicon') ) %][% Koha.Preference('OpacFavicon') | url %][% ELSE %][% interface | html %]/[% theme | html %]/images/favicon.ico[% END %]" type="image/x-icon" />
 [% Asset.css("lib/bootstrap/css/bootstrap.min.css") | $raw %]
 [% Asset.css("lib/jquery/jquery-ui.css") | $raw %]
+[% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
 [% Asset.css("css/sco.css") | $raw %]
 [% IF ( Koha.Preference('OPACUserCSS') ) %]<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>[% END %]
 [% IF ( Koha.Preference('SCOUserCSS') ) %]<style>[% Koha.Preference('SCOUserCSS') | $raw %]</style>[% END %]