diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-nav.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/circ-nav.inc
index 48f28d9322..bba7beac9b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-nav.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/circ-nav.inc
@@ -21,7 +21,7 @@
                 <li><a href="/cgi-bin/koha/cataloguing/addbiblio.pl?frameworkcode=FA">Fast cataloging</a></li>
             [% END %][% END %]
             [% IF Koha.Preference('AllowCheckoutNotes') && CAN_user_circulate_manage_checkout_notes %]
-                <li><a href="/cgi-bin/koha/circ/checkout-notes.pl">Checkout notes</a> [% IF pending_checkout_notes.count %]<span class="number_box"><a href="/cgi-bin/koha/circ/checkout-notes.pl">[% pending_checkout_notes.count | html %]</span>[% END %]</li>
+                <li><a href="/cgi-bin/koha/circ/checkout-notes.pl">Checkout notes</a> [% IF pending_checkout_notes.count %]<span class="number_box"><a href="/cgi-bin/koha/circ/checkout-notes.pl">[% pending_checkout_notes.count | html %]</a></span>[% END %]</li>
             [% END %]
         </ul>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/checkout-notes.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/checkout-notes.tt
index dbad745f75..ce37428748 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/checkout-notes.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/checkout-notes.tt
@@ -20,10 +20,17 @@
     Checkout notes
 </div>
 
-[% IF Koha.Preference('CircSidebar') %]<div id="doc3" class="yui-t2">[% ELSE %]<div id="doc" class="yui-t7">[% END %]
-    <div id="bd">
-        <div id="yui-main">
-        [% IF Koha.Preference('CircSidebar') %]<div class="yui-b">[% END %]
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-12">
+            <main>
+                <div class="row">
+
+                [% IF Koha.Preference('CircSidebar') %]
+                    <div class="col-sm-10 col-sm-push-2">
+                [% ELSE %]
+                    <div class="col-md-12 col-lg-10 col-lg-offset-1">
+                [% END %]
 
             <h1>Checkout notes</h1>
 
@@ -42,30 +49,29 @@
             [% END %]
 
             [% IF ( notes.count ) %]
-                <fieldset class="action" style="cursor:pointer;">
-                    <a class="SelectAll"><i class="fa fa-check"></i> Select all</a>
-                    | <a class="ClearAll"><i class="fa fa-remove"></i> Clear all</a>
-                    | <a class="HideSeen"><i class="fa fa-minus-square"></i> Hide seen</a>
-                    | <a class="ShowAll"><i class="fa fa-bars"></i> Show all</a>
-                </fieldset>
-
                 <form id="mark_selected" method="post" action="/cgi-bin/koha/circ/checkout-notes.pl">
-
-                    <fieldset class="action">
+                    <div id="toolbar" class="btn-toolbar">
                         <button type="submit" class="btn btn-default btn-sm" name="mark_selected-seen" value="seen" disabled="disabled"><i class="fa fa-eye"></i> Mark seen</button>
                         <button type="submit" class="btn btn-default btn-sm" name="mark_selected-notseen" value="notseen" disabled="disabled"><i class="fa fa-eye-slash"></i> Mark not seen</button>
+                    </div>
+
+                    <fieldset class="action" style="cursor:pointer;">
+                        <a class="SelectAll"><i class="fa fa-check"></i> Select all</a>
+                        | <a class="ClearAll"><i class="fa fa-remove"></i> Clear all</a>
+                        | <a class="HideSeen"><i class="fa fa-minus-square"></i> Hide seen</a>
+                        | <a class="ShowAll"><i class="fa fa-bars"></i> Show all</a>
                     </fieldset>
 
                     <table id="notestable">
                         <thead>
                             <tr>
-                                <th>&nbsp;</th>
-                                <th>Title</th>
+                                <th class="NoSort">&nbsp;</th>
+                                <th class="anti-the">Title</th>
                                 <th>Note</th>
                                 <th class="title-string">Date</th>
                                 <th>Set by</th>
                                 <th>Status</th>
-                                <th>Actions</th>
+                                <th class="NoSort">Actions</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -98,21 +104,24 @@
                 </form>
 
             [% ELSE %]
-                <span>There are currently no checkout notes.</span>
+                <div class="dialog message">There are currently no checkout notes.</div>
             [% END %] <!-- notes -->
 
-        </div> <!-- yui-main -->
+                    [% IF Koha.Preference('CircSidebar') %]
+                        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+                        <div class="col-sm-2 col-sm-pull-10">
+                            <aside>
+                                [% INCLUDE 'circ-nav.inc' %]
+                            </aside>
+                        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+                    [% ELSE %]
+                        </div> <!-- .col-md-12.col-lg-10.col-lg-offset-1 -->
+                    [% END %]
 
-        [% IF Koha.Preference('CircSidebar') %]
-        </div>
-
-        <div class="yui-b noprint">
-            [% INCLUDE 'circ-nav.inc' %]
-        </div>
-        [% END %]
-
-    </div> <!-- bd -->
-</div> <!-- doc3 -->
+                </div> <!-- /.row -->
+            </main>
+        </div> <!-- /.col-sm-12 -->
+    </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% Asset.js("lib/jquery/plugins/jquery.checkboxes.min.js") | $raw %]
@@ -121,11 +130,13 @@
     <script>
         $(document).ready(function(){
             $("#notestable").dataTable($.extend(true, {}, dataTablesDefaults, {
+                "order": [[ 1, "asc" ]],
                 "aoColumnDefs": [
-                    { "aTargets": [ 0, -1 ], "bSearchable": false, "bSortable": false },
-                    { "sType": "title-string", "aTargets" : [ "title-string" ] },
+                    { "orderable": false, "searchable": false, 'targets': [ 'NoSort' ] },
+                    { "type": "title-string", "targets" : [ "title-string" ] },
+                    { "type": "anti-the", "targets": [ "anti-the" ] }
                 ],
-                "sPaginationType": "four_button"
+                "pagingType": "four_button"
             }));
 
             $(".SelectAll").on("click", function(){