diff --git a/bower.json b/bower.json
index 005cf29..fb068df 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,9 @@
 {
   "name": "dependencies",
   "dependencies": {
-    "jquery": "2.2.1",
-    "jqueryui": "1.11.4",
-    "bootstrap": "3.3.6",
+    "jquery": "3.7.1",
+    "jqueryui": "1.14.1",
+    "bootstrap": "5.3.3",
     "fullcalendar": "2.8.0"
   }
 }
\ No newline at end of file
diff --git a/docker/scripts/launch_dev_server.sh b/docker/scripts/launch_dev_server.sh
index 2719a3a..6967ffc 100755
--- a/docker/scripts/launch_dev_server.sh
+++ b/docker/scripts/launch_dev_server.sh
@@ -3,6 +3,7 @@
 script_full_path=$(dirname "$0")
 $script_full_path/wait_for.sh postgres 5432
 
+rm -rf /radioco/radioco/apps/radioco/static/bower
 mv -f /tmp_bower /radioco/radioco/apps/radioco/static/bower
 python3 manage.py migrate
 python3 manage.py runserver 0.0.0.0:8000
\ No newline at end of file
diff --git a/radioco/apps/programmes/templates/programmes/episode_detail.html b/radioco/apps/programmes/templates/programmes/episode_detail.html
index ca8c8ca..28517f0 100755
--- a/radioco/apps/programmes/templates/programmes/episode_detail.html
+++ b/radioco/apps/programmes/templates/programmes/episode_detail.html
@@ -8,16 +8,16 @@
 
 {% block page_title %}{{ episode }}{% endblock %}
 
-{% block programmes_class %}class="active"{% endblock %}
+{% block programmes_class %}active{% endblock %}
 
 {% block content %}
     <div class="container mb">
         <div class="row">
-            <div class="col-lg-10 col-lg-offset-1 centered">
+            <div class="col-lg-10 offset-lg-1 centered">
                 <img class="center-block img-responsive" src="{{ programme.photo.url }}" alt="...">
             </div>
 
-            <div class="col-lg-5 col-lg-offset-1 spacing">
+            <div class="col-lg-5 offset-lg-1 spacing">
                 <h4>{{ episode|title }}</h4>
 
                 <p>{% firstof episode.summary|safe episode.programme.synopsis|safe '' %}</p>
@@ -41,7 +41,7 @@ <h4>{% trans "Podcast" %}</h4>
                 </p>
             </div>
 
-            <div class="col-lg-4 col-lg-offset-1 spacing">
+            <div class="col-lg-4 offset-lg-1 spacing">
                 <h4>{% trans 'Programme Details' %}</h4>
                 <div class="hline"></div>
                 <p>
@@ -72,7 +72,7 @@ <h4>{% trans 'Programme Details' %}</h4>
         <! --/row -->
         {% if settings.DISQUS_ENABLE %}
             <div class="row">
-                <div class="col-lg-10 col-lg-offset-1 centered">
+                <div class="col-lg-10 offset-lg-1 centered">
                     {% set_disqus_identifier programme.id|stringformat:"i" %}
                     {% set_disqus_title programme.name %}
                     {% set_disqus_url episode.get_absolute_url %}
diff --git a/radioco/apps/programmes/templates/programmes/programme_detail.html b/radioco/apps/programmes/templates/programmes/programme_detail.html
index 50335dc..8eed8ab 100755
--- a/radioco/apps/programmes/templates/programmes/programme_detail.html
+++ b/radioco/apps/programmes/templates/programmes/programme_detail.html
@@ -8,21 +8,21 @@
 
 {% block page_title %}{{ programme.name }}{% endblock %}
 
-{% block programmes_class %}class="active"{% endblock %}
+{% block programmes_class %}active{% endblock %}
 
 {% block content %}
     <div class="container mb">
         <div class="row">
-            <div class="col-lg-10 col-lg-offset-1 centered">
+            <div class="col-lg-10 offset-lg-1 centered">
                 <img class="center-block img-responsive" src="{{ programme.photo.url }}" alt="...">
             </div>
 
-            <div class="col-lg-5 col-lg-offset-1 spacing">
+            <div class="col-lg-5 offset-lg-1 spacing">
                 <h4>{{ programme.name }}</h4>
                 <p>{{ programme.synopsis|safe }}</p>
             </div>
 
