diff --git a/Koha/Template/Plugin/Branches.pm b/Koha/Template/Plugin/Branches.pm
index 981c5b413d..693c088fe2 100644
--- a/Koha/Template/Plugin/Branches.pm
+++ b/Koha/Template/Plugin/Branches.pm
@@ -153,4 +153,26 @@ sub pickup_locations {
     return \@libraries;
 }
 
+sub GetBranchSpecificJS {
+    my ($self, $branchcode) = @_;
+
+    return q{} unless defined $branchcode;
+
+    my $library = Koha::Libraries->find($branchcode);
+    my $userjs = $library ? $library->userjs : q{};
+
+    return $userjs
+}
+
+sub GetBranchSpecificCSS {
+    my ($self, $branchcode) = @_;
+
+    return q{} unless defined $branchcode;
+
+    my $library = Koha::Libraries->find($branchcode);
+    my $usercss = $library ? $library->usercss : q{};
+
+    return $usercss
+}
+
 1;
diff --git a/admin/branches.pl b/admin/branches.pl
index 112ca421d3..2ee0a71760 100755
--- a/admin/branches.pl
+++ b/admin/branches.pl
@@ -81,6 +81,8 @@ if ( $op eq 'add_form' ) {
       marcorgcode
       pickup_location
       public
+      userjs
+      usercss
     );
     my $is_a_modif = $input->param('is_a_modif');
 
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
index 9f4b1e09e2..8020c7aaa1 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt
@@ -23,6 +23,8 @@
     [% t("Koha") | html %]
 [% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
+[% Asset.css("lib/codemirror/codemirror.min.css") | $raw %]
+[% Asset.css("lib/codemirror/lint.min.css") | $raw %]
 </head>
 
 <body id="admin_branches" class="admin">
@@ -286,6 +288,23 @@
                     </select>
                     <div class="hint">Set to 'yes' to show this library as a search option and on the libraries page in the OPAC.</div>
                 </li>
+                <li>
+                    <label for="UserJS">UserJS: </label>
+                    <div style="display:flex; flex-direction:column;">
+                        <a class="expand-textarea" id="expand_userjs" data-target="userjs" data-syntax="javascript" href="#">Click to edit</a>
+                        <textarea style="display:none" name="userjs" id="userjs" class="codemirror" rows="10" cols="40">[% library.userjs %]</textarea>
+                        <a class="collapse-textarea" id="collapse_userjs" data-target="userjs" data-syntax="javascript" style="display:none" href="#">Click to collapse</br></a>
+                    </div>
+                </li>
+                <li>
+                    <label for="UserCSS">UserCSS: </label>
+                    <div style="display:flex; flex-direction:column;">
+                        <a class="expand-textarea" id="expand_usercss" data-target="usercss" data-syntax="css" href="#">Click to edit</a>
+                        <textarea style="display:none" name="usercss" id="usercss" class="" rows="10" cols="40">[% library.usercss %]</textarea>
+                        <a class="collapse-textarea" id="collapse_usercss" data-target="usercss" data-syntax="css" style="display:none" href="#">Click to collapse</br></a>
+                    </div>
+                </li>
+                </li>
             </ol>
         </fieldset>
         <fieldset class="action">
@@ -486,7 +505,30 @@
     [% INCLUDE 'datatables.inc' %]
     [% INCLUDE 'columns_settings.inc' %]
     [% Asset.js("lib/tiny_mce/tinymce.min.js") | $raw %]
+    [% Asset.js( "lib/codemirror/codemirror.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/css.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/javascript.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/xml.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/yaml.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/lint.min.js" ) | $raw %]
+    [% Asset.js( "lib/linters/jshint.min.js" ) | $raw %]
+    [% Asset.js( "lib/linters/htmlhint.min.js" ) | $raw %]
+    [% Asset.js( "lib/linters/csslint.min.js" ) | $raw %]
+    [% Asset.js( "lib/linters/js-yaml.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/html-lint.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/javascript-lint.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/css-lint.min.js" ) | $raw %]
+    [% Asset.js( "lib/codemirror/yaml-lint.min.js" ) | $raw %]
+    [% Asset.css("lib/codemirror/codemirror.css") | $raw %]
     [% INCLUDE 'str/tinymce_i18n.inc' %]
+    <style>
+        .CodeMirror {
+            border: 1px solid #EEE;
+            margin: 1em, 1em, 1em, 0;
+            resize: vertical;
+            width: 50em;
+        }
+    </style>
     <script>
         var table_settings = [% TablesSettings.GetTableSettings( 'admin', 'libraries', 'libraries', 'json' ) | $raw %];
         var saved_table = localStorage.getItem("DataTables_libraries_/cgi-bin/koha/admin/branches.pl");
@@ -685,17 +727,40 @@
             [% END %]
         });
 
