diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index e3da57cb3..1a0db6751 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -206,6 +206,14 @@ table .bg-dark-danger a { color: #fff; }
   box-shadow: 0 5px 8px -6px #777;
 }
 
+.container-fluid .book .cover span .img,
+.container-fluid .book .cover span img.bs5-cover-image {
+  height: 225px;
+  width: auto;
+  object-fit: cover;
+  display: block;
+}
+
 .container-fluid .book .meta { margin-top: 10px; }
 .media-body p { text-align: justify; }
 .container-fluid .book .meta p { margin: 0; }
@@ -260,6 +268,22 @@ table .bg-dark-danger a { color: #fff; }
   filter: grayscale(100%) brightness(45%);
 }
 
+.config-accordion .accordion-button .bi-plus-lg::before {
+  content: "\f4fe";
+}
+
+.config-accordion .accordion-button:not(.collapsed) .bi-plus-lg::before {
+  content: "\f2ea";
+}
+
+.config-accordion .accordion-button .bi-plus-lg {
+  font-size: 1.2rem;
+  line-height: 1;
+  width: 1.2rem;
+  display: inline-block;
+  text-align: center;
+}
+
 .config-accordion .accordion-body {
   padding: 1rem 1.25rem;
   background-color: #f5f5f5;
diff --git a/cps/static/js/main.js b/cps/static/js/main.js
index a6337f121..f7e366dea 100644
--- a/cps/static/js/main.js
+++ b/cps/static/js/main.js
@@ -450,7 +450,7 @@ $(function() {
                 }
                 data.files.forEach(function(entry) {
                     if(entry.type === "dir") {
-                        var type = "<span class=\"glyphicon glyphicon-folder-close\"></span>";
+                        var type = "<span class=\"bi bi-folder\"></span>";
                 } else {
                     var type = "";
                 }
diff --git a/cps/templates/image.html b/cps/templates/image.html
index 62820b7ff..1bcf75a4e 100644
--- a/cps/templates/image.html
+++ b/cps/templates/image.html
@@ -3,6 +3,7 @@
     {%- set image_alt = alt if alt else image_title -%}
     {% set srcset = book|get_cover_srcset %}
     <img
+        class="img-fluid rounded shadow-sm bs5-cover-image"
         srcset="{{ srcset }}"
         src="{{ url_for('web.get_cover', book_id=book.id, resolution='og', c=book|last_modified) }}"
         alt="{{ image_alt }}"
@@ -11,12 +12,14 @@
 {%- endmacro %}
 
 {% macro series(series, alt=None) -%}
+    {%- set image_title = series.name if series.name else series.title -%}
     {%- set image_alt = alt if alt else image_title -%}
     {% set srcset = series|get_series_srcset %}
     <img
+        class="img-fluid rounded shadow-sm bs5-cover-image"
         srcset="{{ srcset }}"
         src="{{ url_for('web.get_series_cover', series_id=series.id, resolution='og', c='day'|cache_timestamp) }}"
-        alt="{{ title }}"
+        alt="{{ image_alt }}"
         loading="lazy"
     />
 {%- endmacro %}
diff --git a/cps/themes/standard/templates/config_edit.html b/cps/themes/standard/templates/config_edit.html
index a90788108..21dd18f31 100644
--- a/cps/themes/standard/templates/config_edit.html
+++ b/cps/themes/standard/templates/config_edit.html
@@ -17,7 +17,7 @@
         {{_('Server Configuration')}}
       </button>
     </h2>
-    <div id="collapseone" class="accordion-collapse collapse show" data-bs-parent="#configAccordion">
+    <div id="collapseone" class="accordion-collapse collapse" data-bs-parent="#configAccordion">
       <div class="accordion-body">
         <div class="form-group">
           <label for="config_port">{{_('Server Port')}}</label>
@@ -406,7 +406,7 @@
     </div>
   </div>
     {% endif %}
-    <div class="col-12">
+    <div class="col-12 mt-3">
       <button type="button" name="submit" id="config_submit" class="btn btn-primary">{{_('Save')}}</button>
       <a href="{{ url_for('admin.admin') }}" id="config_back" class="btn btn-outline-secondary">{{_('Cancel')}}</a>
     </div>
diff --git a/cps/themes/standard/templates/config_view_edit.html b/cps/themes/standard/templates/config_view_edit.html
index 759a9d35e..f7f03546c 100644
--- a/cps/themes/standard/templates/config_view_edit.html
+++ b/cps/themes/standard/templates/config_view_edit.html
@@ -16,7 +16,7 @@
         {{_('View Configuration')}}
       </button>
     </h2>
-    <div id="collapsefour" class="accordion-collapse collapse show" data-bs-parent="#configAccordion">
+    <div id="collapsefour" class="accordion-collapse collapse" data-bs-parent="#configAccordion">
       <div class="accordion-body">
         <div class="form-group">
           <label for="config_calibre_web_title">{{_('Title')}}</label>
@@ -165,7 +165,7 @@
     </div>
   </div>
 </div>
-    <div class="col-12">
+    <div class="col-12 mt-3">
     <button type="submit" name="submit" class="btn btn-primary">{{_('Save')}}</button>
     <a href="{{ url_for('admin.admin') }}" class="btn btn-outline-secondary">{{_('Cancel')}}</a>
     </div>
diff --git a/cps/themes/standard/templates/grid.html b/cps/themes/standard/templates/grid.html
index 216bc0c44..2236afaf6 100644
--- a/cps/themes/standard/templates/grid.html
+++ b/cps/themes/standard/templates/grid.html
@@ -2,41 +2,41 @@
 {% extends theme("layout.html") %}
 {% block body %}
 <div class="discover">
-<h1 class="{{page}}">{{_(title)}}</h1>
+<h1 class="{{page}} h2 mb-3">{{_(title)}}</h1>
 
-    <div class="filterheader hidden-xs">
+    <div class="filterheader d-none d-md-block mb-3">
       {% if entries.__len__() and data == 'author' %}
-        <div id="sort_name" class="btn btn-primary"><b>B,A <-> A B</b></div>
+        <div id="sort_name" class="btn btn-primary btn-sm"><b>B,A <-> A B</b></div>
       {% endif %}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      <div id="asc" data-id="series" data-order="{{ order }}" class="btn btn-primary{% if order == 1 %} active{% endif%}"><span class="glyphicon glyphicon-sort-by-alphabet"></span></div>
-      <div id="desc" data-id="series" class="btn btn-primary{% if order == 0 %} active{% endif%}"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></div>
+      <div id="asc" data-id="series" data-order="{{ order }}" class="btn btn-primary btn-sm{% if order == 1 %} active{% endif%}"><i class="bi bi-sort-alpha-down"></i></div>
+      <div id="desc" data-id="series" class="btn btn-primary btn-sm{% if order == 0 %} active{% endif%}"><i class="bi bi-sort-alpha-down-alt"></i></div>
       {% if charlist|length %}
-      <div id="all" class="active btn btn-primary {% if charlist|length > 9 %}hidden-sm{% endif %}">{{_('All')}}</div>
+      <div id="all" class="active btn btn-primary btn-sm {% if charlist|length > 9 %}d-none d-md-inline-block{% endif %}">{{_('All')}}</div>
       {% endif %}
-      <div class="btn-group character {% if charlist|length > 9 %}hidden-sm{% endif %}" role="group">
+      <div class="btn-group character {% if charlist|length > 9 %}d-none d-md-inline-flex{% endif %}" role="group">
         {% for char in charlist%}
-        <div class="btn btn-primary char">{{char.char}}</div>
+        <div class="btn btn-primary btn-sm char">{{char.char}}</div>
         {% endfor %}
       </div>
-        <div class="update-view btn btn-primary" data-target="series_view" id="list-button" data-view="list">{{_('List')}}</div>
+        <div class="update-view btn btn-primary btn-sm" data-target="series_view" id="list-button" data-view="list">{{_('List')}}</div>
     </div>
 
     {% if entries[0] %}
-        <div id="list" class="row display-flex">
+        <div id="list" class="row row-cols-2 row-cols-sm-3 row-cols-lg-6 g-3">
           {% for entry in entries %}
-              <div class="col-sm-3 col-lg-2 col-xs-6 book sortable" {% if entry[0].sort %}data-name="{{entry[0].series[0].name}}"{% endif %} data-id="{% if entry[0].series[0].name %}{{entry[0].series[0].name}}{% endif %}">
-                  <div class="cover">
+              <div class="col book sortable" {% if entry[0].sort %}data-name="{{entry[0].series[0].name}}"{% endif %} data-id="{% if entry[0].series[0].name %}{{entry[0].series[0].name}}{% endif %}">
+                  <div class="cover mb-2">
                       <a href="{{url_for('web.books_list', data=data, sort_param='stored', book_id=entry[0].series[0].id )}}">
-                          <span class="img" title="{{entry[0].series[0].name}}">
+                          <span class="img d-block position-relative" title="{{entry[0].series[0].name}}">
                               {{ image.book_cover(entry[0])}}
-                              <span class="badge">{{entry.count}}</span>
+                              <span class="badge bg-secondary rounded-pill position-absolute top-0 end-0 m-2">{{entry.count}}</span>
                             </span>
                       </a>
                   </div>
                   <div class="meta">
                       <a href="{{url_for('web.books_list', data=data, sort_param='stored', book_id=entry[0].series[0].id )}}">
-                          <p title="{{entry[0].series[0].name|shortentitle}}" class="title">{{entry[0].series[0].name|shortentitle}}</p>
+                          <p title="{{entry[0].series[0].name|shortentitle}}" class="title mb-0">{{entry[0].series[0].name|shortentitle}}</p>
                       </a>
                   </div>
               </div>
diff --git a/cps/themes/standard/templates/index.html b/cps/themes/standard/templates/index.html
index 1d099a311..6e0ea9194 100644
--- a/cps/themes/standard/templates/index.html
+++ b/cps/themes/standard/templates/index.html
@@ -2,29 +2,29 @@
 {% extends theme("layout.html") %}
 {% block body %}
 {% if current_user.show_detail_random() and page != "discover" %}
-<div class="discover random-books">
-  <h2 class="random-books">{{_('Discover (Random Books)')}}</h2>
-  <div class="row display-flex">
+<div class="discover random-books mb-4">
+  <h2 class="random-books h4 mb-3">{{_('Discover (Random Books)')}}</h2>
+  <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-6 g-3">
    {% for entry in random %}
-    <div class="col-sm-3 col-lg-2 col-xs-6 book session" id="books_rand">
-      <div class="cover">
-          <a href="{{ url_for('web.show_book', book_id=entry.Books.id) }}" {% if simple==false %}data-toggle="modal" data-target="#bookDetailsModal" data-remote="false"{% endif %}>
-              <span class="img" title="{{ entry.Books.title }}">
+    <div class="col book session" id="books_rand">
+      <div class="cover mb-2">
+          <a href="{{ url_for('web.show_book', book_id=entry.Books.id) }}" {% if simple==false %}data-bs-toggle="modal" data-bs-target="#bookDetailsModal" data-remote="false"{% endif %}>
+              <span class="img d-block position-relative" title="{{ entry.Books.title }}">
                 {{ image.book_cover(entry.Books) }}
-                {% if entry[2] == True %}<span class="badge read glyphicon glyphicon-ok"></span>{% endif %}
+                {% if entry[2] == True %}<span class="badge bg-success rounded-pill position-absolute top-0 end-0 m-2"><i class="bi bi-check-lg"></i></span>{% endif %}
               </span>
           </a>
       </div>
       <div class="meta">
-        <a href="{{ url_for('web.show_book', book_id=entry.Books.id) }}" {% if simple==false %}data-toggle="modal" data-target="#bookDetailsModal" data-remote="false"{% endif %}>
-          <p title="{{entry.Books.title}}" class="title">{{entry.Books.title|shortentitle}}</p>
+        <a href="{{ url_for('web.show_book', book_id=entry.Books.id) }}" {% if simple==false %}data-bs-toggle="modal" data-bs-target="#bookDetailsModal" data-remote="false"{% endif %}>
+          <p title="{{entry.Books.title}}" class="title mb-1">{{entry.Books.title|shortentitle}}</p>
         </a>
-        <p class="author">
+        <p class="author mb-1">
           {% for author in entry.Books.authors %}
             {% if loop.index > g.config_authors_max and g.config_authors_max != 0 %}
               {% if not loop.first %}
                 <span class="author-hidden-divider">&amp;</span>
-			  {% endif %}
+              {% endif %}
               <a class="author-name author-hidden" href="{{url_for('web.books_list', data='author', sort_param='stored', book_id=author.id) }}">{{author.name.replace('|',',')|shortentitle(30)}}</a>
               {% if loop.last %}
                 <a href="#" class="author-expand" data-authors-max="{{g.config_authors_max}}" data-collapse-caption="({{_('reduce')}})">(...)</a>
@@ -38,7 +38,7 @@
           {% endfor %}
         </p>
         {% if entry.Books.series.__len__() > 0 %}
-        <p class="series">
+        <p class="series mb-1">
           <a href="{{url_for('web.books_list', data='series', sort_param='stored', book_id=entry.Books.series[0].id )}}">
             {{entry.Books.series[0].name}}
           </a>
@@ -46,12 +46,12 @@
         </p>
         {% endif %}
         {% if entry.Books.ratings.__len__() > 0 %}
-        <div class="rating">
+        <div class="rating text-warning small">
           {% for number in range((entry.Books.ratings[0].rating/2)|int(2)) %}
-            <span class="glyphicon glyphicon-star good"></span>
+            <i class="bi bi-star-fill"></i>
             {% if loop.last and loop.index < 5 %}
               {% for numer in range(5 - loop.index) %}
-                <span class="glyphicon glyphicon-star-empty"></span>
+                <i class="bi bi-star"></i>
               {% endfor %}
             {% endif %}
           {% endfor %}
@@ -64,50 +64,50 @@
 </div>
 {% endif %}
 <div class="discover load-more">
-  <h2 class="{{title}}">{{title}}</h2>
+  <h2 class="{{title}} h3 mb-3">{{title}}</h2>
    {% if page != 'discover' %}
-    <div class="filterheader hidden-xs">
+    <div class="filterheader d-none d-md-block mb-3">
     {% if page == 'hot' %}
-      <a data-toggle="tooltip" title="{{_('Sort ascending according to download count')}}" id="hot_asc" class="btn btn-primary{% if order == "hotasc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='hotasc')}}"><span class="glyphicon glyphicon-sort-by-order"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort descending according to download count')}}" id="hot_desc" class="btn btn-primary{% if order == "hotdesc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='hotdesc')}}"><span class="glyphicon glyphicon-sort-by-order-alt"></span></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort ascending according to download count')}}" id="hot_asc" class="btn btn-primary btn-sm{% if order == "hotasc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='hotasc')}}"><i class="bi bi-sort-down"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort descending according to download count')}}" id="hot_desc" class="btn btn-primary btn-sm{% if order == "hotdesc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='hotdesc')}}"><i class="bi bi-sort-down-alt"></i></a>
     {% else %}