-            <div class="col-lg-4 col-lg-offset-1 spacing">
+            <div class="col-lg-4 offset-lg-1 spacing">
                 <h4>{% trans 'Programme Details' %}</h4>
                 <div class="hline"></div>
                 <p><b>Language:</b> {{ language }}</p>
@@ -38,7 +38,7 @@ <h4>{% trans 'Programme Details' %}</h4>
         </div>
         {% if settings.DISQUS_ENABLE %}
             <div class="row mhb">
-                <div class="col-lg-10 col-lg-offset-1 centered">
+                <div class="col-lg-10 offset-lg-1 centered">
                     {% set_disqus_identifier programme.id|stringformat:"i" %}
                     {% set_disqus_title programme.name %}
                     {% set_disqus_url programme.get_absolute_url %}
diff --git a/radioco/apps/programmes/templates/programmes/programme_list.html b/radioco/apps/programmes/templates/programmes/programme_list.html
index 958fb59..7223961 100755
--- a/radioco/apps/programmes/templates/programmes/programme_list.html
+++ b/radioco/apps/programmes/templates/programmes/programme_list.html
@@ -4,7 +4,7 @@
 
 {% block page_title %}{% trans "Programme list" %}{% endblock %}
 
-{% block programmes_class %}class="active"{% endblock %}
+{% block programmes_class %}active{% endblock %}
 
 {% block content %}
     {% for programme in programme_list %}
diff --git a/radioco/apps/radioco/static/radioco/css/calendar.css b/radioco/apps/radioco/static/radioco/css/calendar.css
index 4e253ba..e7c5814 100755
--- a/radioco/apps/radioco/static/radioco/css/calendar.css
+++ b/radioco/apps/radioco/static/radioco/css/calendar.css
@@ -1,4 +1,4 @@
-#col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main {
+#col-sm-9 offset-sm-3 col-md-10 offset-md-2 main {
 	margin-top: 40px;
 	text-align: center;
 	font-size: 14px;
diff --git a/radioco/apps/radioco/static/radioco/css/style.css b/radioco/apps/radioco/static/radioco/css/style.css
index 606b548..a4a80c0 100755
--- a/radioco/apps/radioco/static/radioco/css/style.css
+++ b/radioco/apps/radioco/static/radioco/css/style.css
@@ -96,17 +96,17 @@ a:focus {
 	font-weight: 900;
 }
 