-        tinyMCE.init({
-            branding : false,
-            relative_urls : false,
-            content_css : "[% interface | html %]/[% theme | html %]/css/tinymce.css",
-            menubar : "file edit view insert format tools table",
-            mode : "specific_textareas",
-            plugins : "autoresize table hr link image charmap lists code emoticons",
-            toolbar : [
-                "formatselect | bold italic | cut copy paste | alignleft aligncenter alignright | outdent indent | image link unlink anchor cleanup hr",
-                "table | bullist numlist | undo redo | removeformat | emoticons charmap | forecolor backcolor | code"
-            ],
+        $( ".expand-textarea" ).on("click", function(e){
+            e.preventDefault();
+            $(this).hide();
+            var target = $(this).data("target");
+            var syntax = $(this).data("syntax");
+            $("#collapse_" + target ).show();
+            if( syntax ){
+                var editor = CodeMirror.fromTextArea( document.getElementById( target ), {
+                    lineNumbers: true,
+                    mode: syntax,
+                    lineWrapping: true,
+                    viewportMargin: Infinity,
+                    gutters: ["CodeMirror-lint-markers"],
+                    lint: true
+                });
+                editor.on("blur", function(){
+                    editor.save();
+                });
+            } else {
+                $( target ).show();
+            }
+        });
+
+        $( ".collapse-textarea" ).on("click", function(e){
+            e.preventDefault();
+            $(this).hide();
+            var target = $(this).data("target");
+            var syntax = $(this).data("syntax");
+            $("#expand_" + target ).show();
+            if( syntax ){
+                var editor = $( "#" + target ).next(".CodeMirror")[0].CodeMirror;
+                editor.toTextArea();
+            }
+            $( "#" + target ).hide();
         });
     </script>
 [% END %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
index 7787c62f94..3183783fe1 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/doc-head-close.inc
@@ -44,6 +44,11 @@
 [% IF ( Koha.Preference('OPACUserCSS') ) %]
     <style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>
 [% END %]
+[% IF Branches.GetBranchSpecificCSS( Branches.GetLoggedInBranchcode() || default_branch) %]
+    <style>
+        [% Branches.GetBranchSpecificCSS( Branches.GetLoggedInBranchcode() || default_branch) | $raw %]
+    </style>
+[% END %]
 [% IF SCO_login %]
     [% SET SCOUserCSS = Koha.Preference('SCOUserCSS') %]
     [% IF SCOUserCSS %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
index e37086e24e..c7ff522e02 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
@@ -1,5 +1,6 @@
 [% USE raw %]
 [% USE Koha %]
+[% USE Branches %]
 [% USE AdditionalContents %]
 [%- USE KohaPlugins -%]
 [% USE Asset %]
@@ -239,6 +240,11 @@ $(document).ready(function() {
         [% Koha.Preference('OPACUserJS') | $raw %]
     </script>
 [% END %]
+[% IF Branches.GetBranchSpecificJS( Branches.GetLoggedInBranchcode() || default_branch) %]
+    <script>
+        [% Branches.GetBranchSpecificJS( Branches.GetLoggedInBranchcode() || default_branch) | $raw %]
+    </script>
+[% END %]
 [% IF SCO_login %]
     [% SET SCOUserJS = Koha.Preference('SCOUserJS') %]
     [% IF ( SCOUserJS ) %]