-      <a data-toggle="tooltip" title="{{_('Sort according to book date, newest first')}}" id="new" class="btn btn-primary{% if order == "new" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='new')}}"><span class="glyphicon glyphicon-book"></span> <span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-sort-by-order"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort according to book date, oldest first')}}" id="old" class="btn btn-primary{% if order == "old" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='old')}}"><span class="glyphicon glyphicon-book"></span> <span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-sort-by-order-alt"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort title in alphabetical order')}}" id="asc" class="btn btn-primary{% if order == "abc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='abc')}}"><span class="glyphicon glyphicon-font"></span><span class="glyphicon glyphicon-sort-by-alphabet"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort title in reverse alphabetical order')}}" id="desc" class="btn btn-primary{% if order == "zyx" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='zyx')}}"><span class="glyphicon glyphicon-font"></span><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort authors in alphabetical order')}}" id="auth_az" class="btn btn-primary{% if order == "authaz" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='authaz')}}"><span class="glyphicon glyphicon-user"></span><span class="glyphicon glyphicon-sort-by-alphabet"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort authors in reverse alphabetical order')}}" id="auth_za" class="btn btn-primary{% if order == "authza" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='authza')}}"><span class="glyphicon glyphicon-user"></span><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort according to publishing date, newest first')}}" id="pub_new" class="btn btn-primary{% if order == "pubnew" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='pubnew')}}"><span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-sort-by-order"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort according to publishing date, oldest first')}}" id="pub_old" class="btn btn-primary{% if order == "pubold" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='pubold')}}"><span class="glyphicon glyphicon-calendar"></span><span class="glyphicon glyphicon-sort-by-order-alt"></span></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort according to book date, newest first')}}" id="new" class="btn btn-primary btn-sm{% if order == "new" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='new')}}"><i class="bi bi-book"></i> <i class="bi bi-calendar3"></i> <i class="bi bi-sort-down"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort according to book date, oldest first')}}" id="old" class="btn btn-primary btn-sm{% if order == "old" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='old')}}"><i class="bi bi-book"></i> <i class="bi bi-calendar3"></i> <i class="bi bi-sort-down-alt"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort title in alphabetical order')}}" id="asc" class="btn btn-primary btn-sm{% if order == "abc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='abc')}}"><i class="bi bi-fonts"></i> <i class="bi bi-sort-alpha-down"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort title in reverse alphabetical order')}}" id="desc" class="btn btn-primary btn-sm{% if order == "zyx" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='zyx')}}"><i class="bi bi-fonts"></i> <i class="bi bi-sort-alpha-down-alt"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort authors in alphabetical order')}}" id="auth_az" class="btn btn-primary btn-sm{% if order == "authaz" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='authaz')}}"><i class="bi bi-person"></i> <i class="bi bi-sort-alpha-down"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort authors in reverse alphabetical order')}}" id="auth_za" class="btn btn-primary btn-sm{% if order == "authza" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='authza')}}"><i class="bi bi-person"></i> <i class="bi bi-sort-alpha-down-alt"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort according to publishing date, newest first')}}" id="pub_new" class="btn btn-primary btn-sm{% if order == "pubnew" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='pubnew')}}"><i class="bi bi-calendar3"></i> <i class="bi bi-sort-down"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort according to publishing date, oldest first')}}" id="pub_old" class="btn btn-primary btn-sm{% if order == "pubold" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='pubold')}}"><i class="bi bi-calendar3"></i> <i class="bi bi-sort-down-alt"></i></a>
       {% if page == 'series' %}