-.navbar-header .navbar-brand {
+.navbar-light .navbar-brand {
 	color: white;
 }
 
-.navbar-default .navbar-nav > li > a {
+.navbar-light .navbar-nav .nav-link {
 	color: white;
 	font-weight: 700;
 	font-size: 12px;
 }
 
-.navbar-default .navbar-nav > .separator {
+.navbar-light .navbar-nav > .separator {
 	color: white;
 	font-weight: 700;
 	font-size: 12px;
@@ -114,20 +114,33 @@ a:focus {
 	line-height: 20px;
 }
 
-.navbar-default .navbar-nav > li > a:hover {
+.navbar-light .navbar-nav .nav-link:hover {
 	color: #00b3fe;
 }
 
-.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
+.navbar-light .navbar-nav > .active > .nav-link, .navbar-light .navbar-nav > .active > .nav-link:hover, .navbar-light .navbar-nav > .active > .nav-link:focus {
 	color: #00b3fe;
 	background-color: transparent;
 }
 
-.navbar-default {
+.navbar-light {
 	background-color: #384452;
 	border-color: transparent;
 }
 
+.custom-toggler .navbar-toggler-icon {
+	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(136,136,136, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+}
+
+.custom-toggler {
+	border-color: #ddd;
+}
+
+.custom-toggler:focus {
+	box-shadow: initial;
+	background-color: #ddd;
+}
+
 .dropdown-menu {
 	background: #384452;
 }
diff --git a/radioco/apps/radioco/templates/radioco/base.html b/radioco/apps/radioco/templates/radioco/base.html
index 647e698..5e405c0 100755
--- a/radioco/apps/radioco/templates/radioco/base.html
+++ b/radioco/apps/radioco/templates/radioco/base.html
@@ -44,40 +44,36 @@
 <body>
 {% block intro %} {% endblock %}
 
-<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-expand-lg navbar-light fixed-top" role="navigation">
     <div class="container">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                <span class="sr-only">Toggle Navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="{% url 'home' %}">{{ site_config.site_name }}</a>
-        </div>
-
-        <div class="navbar-collapse collapse navbar-right">
-            <ul class="nav navbar-nav">
-                <li {% block index_class %}{% endblock %}>
-                    <a href="{% url 'home' %}">{% trans "home"|title %}</a>
+        <a class="navbar-brand" href="{% url 'home' %}">{{ site_config.site_name }}</a>
+        <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ms-auto">
+                <li class="nav-item {% block index_class %}{% endblock %}">
+                    <a class="nav-link" href="{% url 'home' %}">{% trans "home"|title %}</a>
                 </li>
-                <li {% block schedules_class %}{% endblock %}>
-                    <a href="{% url 'schedules:list' %}">{% trans "schedules"|title %}</a>
+                <li class="nav-item {% block schedules_class %}{% endblock %}">
+                    <a class="nav-link" href="{% url 'schedules:list' %}">{% trans "schedules"|title %}</a>
                 </li>
-                <li {% block programmes_class %}{% endblock %}>
-                    <a href="{% url 'programmes:list' %}">{% trans "programmes"|title %}</a>
+                <li class="nav-item {% block programmes_class %}{% endblock %}">
+                    <a class="nav-link" href="{% url 'programmes:list' %}">{% trans "programmes"|title %}</a>
                 </li>
-                <li {% block users_class %}{% endblock %}>
-                    <a href="{% url 'users:list' %}">{% trans "people"|title %}</a>
+                <li class="nav-item {% block users_class %}{% endblock %}">
+                    <a class="nav-link" href="{% url 'users:list' %}">{% trans "people"|title %}</a>
                 </li>
                 <li class="separator"></li>
-                <li>
-                    <a href="{% url 'admin:index' %}">{% trans "admin area"|title %}</a>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'admin:index' %}">{% trans "admin area"|title %}</a>
                 </li>
             </ul>
         </div>
     </div>
-</div>
+</nav>
+
 
 {% block page_title_wrapper %}
     <div id="blue">
diff --git a/radioco/apps/radioco/templates/radioco/index.html b/radioco/apps/radioco/templates/radioco/index.html
index 33a4dfe..d56e2eb 100755
--- a/radioco/apps/radioco/templates/radioco/index.html
+++ b/radioco/apps/radioco/templates/radioco/index.html
@@ -17,7 +17,7 @@
         <div class="container">
             <div class="row">
                 {% if transmission %}
-                    <div class="col-lg-8 col-lg-offset-2">
+                    <div class="col-lg-8 offset-lg-2">
                         <h1>{% trans "On air"|upper %}</h1>
                         <h3>
                             <a href="{% url 'programmes:detail' transmission.slug %}">
@@ -28,21 +28,21 @@ <h5>
                             <strong>{{ transmission.start|date:"G:i" }} - {{ transmission.end|date:"G:i" }}</strong>
                         </h5>
 
-                        <div class="progress">
-                            <div class="progress-bar progress-bar-success" role="progressbar"
+                        <div class="progress mb-3">
+                            <div class="progress-bar bg-success" role="progressbar"
                                  aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100"
                                  style="width: {{ percentage }}%">
-                                <span class="sr-only">{{ percentage }}% Complete (success)</span>
+                                <span class="visually-hidden">{{ percentage }}% Complete (success)</span>
                             </div>
                         </div>
                     </div>
-                    <div class="col-lg-8 col-lg-offset-2 himg">
+                    <div class="col-lg-8 offset-lg-2 himg">
                         <a href="{% url 'programmes:detail' transmission.slug %}">
                             <img src="{{ transmission.programme.photo.url }}" class="img-responsive img-thumbnail">
                         </a>
                     </div>
                 {% else %}
-                    <div class="col-lg-8 col-lg-offset-2">
+                    <div class="col-lg-8 offset-lg-2">
                         <h3>{% trans 'There are currently no programmes on air' %}</h3>
                         <h1>{% trans 'Check all our programmes' %}</h1>
                         <h5><a href="{% url 'programmes:list' %}" class="btn btn-theme">{% trans 'See all' %}</a></h5>
@@ -140,12 +140,12 @@ <h5 class="a1" data-animate="fadeInUp">{{ programme.get_category_display }}</h5>
 
     <div class="container mtb">
         <div class="row">
-            <div class="col-lg-4 col-lg-offset-1">
+            <div class="col-lg-4 offset-lg-1">
                 <h4>{% trans 'More About Us.' %}</h4>
                 <p> {{ site_config.more_about_us }}</p>
             </div>
 
-            <div class="col-lg-4 col-lg-offset-1">
+            <div class="col-lg-4 offset-lg-1">
                 <h4>{% trans 'Latest Episodes' %}</h4>
                 <div class="hline"></div>
                 {% for episode in latest_episodes %}
diff --git a/radioco/apps/schedules/templates/schedules/schedules_list.html b/radioco/apps/schedules/templates/schedules/schedules_list.html
index c1e0c12..457e2de 100755
--- a/radioco/apps/schedules/templates/schedules/schedules_list.html
+++ b/radioco/apps/schedules/templates/schedules/schedules_list.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="{% static "radioco/css/calendar.css" %}" type="text/css"/>
 {% endblock %}
 
-{% block schedules_class %}class="active"{% endblock %}
+{% block schedules_class %}active{% endblock %}
 
 {% block page_title %}{% trans "Schedule" %}{% endblock %}
 
diff --git a/radioco/apps/users/templates/users/userprofile_detail.html b/radioco/apps/users/templates/users/userprofile_detail.html
index b8b27e5..f6c083f 100755
--- a/radioco/apps/users/templates/users/userprofile_detail.html
+++ b/radioco/apps/users/templates/users/userprofile_detail.html
@@ -4,23 +4,23 @@
 
 {% block page_title %}{% firstof userprofile.user.get_full_name userprofile.user %}{% endblock %}
 
-{% block users_class %}class="active"{% endblock %}
+{% block users_class %}active{% endblock %}
 
 {% block content %}
     <div class="container">
         <div class="row">
-            <div class="col-lg-10 col-lg-offset-1 centered">
+            <div class="col-lg-10 offset-lg-1 centered">
                 <img class="center-block img-responsive" src="{{ userprofile.avatar.url }}" alt="...">
             </div>
 
 
-            <div class="col-lg-5 col-lg-offset-1">
+            <div class="col-lg-5 offset-lg-1">
                 <div class="spacing"></div>
                 <h4>{% firstof userprofile.user.get_full_name|upper userprofile.user|upper %}</h4>
                 <p>{{ userprofile.bio|safe }}</p>
             </div>
 
-            <div class="col-lg-4 col-lg-offset-1">
+            <div class="col-lg-4 offset-lg-1">
                 <div class="spacing"></div>
                 <h4>{% trans 'Programme Details' %}</h4>
                 <div class="hline"></div>
@@ -33,7 +33,7 @@ <h4>{% trans 'Programme Details' %}</h4>
     {% if role_list %}
         <div class="container mtb">
             <div class="row">
-                <div class="col-lg-10 col-lg-offset-1 centered">
+                <div class="col-lg-10 offset-lg-1 centered">
                     <h2>{% trans "Contributions"|upper %}</h2>
                     <dl id="tabulate">
                         {% for role in role_list %}
diff --git a/radioco/apps/users/templates/users/userprofile_list.html b/radioco/apps/users/templates/users/userprofile_list.html
index 41e4295..9a06d2b 100755
--- a/radioco/apps/users/templates/users/userprofile_list.html
+++ b/radioco/apps/users/templates/users/userprofile_list.html
@@ -4,13 +4,13 @@
 
 {% block page_title %}{% trans "People" %}{% endblock %}
 
-{% block users_class %}class="active"{% endblock %}
+{% block users_class %}active{% endblock %}
 
 {% block content %}
 
     <div class="container mb">
         <div class="row">
-            <div class="col-lg-8 col-lg-offset-2 centered">
+            <div class="col-lg-8 offset-lg-2 centered">
                 <h2>{% trans 'The people who made this possible' %}</h2>
                 <br>
                 <div class="hline"></div>