-      <a data-toggle="tooltip" title="{{_('Sort ascending according to series index')}}" id="series_asc" class="btn btn-primary{% if order == "seriesasc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='seriesasc')}}"><span class="glyphicon glyphicon-sort-by-order"></span></a>
-      <a data-toggle="tooltip" title="{{_('Sort descending according to series index')}}" id="series_desc" class="btn btn-primary{% if order == "seriesdesc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='seriesdesc')}}"><span class="glyphicon glyphicon-sort-by-order-alt"></span></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort ascending according to series index')}}" id="series_asc" class="btn btn-primary btn-sm{% if order == "seriesasc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='seriesasc')}}"><i class="bi bi-sort-down"></i></a>
+      <a data-bs-toggle="tooltip" title="{{_('Sort descending according to series index')}}" id="series_desc" class="btn btn-primary btn-sm{% if order == "seriesdesc" %} active{% endif%}" href="{{url_for('web.books_list', data=page, book_id=id, sort_param='seriesdesc')}}"><i class="bi bi-sort-down-alt"></i></a>
       {% endif %}
     {% endif %}
     </div>
    {% endif %}
-  <div class="row display-flex">
+  <div class="row row-cols-2 row-cols-sm-3 row-cols-lg-6 g-3">
     {% if entries[0] %}
     {% for entry in entries %}
-    <div class="col-sm-3 col-lg-2 col-xs-6 book session" id="books">
-      <div class="cover">
-          <a href="{{ url_for('web.show_book', book_id=entry.Books.id) }}" {% if simple==false %}data-toggle="modal" data-target="#bookDetailsModal" data-remote="false"{% endif %}>
-            <span class="img" title="{{ entry.Books.title }}">
+    <div class="col book session" id="books">
+      <div class="cover mb-2">
+          <a href="{{ url_for('web.show_book', book_id=entry.Books.id) }}" {% if simple==false %}data-bs-toggle="modal" data-bs-target="#bookDetailsModal" data-remote="false"{% endif %}>
+            <span class="img d-block position-relative" title="{{ entry.Books.title }}">
               {{ image.book_cover(entry.Books) }}
-              {% if entry[2] == True %}<span class="badge read glyphicon glyphicon-ok"></span>{% endif %}
+              {% if entry[2] == True %}<span class="badge bg-success rounded-pill position-absolute top-0 end-0 m-2"><i class="bi bi-check-lg"></i></span>{% endif %}
             </span>
           </a>
       </div>
       <div class="meta">
-        <a href="{{ url_for('web.show_book', book_id=entry.Books.id) }}" {% if simple==false %}data-toggle="modal" data-target="#bookDetailsModal" data-remote="false"{% endif %}>
-          <p title="{{ entry.Books.title }}" class="title">{{entry.Books.title|shortentitle}}</p>
+        <a href="{{ url_for('web.show_book', book_id=entry.Books.id) }}" {% if simple==false %}data-bs-toggle="modal" data-bs-target="#bookDetailsModal" data-remote="false"{% endif %}>
+          <p title="{{ entry.Books.title }}" class="title mb-1">{{entry.Books.title|shortentitle}}</p>
         </a>
-        <p class="author">
+        <p class="author mb-1">
           {% for author in entry.Books.authors %}
             {% if loop.index > g.config_authors_max and g.config_authors_max != 0 %}
               {% if not loop.first %}
                 <span class="author-hidden-divider">&amp;</span>
-			  {% endif %}
+              {% endif %}
               <a class="author-name author-hidden" href="{{url_for('web.books_list', data='author', book_id=author.id, sort_param='stored') }}">{{author.name.replace('|',',')|shortentitle(30)}}</a>
               {% if loop.last %}
                 <a href="#" class="author-expand" data-authors-max="{{g.config_authors_max}}" data-collapse-caption="({{_('reduce')}})">(...)</a>
@@ -120,11 +120,11 @@
             {% endif %}
           {% endfor %}
           {% if entry.Books.data|music %}
-            <span class="glyphicon glyphicon-music"></span>
+            <i class="bi bi-music-note-beamed"></i>
           {% endif %}
         </p>
         {% if entry.Books.series.__len__() > 0 %}
-        <p class="series">
+        <p class="series mb-1">
         {% if page != "series" %}
           <a href="{{url_for('web.books_list', data='series', sort_param='stored', book_id=entry.Books.series[0].id )}}">
             {{entry.Books.series[0].name}}
@@ -136,12 +136,12 @@
         </p>
         {% endif %}
         {% if entry.Books.ratings.__len__() > 0 %}
-        <div class="rating">
+        <div class="rating text-warning small">
           {% for number in range((entry.Books.ratings[0].rating/2)|int(2)) %}
-            <span class="glyphicon glyphicon-star good"></span>
+            <i class="bi bi-star-fill"></i>
             {% if loop.last and loop.index < 5 %}
               {% for numer in range(5 - loop.index) %}
-                <span class="glyphicon glyphicon-star-empty"></span>
+                <i class="bi bi-star"></i>
               {% endfor %}
             {% endif %}
           {% endfor %}
diff --git a/cps/themes/standard/templates/layout.html b/cps/themes/standard/templates/layout.html
index 3eb3ab558..5195aa619 100644
--- a/cps/themes/standard/templates/layout.html
+++ b/cps/themes/standard/templates/layout.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 {% from theme('modal_dialogs.html') import restrict_modal, delete_book, filechooser_modal, delete_confirm_modal, change_confirm_modal %}
 {% import 'image.html' as image %}
-{% set bootstrap5_page = page in ['login', 'admin', 'logfile', 'stat', 'tasks', 'newuser', 'edituser', 'me', 'usertable', 'mailset', 'config', 'uiconfig', 'dbconfig'] %}
+{% set bootstrap5_page = page in ['login', 'admin', 'logfile', 'stat', 'tasks', 'newuser', 'edituser', 'me', 'usertable', 'mailset', 'config', 'uiconfig', 'dbconfig', 'root', 'newest', 'hot', 'download', 'rated', 'read', 'unread', 'discover', 'author', 'publisher', 'series', 'ratings', 'formats', 'category', 'language', 'archived'] %}
 <html lang="{{ current_user.locale }}">
   <head>
     <title>{{instance}} | {{title}}</title>
diff --git a/cps/themes/standard/templates/list.html b/cps/themes/standard/templates/list.html
index 6a766a692..728e5a5eb 100644
--- a/cps/themes/standard/templates/list.html
+++ b/cps/themes/standard/templates/list.html
@@ -1,44 +1,44 @@
 {% extends theme("layout.html") %}
 {% block body %}
-<h1 class="{{page}}">{{_(title)}}</h1>
+<h1 class="{{page}} h2 mb-3">{{_(title)}}</h1>
 
-    <div class="filterheader hidden-xs">
+    <div class="filterheader d-none d-md-block mb-3">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
       {% if entries.__len__() and data == 'author' %}
-        <div id="sort_name" class="btn btn-primary"><b>B,A <-> A B</b></div>
+        <div id="sort_name" class="btn btn-primary btn-sm"><b>B,A <-> A B</b></div>
       {% endif %}
-      <div id="asc" data-order="{{ order }}" data-id="{{ data }}" class="btn btn-primary {% if order == 1 %} active{% endif%}"><span class="glyphicon glyphicon-sort-by-alphabet"></span></div>
-      <div id="desc" data-id="{{ data }}" class="btn btn-primary{% if order == 0 %} active{% endif%}"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></div>
+      <div id="asc" data-order="{{ order }}" data-id="{{ data }}" class="btn btn-primary btn-sm {% if order == 1 %} active{% endif%}"><i class="bi bi-sort-alpha-down"></i></div>
+      <div id="desc" data-id="{{ data }}" class="btn btn-primary btn-sm{% if order == 0 %} active{% endif%}"><i class="bi bi-sort-alpha-down-alt"></i></div>
       {% if charlist|length %}
-      <div id="all" class="active btn btn-primary {% if charlist|length > 9 %}hidden-sm{% endif %}">{{_('All')}}</div>
+      <div id="all" class="active btn btn-primary btn-sm {% if charlist|length > 9 %}d-none d-md-inline-block{% endif %}">{{_('All')}}</div>
       {% endif %}
-      <div class="btn-group character {% if charlist|length > 9 %}hidden-sm{% endif %}" role="group">
+      <div class="btn-group character {% if charlist|length > 9 %}d-none d-md-inline-flex{% endif %}" role="group">
         {% for char in charlist%}
-        <div class="btn btn-primary char">{{char[0]}}</div>
+        <div class="btn btn-primary btn-sm char">{{char[0]}}</div>
         {% endfor %}
       </div>
 
       {% if data == "series" %}
-      <button class="update-view btn btn-primary" data-target="series_view" id="grid-button" data-view="grid">{{_('Grid')}}</button>
+      <button class="update-view btn btn-primary btn-sm" data-target="series_view" id="grid-button" data-view="grid">{{_('Grid')}}</button>
       {% endif %}
     </div>
-  <div class="container1">
-    <div id="list" class="col-xs-12 col-sm-6">
+  <div class="container-fluid px-0">
+    <div id="list" class="row g-3">
     {% for entry in entries %}
       {% if loop.index0 == (loop.length/2+loop.length%2)|int and loop.length > 20 %}
         </div>
-        <div id="second" class="col-xs-12 col-sm-6">
+        <div id="second" class="col-12 col-md-6">
       {% endif %}
-      <div class="row" {% if entry[0].sort %}data-name="{{entry[0].name}}"{% endif %} data-id="{% if entry[0].sort %}{{entry[0].sort}}{% else %}{% if entry[0].format %}{{entry[0].format}}{% else %}{% if entry[0].rating %}{{entry[0].rating}}{% else %}{{entry[0].name}}{% endif %}{% endif %}{% endif %}">
-        <div class="col-xs-2 col-sm-2 col-md-1" align="left"><span class="badge">{{entry[1]}}</span></div>
-        <div class="col-xs-10 col-sm-10 col-md-11"><a id="list_{{loop.index0}}" href="{% if entry.format %}{{url_for('web.books_list', data=data, sort_param='stored', book_id=entry.format )}}{% else %}{{url_for('web.books_list', data=data, sort_param='stored', book_id=entry[0].id )}}{% endif %}">
+      <div class="row g-2" {% if entry[0].sort %}data-name="{{entry[0].name}}"{% endif %} data-id="{% if entry[0].sort %}{{entry[0].sort}}{% else %}{% if entry[0].format %}{{entry[0].format}}{% else %}{% if entry[0].rating %}{{entry[0].rating}}{% else %}{{entry[0].name}}{% endif %}{% endif %}{% endif %}">
+        <div class="col-2 col-md-1 text-start"><span class="badge bg-secondary rounded-pill">{{entry[1]}}</span></div>
+        <div class="col-10 col-md-11"><a id="list_{{loop.index0}}" href="{% if entry.format %}{{url_for('web.books_list', data=data, sort_param='stored', book_id=entry.format )}}{% else %}{{url_for('web.books_list', data=data, sort_param='stored', book_id=entry[0].id )}}{% endif %}">
           {% if entry.name %}
-          <div class="rating">
+          <div class="rating text-warning small">
           {% for number in range(entry.name|int) %}
-            <span class="glyphicon glyphicon-star good"></span>
+            <i class="bi bi-star-fill"></i>
             {% if loop.last and loop.index < 5 %}
               {% for numer in range(5 - loop.index) %}
-                <span class="glyphicon glyphicon-star-empty"></span>
+                <i class="bi bi-star"></i>
               {% endfor %}
             {% endif %}
           {% endfor %}