diff --git a/pod/bbb/templates/bbb/live_publish_meeting.html b/pod/bbb/templates/bbb/live_publish_meeting.html
index 8b3b7ef031..fe25166ef0 100644
--- a/pod/bbb/templates/bbb/live_publish_meeting.html
+++ b/pod/bbb/templates/bbb/live_publish_meeting.html
@@ -55,7 +55,7 @@ <h3>{% trans "Are you sure you want to perform a BigBlueButton live?" %}</h3>
         {% endif %}
         {% for field in form.visible_fields %}
           {% spaceless %}
-          <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+          <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
             <div class="list-group-item">
               <div class="{% if field.name == "owners" or field.name == "users" %}form-row {% endif %}form-group {% if field.field.required %}form-group-required {% endif %}" >
                 {{ field.errors }}
diff --git a/pod/bbb/templates/bbb/publish_meeting.html b/pod/bbb/templates/bbb/publish_meeting.html
index 65f4c8627f..d873c9cdea 100644
--- a/pod/bbb/templates/bbb/publish_meeting.html
+++ b/pod/bbb/templates/bbb/publish_meeting.html
@@ -47,7 +47,7 @@ <h3>{% trans "Are you sure you want to publish this BigBlueButton presentation?"
     {% endif %}
     {% for field in form.visible_fields %}
       {% spaceless %}
-      <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+      <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
         <div class="list-group-item">
           <div class="{% if field.name == "owners" or field.name == "users" %}form-row {% endif %}form-group {% if field.field.required %}form-group-required {% endif %}" >
           {{ field.errors }}
diff --git a/pod/chapter/templates/video_chapter.html b/pod/chapter/templates/video_chapter.html
index 8cd60f2d28..976acd73f4 100644
--- a/pod/chapter/templates/video_chapter.html
+++ b/pod/chapter/templates/video_chapter.html
@@ -64,10 +64,10 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
 {% endif %}
 <div id="chapter-info" class="card">
   <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
-  <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="true" aria-controls="collapse-0">
+  <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="false" aria-controls="collapse-0">
     {% trans 'Chapters' %}
   </button>
-  <div id="collapse-0" class="card-body collapse hide card-text small">
+  <div id="collapse-0" class="card-body collapse card-text small">
     <p>{% trans '"Add a new chapter" allows you to add a new chapter, "modify" allows you to modify it and "delete" allows you to remove the chapter.' %}</p>
     <p>{% trans 'Start playback of the video, pause the video and click on "Get time from the player" to fill in the field untitled "Start time".' %}</p>
     <p>{% trans 'The chapters cannot start at the same time.' %}</p>
diff --git a/pod/completion/templates/video_completion.html b/pod/completion/templates/video_completion.html
index c723103257..7ec43924ac 100644
--- a/pod/completion/templates/video_completion.html
+++ b/pod/completion/templates/video_completion.html
@@ -58,17 +58,20 @@
     </span>
     &nbsp;
     <div class="breadcrumb">
-      <p><a class="btn btn-secondary" href="{% url 'video:completion:video_caption_maker' slug=video.slug %}" title="{% trans 'to create your subtitles and/or caption(s) files' %}">{% trans 'Video Caption Maker' %}</a></p>
+      <p>
+        <a class="btn btn-secondary" href="{% url 'video:completion:video_caption_maker' slug=video.slug %}">{% trans 'Video Caption Maker' %}</a>
+        <span class="form-text">{% trans 'To create your subtitles and/or caption(s) files' %}</span>
+      </p>
       <span id="form_track">
         {% if form_track %}
-        {% include 'track/form_track.html' with form_track=form_track %}
+          {% include 'track/form_track.html' with form_track=form_track %}
         {% endif %}
       </span>
       <form class="form_new completion" id="form_new_track" action="{% url 'video:completion:video_completion_track' slug=video.slug %}" method="POST">
         {% csrf_token %}
         <input type="hidden" name="action" value="new">
         <input type="submit" value="{% trans 'Add a new subtitle or caption file' %}" class="new_track btn btn-primary">
-        <span>{% trans 'The file must be in VTT format.' %}</span>
+        <span class="form-text">{% trans 'The file must be in VTT format.' %}</span>
       </form>
     </div>
   </li>
@@ -133,19 +136,19 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
 {% endif %}
 <div id="contributor-info" class="card">
   <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
-  <button class="btn rounded-0 pod-btn" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
+  <button class="btn rounded-0 pod-btn" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
     {% trans 'Contributor(s)' %}
   </button>
-  <div id="collapse-1" class="card-body collapse hide card-text small">
+  <div id="collapse-1" class="card-body collapse card-text small">
     <p>{% trans 'List of people related to this video.' %}</p>
     <p>{% trans 'A contributor must at least have a name and a role. You can also join the email of this contributor as well as a link (professional website for example).' %}</p>
   </div>
 </div>
 <div id="track-info" class="card">
-  <button class="btn rounded-0 pod-btn" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
+  <button class="btn rounded-0 pod-btn" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
     {% trans 'Subtitle(s) and Caption(s)' %}
   </button>
-  <div id="collapse-2" class="card-body collapse hide card-text small">
+  <div id="collapse-2" class="card-body collapse card-text small">
     <p>{% trans 'Subtitle(s) and/or captions(s) related to this video.' %}</p>
     <!-- <p>{% trans 'Several web sites allows you to subtitle or caption videos (for example: Amara)' %}</p> -->
     <p>{% trans 'You can add several subtitle or caption files to a signle video (for example, in order to subtitle or caption this video in several languages' %}</p>
@@ -163,19 +166,19 @@ <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
   </div>
 </div>
 <div id="document-info" class="card">
-  <button class="btn rounded-0 pod-btn" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
+  <button class="btn rounded-0 pod-btn" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
     {% trans 'Additional resource(s)' %}
   </button>
-  <div id="collapse-3" class="card-body collapse hide card-text small">
+  <div id="collapse-3" class="card-body collapse card-text small">
     <p>{% trans 'Document(s) related to this video. These documents will be downloadable by users.' %}</p>
     <p>{% trans 'Be careful, not to be confused with enrichment. These documents are attached to the video, not integrated.' %}</p>
   </div>
 </div>
 <div id="overlay-info" class="card">
-  <button class="btn rounded-0 pod-btn" id="heading-4" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="true" aria-controls="collapse-4">
+  <button class="btn rounded-0 pod-btn" id="heading-4" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
     {% trans 'Overlay(s)' %}
   </button>
-  <div id="collapse-4" class="card-body collapse hide card-text small">
+  <div id="collapse-4" class="card-body collapse card-text small">
     <p>{% trans 'Overlay allows you to display text (with ou without html tag) over the video at specific times and positions.' %}</p>
     <p>{% trans 'You can add a solid background or a transparent background to the text you want to display with the option "Show background"' %}</p>
   </div>
diff --git a/pod/cut/templates/video_cut.html b/pod/cut/templates/video_cut.html
index 8750f936e6..fcb3996d8a 100644
--- a/pod/cut/templates/video_cut.html
+++ b/pod/cut/templates/video_cut.html
@@ -112,10 +112,10 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
   {% endif %}
   <div id="cut-info" class="card">
   <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
-  <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="true" aria-controls="collapse-0">
+  <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="false" aria-controls="collapse-0">
     {% trans 'Cut' %}
   </button>
-  <div id="collapse-0" class="card-body collapse hide card-text small">
+  <div id="collapse-0" class="card-body collapse card-text small">
     <p>{% trans 'The video cut allows you to set a start and an end to trim your video.' %}</p>
     <p>{% trans 'Your original video is kept and you can therefore modify your changes at any time.' %}</p>
     <p>{% trans 'When saving your cut, an encoding is restarted to replace the old one.' %}</p>
diff --git a/pod/enrichment/templates/enrichment/group_enrichment.html b/pod/enrichment/templates/enrichment/group_enrichment.html
index a865ac2145..feea78a96a 100644
--- a/pod/enrichment/templates/enrichment/group_enrichment.html
+++ b/pod/enrichment/templates/enrichment/group_enrichment.html
@@ -39,7 +39,7 @@ <h3>{% trans "Editing group for the enrichment of the video" %} "{{video.title}}
       {% endfor %}
       {% for field in form.visible_fields %}
         {% spaceless %}
-        <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+        <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
           <div class="list-group-item">
             <div class="{% if field.name == "groups"%}form-row {% endif %}form-group {% if field.field.required %}form-group-required{% endif %}">
               {{ field.errors }}
diff --git a/pod/import_video/templates/import_video/add_or_edit.html b/pod/import_video/templates/import_video/add_or_edit.html
index 76cfc0f642..a6592ca5b7 100644
--- a/pod/import_video/templates/import_video/add_or_edit.html
+++ b/pod/import_video/templates/import_video/add_or_edit.html
@@ -187,28 +187,28 @@ <h2 class="card-header card-title pod-card__title h4">{% trans "Terms of Service
     <p>{% trans "It is necessary to respect the terms of use of the various services before being able to upload a video from their site to this platform." %}</p>
 
     <div class="card">
-      <button class="btn btn-link" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
+      <button class="btn btn-link" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
         {% trans "Big Blue Button" %}
       </button>
-      <div id="collapse-1" class="card-body collapse hide card-text small" aria-labelledby="heading-1" data-bs-parent="#formfields">
+      <div id="collapse-1" class="card-body collapse card-text small" aria-labelledby="heading-1" data-bs-parent="#formfields">
         <p><a href="https://docs.bigbluebutton.org/support/faq/" target="_blank">{% trans "More infomations on Big Blue Button" %}</a></p>
       </div>
     </div>
 
     <div class="card">
-      <button class="btn btn-link" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
+      <button class="btn btn-link" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
         {% trans "PeerTube" %}
       </button>
-      <div id="collapse-2" class="card-body collapse hide card-text small" aria-labelledby="heading-2" data-bs-parent="#formfields">
+      <div id="collapse-2" class="card-body collapse card-text small" aria-labelledby="heading-2" data-bs-parent="#formfields">
         <p><a href="https://joinpeertube.org/fr/faq" target="_blank">{% trans "More infomations on PeerTube" %}</a></p>
       </div>
     </div>
 
     <div class="card">
-      <button class="btn btn-link" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
+      <button class="btn btn-link" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
         {% trans "YouTube" %}
       </button>
-      <div id="collapse-3" class="card-body collapse hide card-text small" aria-labelledby="heading-3" data-bs-parent="#formfields">
+      <div id="collapse-3" class="card-body collapse card-text small" aria-labelledby="heading-3" data-bs-parent="#formfields">
         <p>{% trans "Their terms of service state that you are not allowed to download any content unless permitted by YouTube or the person who owns the copyright to the content." %}</p>
         <p><a href="https://www.youtube.com/t/terms#e8b39011d8" target="_blank">{% trans "YouTube's Terms of Service" %}</a></p>
       </div>
diff --git a/pod/live/templates/live/event_immediate_edit.html b/pod/live/templates/live/event_immediate_edit.html
index c317c5c69f..265dc4ab05 100644
--- a/pod/live/templates/live/event_immediate_edit.html
+++ b/pod/live/templates/live/event_immediate_edit.html
@@ -51,7 +51,7 @@
                     {% endfor %}
                     {% for field in form.visible_fields %}
                         {% spaceless %}
-                            <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+                            <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
                                 <div class="list-group-item">
                                     <div class="{% if field.name == "owners" or field.name == "users" %}form-row {% endif %}form-group {% if field.field.required %}form-group-required {% endif %}">
                                         {{ field.errors }}
diff --git a/pod/main/static/css/dark.css b/pod/main/static/css/dark.css
index 541b8958a6..365b6db7c7 100644
--- a/pod/main/static/css/dark.css
+++ b/pod/main/static/css/dark.css
@@ -123,10 +123,10 @@
   border-color: var(--pod-background);
 }
 
-[data-theme="dark"] .navbar-nav .nav-link:focus,
+/*[data-theme="dark"] .navbar-nav .nav-link:focus,
 [data-theme="dark"] .navbar-nav .nav-link:hover {
   color: var(--pod-activelink-color);
-}
+}*/
 
 [data-theme="dark"] .btn-link.disabled,
 [data-theme="dark"] .dropdown-item,
@@ -145,11 +145,11 @@
   color: inherit;
 }*/
 
-[data-theme="dark"] .btn-link:focus,
+/*[data-theme="dark"] .btn-link:focus,
 [data-theme="dark"] .btn-link:active,
 [data-theme="dark"] .btn-link:hover {
   color: var(--pod-activelink-color);
-}
+}*/
 
 [data-theme="dark"] .btn-light {
   background-color: var(--bs-dark);
diff --git a/pod/main/static/css/pod.css b/pod/main/static/css/pod.css
index ccdd2b16ea..b648b26b01 100755
--- a/pod/main/static/css/pod.css
+++ b/pod/main/static/css/pod.css
@@ -77,6 +77,10 @@
   --bs-link-color-rgb: var(--pod-link-color-rgb);
   --bs-link-hover-color: var(--pod-activelink-color);
   --bs-card-color: var(--pod-font-color);
+  /* better contrast on sidebar background */
+  --bs-danger: #DC2028;
+  /* better contrasts */
+  --bs-border-color: #8E969D;
 
   /* Use system font (faster load) */
   --font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
@@ -122,8 +126,8 @@
 .navbar-toggler:focus,
 .navbar-toggler:hover {
   transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
-  color: var(--pod-primary);
-  border-color: var(--pod-primary);
+  color: var(--bs-link-color);
+  border-color: var(--bs-link-color);
 }
 
 .navbar-light .navbar-brand:focus,
@@ -502,10 +506,10 @@ tr,
   padding: .25rem .5rem;
 }*/
 
-button.nav-link {
+/*button.nav-link {
   background: none;
   border: none;
-}
+}*/
 
 .btn .userpicture {
   border: 1px solid transparent;
@@ -1010,14 +1014,14 @@ body {
   font-size: 12px;
 }
 
-.btn{
+/*.btn{
   --bs-btn-hover-color: #FFF;
 }
 
 .btn-link {
   --bs-btn-hover-color: var(--pod-activelink-color);
   --bs-btn-active-color: var(--pod-activelink-color);
-}
+}*/
 
 .btn-primary,
 .btn-outline-primary {
@@ -1035,6 +1039,17 @@ body {
   --bs-btn-color: var(--pod-btn-text);
 }
 
+/* dark navbars (see in "my files") */
+.bg-primary {
+  --bs-link-color: #F5F5F5;
+}
+.bg-primary .nav-link {
+  --bs-nav-link-color : var(--bs-link-color);
+}
+.bg-primary .nav-link:focus-visible {
+  box-shadow: 0 0 0 .25rem rgba(255,255,255,.5);
+}
+
 /* used in badges (# of videos in channel) */
 .text-bg-primary {
   background-color: var(--pod-primary) !important;
@@ -1055,7 +1070,7 @@ body {
 
 .pod-params-button {
   color: var(--pod-font-color);
-  --bs-btn-hover-color: var(--pod-primary);
+  --bs-btn-hover-color: var(--bs-link-color);
   font-size: 1.4rem;
   display: flex;
 }
@@ -1141,7 +1156,7 @@ body {
 
 .pod-footer__credits {
   font-size: 85%;
-  opacity: .8;
+  /*opacity: .8;*/
 }
 
 .pod-footer__links {
@@ -1149,6 +1164,7 @@ body {
   justify-content: space-around;
   gap: .5rem;
   font-weight: 600;
+  flex-wrap: wrap;
 }
 
 .pod-footer a {
@@ -1593,15 +1609,6 @@ table .alert.alert-danger.btn.pod-btn-social {
   font-size: 11px;
 }
 
-/* My Files font color fix */
-
-.navbar-brand {
-  color: var(--pod-font-color) !important;
-}
-
-.navbar-brand:focus, .navbar-brand:hover {
-  text-decoration: underline;
-}
 
 /* Upload page */
 
diff --git a/pod/main/templates/navbar.html b/pod/main/templates/navbar.html
index e01780a7b1..97241c9381 100644
--- a/pod/main/templates/navbar.html
+++ b/pod/main/templates/navbar.html
@@ -120,7 +120,7 @@ <h5 id="pod-navbar__menusettingsLabel">{% trans 'Configuration'%}</h5>
                           <form action="/i18n/setlang/" method="post">
                             {% csrf_token %}
                             <input name="language" value="{{ language.code }}" type="hidden">
-                            <input value="{{ language.name_local }} ({{ language.code }})" class="dropdown-item" type="submit">
+                            <input value="{{ language.name_local }} ({{ language.code }})" class="dropdown-item" type="submit" lang="{{ language.code }}">
                           </form>
                         {% endif %}
                       {% endfor %}
diff --git a/pod/main/templates/navbar_collapse.html b/pod/main/templates/navbar_collapse.html
index 4164c208fe..11bb002271 100644
--- a/pod/main/templates/navbar_collapse.html
+++ b/pod/main/templates/navbar_collapse.html
@@ -28,7 +28,7 @@ <h2 class="modal-title"><i class="bi bi-play-btn"></i>&nbsp;{% blocktrans count
                   {{channel.title}}</a></span>
                 <span class="text-nowrap">
                   {% if channel.themes.all.count > 0 %}
-                    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseThemes{{channel.id}}" aria-expanded="true" aria-controls="collapseThemes{{channel.id}}">
+                    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseThemes{{channel.id}}" aria-expanded="false" aria-controls="collapseThemes{{channel.id}}">
                     {% blocktrans count counter=channel.themes.all.count %}{{counter}} Theme{% plural %}{{counter}} Themes{% endblocktrans %} <i class="bi bi-chevron-down"></i>
                     </button>
                   {% endif %}
@@ -71,7 +71,7 @@ <h2 class="modal-title"><i class="bi bi-play-btn"></i>&nbsp;{% blocktrans count
                   {{channel.title}}</a></span>
                 <span class="text-nowrap">
                   {% if channel.themes.all.count > 0 %}
-                    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseThemes{{channel.id}}" aria-expanded="true" aria-controls="collapseThemes{{channel.id}}">
+                    <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseThemes{{channel.id}}" aria-expanded="false" aria-controls="collapseThemes{{channel.id}}">
                     {% blocktrans count counter=channel.themes.all.count %}{{counter}} Theme{% plural %}{{counter}} Themes{% endblocktrans %} <i class="bi bi-chevron-down" class="chevron-down m-0 p-0"></i>
                     </button>
                   {% endif %}
diff --git a/pod/meeting/static/css/meeting.css b/pod/meeting/static/css/meeting.css
index f0f0b9e31a..b1189d0af6 100644
--- a/pod/meeting/static/css/meeting.css
+++ b/pod/meeting/static/css/meeting.css
@@ -8,7 +8,7 @@
 
 .meeting-text-copied {
   position: absolute;
-  top: 50%; 
+  top: 50%;
   left: 50%;
   width: 170px;
 }
@@ -46,7 +46,7 @@
   border-radius: 50%;
   width: 50px;
   height: 50px;
-  animation: recording-spin 3s linear infinite;      
+  animation: recording-spin 3s linear infinite;
 }
 
 @-webkit-keyframes recording-spin {
diff --git a/pod/podfile/static/podfile/css/podfile.css b/pod/podfile/static/podfile/css/podfile.css
index 8cb7f7c05e..76d98a85ce 100644
--- a/pod/podfile/static/podfile/css/podfile.css
+++ b/pod/podfile/static/podfile/css/podfile.css
@@ -1,3 +1,4 @@
+
 button.close {
   padding: 0;
   background-color: transparent;
@@ -65,12 +66,7 @@ button.close {
 
 .modal-content {
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
   flex-direction: column;
   pointer-events: auto;
   background-color: #fff;
@@ -100,64 +96,6 @@ button.close {
   opacity: 0.5;
 }
 
-/*
-.modal-header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: start;
-     -ms-flex-align: start;
-  align-items: flex-start;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid #e9ecef;
-  border-top-left-radius: 0.3rem;
-  border-top-right-radius: 0.3rem;
-}
-
-.modal-header .close {
-  padding: 1rem;
-  margin: -1rem -1rem -1rem auto;
-}
-
-.modal-title {
-  margin-bottom: 0;
-  line-height: 1.5;
-  font-size: 1.4rem;
-}
-
-.modal-body {
-  position: relative;
-  -webkit-box-flex: 1;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  padding: 1rem;
-}
-
-.modal-footer {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-     -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: end;
-     -ms-flex-pack: end;
-   justify-content: flex-end;
-  padding: 1rem;
-  border-top: 1px solid #e9ecef;
-}
-
-.modal-footer > :not(:first-child) {
-  margin-left: .25rem;
-}
-
-.modal-footer > :not(:last-child) {
-  margin-right: .25rem;
-}*/
-
 .modal-scrollbar-measure {
   position: absolute;
   top: -9999px;
@@ -165,17 +103,6 @@ button.close {
   height: 50px;
   overflow: scroll;
 }
-/*
-.modal-dialog {
-  margin: 1.75rem auto;
-}
-.modal-dialog-centered {
-  min-height: calc(100% - (1.75rem * 2));
- }
-.modal-sm {
-  max-width: 300px;
-}
-*/
 
 /**********************************
  ********** Improve css ***********
@@ -199,29 +126,19 @@ button.close {
 #podfile .card-img-top {
   width: 100%;
   height: 26vh;
-  -o-object-fit: scale-down;
-     object-fit: scale-down;
+  object-fit: scale-down;
 }
 #podifle img.directory-image {
   height: 26px;
   vertical-align: middle;
 }
-/*#podfile a, #podifle .folder_title{
-  font-size: .8rem;
-}*/
+
 #podfile .list_folders{
   padding-left: 15px;
   height: auto;
   overflow: hidden;
 }
-/*#podfile .list_folders .folder_name{
-  max-width: 600px;
-  display: inline-block;
-  overflow: hidden;
-  -o-text-overflow: ellipsis;
-     text-overflow: ellipsis;
-  white-space: nowrap;
-}*/
+
 #podfile #listfiles{
   max-height:600px;
   overflow: auto;
@@ -255,16 +172,12 @@ button.close {
   font-weight: 700;
 }
 #shareModalCenter #shared-people.list-group .list-group-item .btn-share.btn-remove{
-  -webkit-box-ordinal-group: 2;
-    -ms-flex-order: 1;
-      order: 1;
+  order: 1;
   padding: .4em .8em;
   color: #fff !important;
   background-color: var(--bs-danger);
   line-height: 1;
-  -webkit-box-flex: 0;
-    -ms-flex: none;
-      flex: none;
+  flex: none;
 }
 #shareModalCenter #shareFormName .form-group{position: relative;}
 #shareModalCenter #shareFormName .form-group .form-control{ outline: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;}
@@ -273,31 +186,22 @@ button.close {
   width: 400px;
   max-width: 100%;
   border: 1px solid rgba(0,0,0,.1);
-  -webkit-box-shadow: 0 8px 10px 4px rgba(0,0,0,.08);
-          box-shadow: 0 8px 10px 4px rgba(0,0,0,.08);
+  box-shadow: 0 8px 10px 4px rgba(0,0,0,.08);
   position: absolute;
   top: 100%;
 }
 #shareModalCenter #user-search.list-group .list-group-item{
   border: none !important;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-     -ms-flex-pack: justify;
-   justify-content: space-between;
-  -webkit-box-align: center;
-     -ms-flex-align: center;
-        align-items: center;
+  justify-content: space-between;
+  align-items: center;
   padding: .8em;
   line-height: 1;
 }
 #shareModalCenter #user-search.list-group .list-group-item .btn-share.btn-add{
   padding: .4em .8em;
   line-height: 1;
-  -webkit-box-flex: 0;
-    -ms-flex: none;
-      flex: none;
+  flex: none;
 }
 #shareModalCenter #user-search.list-group .list-group-item .username{
   font-weight: 700;
@@ -305,15 +209,9 @@ button.close {
 }
 
 .modal-header {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: start;
-     -ms-flex-align: start;
-        align-items: flex-start;
-  -webkit-box-pack: justify;
-     -ms-flex-pack: justify;
-   justify-content: space-between;
+  align-items: flex-start;
+  justify-content: space-between;
 }
 .modal-header .modal-title{
   color: var(--pod-primary);
@@ -323,9 +221,7 @@ button.close {
   color: var(--pod-font-color);
   opacity: 1;
   padding: 0;
-  -webkit-transform: translate(10px, -15px);
-    -ms-transform: translate(10px, -15px);
-      transform: translate(10px, -15px);
+  transform: translate(10px, -15px);
 }
 .podfilemodal{
   padding: 0 !important;
@@ -336,35 +232,10 @@ button.close {
   overflow: hidden;
 }
 #podfile > .row{
-  -webkit-box-pack: justify;
-     -ms-flex-pack: justify;
-   justify-content: space-between;
+  justify-content: space-between;
 
 }
-/*#podfile #dirs{
-  position: absolute;
-  left: 0;
-  max-width: 100%;
-  height: 100%;
-  display: -ms-grid;
-  display: grid;
-  grid-row-gap: .4em;
-  opacity: 0;
-  z-index: -1;
-  transition: .5s opacity;
-  border: none;
-  border-top-right-radius: 4px;
-  box-shadow: 5px 0 5px -5px #ccc;
-}
-#podfile #dirs.open{
-  opacity: 1;
-  z-index: 9;
-}*/
-/*#podfile #dirs .close-folder, #podfile #dirs .close-folder svg{
-  width: 30px;
-  color: var(--secondary);
-  cursor: pointer;
-}*/
+
 #podfile #dirs .dirs-nav{
   display: flex;
   justify-content: space-between;
@@ -376,7 +247,7 @@ button.close {
 }
 #podfile .list_folders .folder_container:nth-child(2n),
 #podfile .list_folders_sub .folder_container:nth-child(2n) {
-  background-color: #ececec;
+  background-color: #F5F5F5;
 }
 #podfile .list_folders .folder_container,
 #podfile .list_folders_sub .folder_container{padding: .4em;}
@@ -389,10 +260,6 @@ button.close {
 }
 #podfile .list_folders .folder,
 #podfile .list_folders_sub .folder{ -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
-/*#podfile .list_folders_sub .folder > *,
-#podfile .list_folders .folder > *{-webkit-box-flex: 0;-ms-flex: none;flex: none;}*/
-/*#podfile #dirs .dirs-nav-container .add-folder-btn{ color: var(--secondary); -webkit-transition: .3s transform; -o-transition: .3s transform; transition: .3s transform; }
-#podfile #dirs .dirs-nav-container .add-folder-btn:hover{ text-decoration: none; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}*/
 
 #podfile .share-folders{ padding-top: .4em; border-top: 2px dotted var(--pod-primary); }
 #podfile .share-folders,
@@ -434,234 +301,32 @@ button.close {
       -ms-flex: none;
           flex: none;
   height: 35px;
-
-}
-#podfile #dirs .folder-search::-webkit-input-placeholder{
-  color: rgba(0,0,0,.5);
-  text-transform: capitalize;
-}
-#podfile #dirs .folder-search::-moz-placeholder{
-  color: rgba(0,0,0,.5);
-  text-transform: capitalize;
-}
-#podfile #dirs .folder-search:-ms-input-placeholder{
-  color: rgba(0,0,0,.5);
-  text-transform: capitalize;
 }
-#podfile #dirs .folder-search::-ms-input-placeholder{
-  color: rgba(0,0,0,.5);
-  text-transform: capitalize;
-}
-#podfile #dirs .folder-search::placeholder{
-  color: rgba(0,0,0,.5);
-  text-transform: capitalize;
-}
-#podfile #list_folders_sub .view-more-container{
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-     -ms-flex-align: center;
-        align-items: center;
-  -webkit-box-pack: center;
-     -ms-flex-pack: center;
-   justify-content: center;
-  height: 40px;
-  margin-top: 1em;
-}
-#podfile #list_folders_sub .view-more-container::after{
-  content: "";
-  width: 100%;
-  -webkit-transform: translateY(50%);
-      -ms-transform: translateY(50%);
-          transform: translateY(50%);
-  height: 100%;
-  border-top: 1px solid var(--secondary);
-}
-#podfile #list_folders_sub .view-more-container a#more{
-  text-align: center;
-  padding: .4em 2em;
-  border: 1px solid var(--secondary);
-  width: 50%;
-  margin: 0 auto;
-  border-radius: 4em;
-  z-index: 9;
-  background: white;
-  position: absolute;
-  -webkit-transition: all .2s linear .0s;
-  -o-transition: all .2s linear .0s;
-  transition: all .2s linear .0s;
-  font-weight: 600;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-     -ms-flex-align: center;
-        align-items: center;
-  overflow: hidden;
-}
-/*
-#podfile #list_folders_sub .view-more-container a#more:hover{
-  background: var(--secondary);
-  color: #fff !important;
-}
-#podfile #list_folders_sub .view-more-container.loading a#more:hover{
-  background: white;
-  color: var(--secondary);
-}
-*/
-#podfile #list_folders_sub .view-more-container a#more .text{
-  -ms-flex-item-align: center;
-   -ms-grid-row-align: center;
-           align-self: center;
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-#podfile #list_folders_sub .view-more-container.loading .loader{
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-#podfile #list_folders_sub .view-more-container .see-more{
-  display: block;
-  position: absolute;
-  width: 15px;
-  left: 15px;
-}
-/*#podfile .alert-warning{
-  position: relative;
-  color: #856404!important;
-  padding: .4em .8em;
-  padding-right: 25px;
+
+#list_folders_sub .view-more-container {
   text-align: center;
-  border-radius: 4px;
-  font-size: 14px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-    -ms-flex-align: center;
-      align-items: center;
-}
-#podfile .alert-warning .close{
-  position:absolute;
-  right: 5px;
-  top: 2px;
-  font-size: 20px;
-  font-weight: 900;
-  color: var(--bs-gray-dark);
-  cursor: pointer;
-}
-#podfile .alert-warning .warning-icon{
-  display: inline-block;
-  width: 20px;
-  -webkit-transform: translateY(-2px);
-    -ms-transform: translateY(-2px);
-      transform: translateY(-2px);
-  margin-right: 8px;
-}*/
-/*#podfile .open-folder{
-  min-height: 400px;
-  width: 30px;
-  margin-left: -1em;
-  cursor: pointer;
-  -webkit-transform: translateX(-10px);
-    -ms-transform: translateX(-10px);
-      transform: translateX(-10px);
-  color: var(--pod-primary);
-}
-#podfile #files{
-  width: calc(100% - 30px);
-  z-index: 1;
-  -webkit-box-flex: 0;
-    -ms-flex: none;
-      flex: none;
-  border-top-right-radius: 4px;
-  padding: 0;
-}*/
-#podfile #files .navbar{
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: nowrap;
-  background-color: var(--pod-primary);
-  color: var(--bs-white);
-  /*height: 35px;*/
 }
+
 #podfile #files #currentfolder{
-  -webkit-box-flex: unset;
-  -ms-flex-positive: unset;
-          flex-grow: unset;
-  -ms-flex-preferred-size: auto;
-               flex-basis: auto;
+  flex-grow: unset;
+  flex-basis: auto;
 }
-/*#podfile .current-folder-icon{
-  width: 25px;
-  display: inline-block;
-  -webkit-transform: translateY(-3px);
-    -ms-transform: translateY(-3px);
-      transform: translateY(-3px);
-}
-#podfile #files #currentfolder .delete-folder svg,
-#podfile #files #currentfolder .edit-folder svg,
-#podfile #files #currentfolder .download-file svg,
-#podfile #files #currentfolder .upload-file svg,
-#podfile #files #currentfolder .share-folder svg{
-  width: 20px;
-  display: inline-block;
-  -webkit-transition: .3s color;
-  -o-transition: .3s color;
-  transition: .3s color;
-  height: 20px;
-  color: #fff;
-}
-#podfile #files #currentfolder .share-folder:hover svg,
-#podfile #files #currentfolder .download-file:hover svg,
-#podfile #files #currentfolder .edit-folder:hover svg,
-#podfile #files #currentfolder .delete-folder:hover svg,
-#podfile #files #currentfolder .upload-file:hover svg{ color: var(--secondary); }
-#podfile #files .btn.navbar-toggler{
-  width: 15px;
-  color: #fff;
-  padding: 0;
-  color: #fff;
-  background: transparent !important;
-}
-#podfile #files .navbar-toggler svg{ height: 22px; }
-*/
 
 #podfile #currentfolder .nav-item:not(:last-child){margin-right: .8em}
-/*#podfile #files #currentfolder .edit-folder svg{width: 25px; height: 25px;}*/
+
 #podfile #currentfolder .nav-item{
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-    -ms-flex-align: center;
-      align-items: center;
+  align-items: center;
 }
-#podfile #currentfolder .nav-item > form{ height: 26px;}
 
-#podfile #currentfolder .nav-item .btn{padding: 0;}
-/*#podfile .current-folder-name{
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: 16px;
-}*/
 #podfile .flex{
-  display: -ms-grid;
   display: grid;
-  -ms-grid-rows: minmax(.5fr, 1fr);
   grid-template-rows: minmax(.5fr, 1fr);
   grid-auto-rows: minmax(.5fr, 1fr);
   min-height: 100%;
 }
 
 #podfile #listfiles{
-  display: -ms-grid;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   grid-gap: 5px;
@@ -675,14 +340,11 @@ button.close {
 }
 #podfile #files.loading .lds-ellipsis{
   display: block;
-  -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-      transform: translateX(-50%);
+  transform: translateX(-50%);
   width: 75px;
 }
 #podfile #listfiles .empty-folder-warning{
   grid-column: 1/-1;
-  -ms-grid-row: 10;
   grid-row: 10;
   text-align: center;
   background: #fff3cd;
@@ -696,22 +358,7 @@ button.close {
   max-width: unset;
 }
 #podfile #listfiles .navbar{
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-     -ms-flex-pack: end;
-   justify-content: flex-end;
-  -webkit-box-align: center;
-     -ms-flex-align: center;
-        align-items: center;
-}
-#podfile .navbar .btn-link{
-  color: var(--bs-white);
-}
-#podfile .navbar .btn-link:hover,
-#podfile .navbar .btn-link:focus{
-  color: var(--pod-primary-lighten-dark);
+  justify-content: flex-end;
 }
 
 
@@ -723,29 +370,16 @@ button.close {
   bottom: 4px;
   left: 0;
   right: 0;
-  -webkit-transform: translateY(100%);
-    -ms-transform: translateY(100%);
-      transform: translateY(100%);
-  background: var(--pod-primary);
+  transform: translateY(100%);
   padding: .4em;
-  -webkit-transition: .1s all;
-  -o-transition: .1s all;
   transition: .1s all;
 }
 #podfile #listfiles .file-navbar{
-  -ms-flex-pack: distribute;
   justify-content: space-around;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-     -ms-flex-direction: row;
-         flex-direction: row;
-  -webkit-box-align: end;
-     -ms-flex-align: end;
-        align-items: flex-end;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-direction: row;
+  align-items: flex-end;
+  flex-wrap: wrap;
   overflow-y: auto;
-  max-height: 110px;
 }
 #podfile #listfiles .file-navbar .nav-item{
   width: 25px;
@@ -753,39 +387,6 @@ button.close {
   height: 25px;
   margin: 0 .4em .4em .4em !important;
 }
-/*#podfile #listfiles .file-navbar .nav-item .edit-file{
-  display: inline-block;
-  width: 24px; height: 24px;
-}
-#podfile #listfiles .file-navbar .nav-item .download-file{
-  display: inline-block;
-  width: 24px; height: 24px;
-}
-#podfile #listfiles .file-navbar .nav-item .delete-file{
-  display: inline-block;
-  width: 22px; height: 22px;
-}
-#podfile #listfiles .file-navbar .nav-item form{
-  height: 100%;
-  width: 100%;
-  margin: 0 !important;
-}
-
-#podfile #listfiles .navbar .btn{
-  background: none;
-  color: #fff;
-  width: 25px;
-  height: 100%;
-  border: none;
-  opacity: 1!important;
-}*/
-#podfile #listfiles .navbar{
-  background: var(--pod-primary);
-  position: relative;
-}
-/*#podfile #listfiles .navbar svg{
-  height: 100%;
-}*/
 
 #podfile #listfiles .card-body{
   overflow: hidden;
@@ -839,8 +440,4 @@ button.close {
     -ms-flex-align: start;
       align-items: flex-start;
   }
-  /*#podfile #dirs .dirs-nav .dirs-nav-container .add-folder-btn{
-    padding-left: 0;
-    margin-left: 0;
-  }*/
 }
diff --git a/pod/podfile/static/podfile/js/filewidget.js b/pod/podfile/static/podfile/js/filewidget.js
index af82e158c2..270a4fddab 100644
--- a/pod/podfile/static/podfile/js/filewidget.js
+++ b/pod/podfile/static/podfile/js/filewidget.js
@@ -3,6 +3,14 @@
 
 if (typeof loaded == "undefined") {
   loaded = true;
+
+  const loader = `
+    <div class="container-loader">
+      <div class="lds-ring" aria-label="{${gettext('Loading…')}">
+        <div></div><div></div><div></div><div></div>
+      </div>
+    </div>
+  `;
   document.addEventListener("click", (e) => {
     if (!e.target.parentNode) return;
     if (
@@ -789,20 +797,19 @@ if (typeof loaded == "undefined") {
     search = search ? `&search=${search}` : "";
     let seeMore = gettext("See more");
     return `
-       <div class="view-more-container">
-           <a id="more" href="#" data-next="/podfile/ajax_calls/user_folders?page=${nextPage}${search}">
-              <span class="see-more" id="see-more-icon">
-                  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
-              </span><span class="text">${seeMore} (${curr_page}/${tot_page})</span>
-              <div class="loader lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-           </a>
-       </div>
+      <div class="view-more-container m-2">
+        <a id="more" class="btn btn-light href="#" data-next="/podfile/ajax_calls/user_folders?page=${nextPage}${search}">
+          <i class="bi bi-arrow-down-square" aria-hidden="true"></i>
+          <span class="text">${seeMore} (${curr_page}/${tot_page})</span>
+        </a>
+        ${loader}
+      </div>
     `;
   };
 
   function seemore(e) {
     let parent_el = document.getElementById("more").parentNode;
-    parent_el.classList.add("loading");
+    parent_el.querySelector(".lds-ring").classList.add("show");
     let next = document.getElementById("more").dataset.next;
     let search = document.getElementById("more").dataset.search;
     let currentFolder = getCurrentSessionFolder();
@@ -870,11 +877,6 @@ if (typeof loaded == "undefined") {
     document.getElementById("files").classList.add("loading");
     let id = cible.dataset.id;
 
-    let loader = `
-       <div class="container-loader">
-           <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
-       </div>
-       `;
     document.getElementById("files").innerHTML = loader;
 
     let success_func = function ($data) {
diff --git a/pod/podfile/templates/podfile/list_folder_files.html b/pod/podfile/templates/podfile/list_folder_files.html
index 196352ce0f..5c8124ce83 100644
--- a/pod/podfile/templates/podfile/list_folder_files.html
+++ b/pod/podfile/templates/podfile/list_folder_files.html
@@ -1,112 +1,111 @@
 {% load i18n static podfile_filters %}
 <!-- Image and text -->
-<nav class="px-3 navbar navbar-expand-lg navbar-link">
-  <h2 class="text-truncate h3 m-0">
-    <span
-      class="current-folder-name"
-      data-bs-toggle="tooltip"
-      data-bs-placement="top"
+<nav class="px-3 navbar navbar-expand-lg navbar-link bg-primary" data-bs-theme="dark">
+  <div class="container-fluid">
+    <h2 class="text-truncate m-0 navbar-brand">
+      <span
+        class="current-folder-name"
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+      >
+        <i class="current-folder-icon bi bi-folder-fill" aria-hidden="true"></i>{{folder.name}} - {{folder.get_all_files|length}} {% trans 'file' %}{{ folder.get_all_files|length|pluralize }}
+      </span>
+    </h2>
+    <button
+      class="navbar-toggler btn btn-outline-primary active"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#currentfolder"
+      aria-controls="currentfolder"
+      aria-expanded="false"
+      title="{% trans 'Toggle file actions menu' %}"
     >
-      <i class="current-folder-icon bi bi-folder-fill" aria-hidden="true"></i>{{folder.name}} - {{folder.get_all_files|length}} {% trans 'file' %}{{ folder.get_all_files|length|pluralize }}
-    </span>
-  </h2>
-  <button
-    class="navbar-toggler btn btn-outline-primary active"
-    type="button"
-    data-bs-toggle="collapse"
-    data-bs-target="#currentfolder"
-    aria-controls="currentfolder"
-    aria-expanded="false"
-    title="{% trans 'Toggle file actions menu' %}"
-  >
-    <i class="bi bi-three-dots-vertical"></i>
-  </button>
-  <div class="collapse navbar-collapse" id="currentfolder">
-    <ul class="navbar-nav me-auto">
-      {% if request.user == folder.owner or request.user.is_superuser or perms.podfile.change_userfolder or request.user in folder.users.all %}
-        {% if folder.name != "home" %}
-          <li class="nav-item">
-            <button
-              id="currentfolderrename"
-              type="button"
-              class="btn btn-link btn-lg nav-link"
-              data-bs-toggle="modal"
-              data-bs-target="#folderModalCenter"
-              data-oldname="{{folder.name}}"
-              data-folderid="{{folder.id}}"
-              title="{% trans 'Rename folder' %}"
-            >
-              <i class="bi bi-pencil-square" aria-hidden="true"></i>
-            </button>
-          </li>
-          {% if request.user == folder.owner or request.user.is_superuser or perms.podfile.change_userfolder %}
+      <i class="bi bi-three-dots-vertical"></i>
+    </button>
+    <div class="collapse navbar-collapse" id="currentfolder">
+      <ul class="navbar-nav me-auto">
+        {% if request.user == folder.owner or request.user.is_superuser or perms.podfile.change_userfolder or request.user in folder.users.all %}
+          {% if folder.name != "home" %}
             <li class="nav-item">
               <button
-                id="currentfolderdelete"
+                id="currentfolderrename"
                 type="button"
-                class="btn btn-link btn-lg nav-link"
+                class="nav-link"
+                data-bs-toggle="modal"
+                data-bs-target="#folderModalCenter"
+                data-oldname="{{folder.name}}"
                 data-folderid="{{folder.id}}"
-                title="{% trans 'Delete folder' %}"
+                title="{% trans 'Rename folder' %}"
               >
-                {% csrf_token %}
-                <i class="bi bi-trash3-fill" aria-hidden="true"></i>
+                <i class="bi bi-pencil-square" aria-hidden="true"></i>
               </button>
             </li>
+            {% if request.user == folder.owner or request.user.is_superuser or perms.podfile.change_userfolder %}
+              <li class="nav-item">
+                <button
+                  id="currentfolderdelete"
+                  type="button"
+                  class="nav-link"
+                  data-folderid="{{folder.id}}"
+                  title="{% trans 'Delete folder' %}"
+                >
+                  {% csrf_token %}
+                  <i class="bi bi-trash3-fill" aria-hidden="true"></i>
+                </button>
+              </li>
+            {% endif %}
           {% endif %}
-        {% endif %}
 
-        {% if folder.owner == request.user or request.user.is_superuser %}
-          <li class="nav-item">
-            <button
-              id="currentfoldershare"
-              type="button"
-              class="btn btn-link btn-lg nav-link"
-              data-bs-toggle="modal"
-              data-name="{{folder.name}}"
-              data-bs-target="#shareModalCenter"
-              data-folderid="{{folder.id}}"
-              title="{% trans 'Share this folder' %}"
-            >
-              <i class="bi bi-share" aria-hidden="true"></i>
-            </button>
-          </li>
+          {% if folder.owner == request.user or request.user.is_superuser %}
+            <li class="nav-item">
+              <button
+                id="currentfoldershare"
+                type="button"
+                class="nav-link"
+                data-bs-toggle="modal"
+                data-name="{{folder.name}}"
+                data-bs-target="#shareModalCenter"
+                data-folderid="{{folder.id}}"
+                title="{% trans 'Share this folder' %}"
+              >
+                <i class="bi bi-share" aria-hidden="true"></i>
+              </button>
+            </li>
+          {% endif %}
         {% endif %}
-      {% endif %}
 
-      <li class="nav-item">
-        <form
-          class="form-inline my-2 my-lg-0"
-          method="POST"
-          id="formuploadfile"
-          enctype="multipart/form-data"
-          action="{% url 'podfile:uploadfiles' %}"
-          
-        >
-          {% csrf_token %}
-          <input type="hidden" name="folderid" value="{{folder.id}}">
-          {% if type %}
-          <input type="hidden" name="type" value="{{type}}">
-          {% endif %}
-          <div class="custom-file">
-            <input
-              type="file"
-              class="custom-file-input"
-              id="ufile"
-              name="ufile"
-              multiple
-              style="position:fixed;top:-100px"
-            >
-            <button id='podfile_submit_button' type = "submit" style = "display : none"></button>
-            <label for="ufile" class="btn btn-link btn-lg" title={% trans 'Upload Files' %}>
-              <span class="upload-file" id="upload-file-icon">
-                <i class="bi bi-file-earmark-arrow-up-fill" aria-hidden="true"></i>
-              </span>
-              <span class="visually-hidden">{% trans "Upload Files" %}</span>
-            </label>
-          </div>
-        </form>
-      </li>
-    </ul>
+        <li class="nav-item">
+          <form
+            method="POST"
+            id="formuploadfile"
+            enctype="multipart/form-data"
+            action="{% url 'podfile:uploadfiles' %}"
+          >
+            {% csrf_token %}
+            <input type="hidden" name="folderid" value="{{folder.id}}">
+            {% if type %}
+            <input type="hidden" name="type" value="{{type}}">
+            {% endif %}
+            <div class="custom-file">
+              <input
+                type="file"
+                class="d-none"
+                id="ufile"
+                name="ufile"
+                multiple
+              >
+              <button id='podfile_submit_button' type="submit" class="d-none"></button>
+              <label for="ufile" class="btn nav-link" title="{% trans 'Upload Files' %}">
+                <span class="upload-file" id="upload-file-icon">
+                  <i class="bi bi-file-earmark-arrow-up-fill" aria-hidden="true"></i>
+                </span>
+                <span class="visually-hidden">{% trans "Upload Files" %}</span>
+              </label>
+            </div>
+          </form>
+        </li>
+      </ul>
+    </div>
   </div>
 </nav>
 <div class="row loadingformfiles" style="display: none">
@@ -121,7 +120,7 @@ <h2 class="text-truncate h3 m-0">
     <div class="card bg-light mb-3 m-1">
       <div class="card-header p-0 m-0" style="background: none">
         {% if request.user == file.created_by or request.user.is_superuser or perms.podfile.change_customfilemodel or perms.podfile.change_customimagemodel or request.user in folder.users.all %}
-        <nav class="navbar navbar-expand-lg navbar-light p-0 m-0">
+        <nav class="navbar p-0 m-0">
           <button
             class="btn btn-link btn-lg p-0 m-0"
             type="button"
@@ -136,7 +135,7 @@ <h2 class="text-truncate h3 m-0">
               <i class="bi bi-three-dots-vertical"></i>
             </span>
           </button>
-          <div class="file collapse" id="currentfile{{file.id}}">
+          <div class="file collapse bg-primary" data-bs-theme="dark" id="currentfile{{file.id}}">
             <ul class="file-navbar navbar-nav me-auto p-0 m-0">
               <li class="nav-item p-0 m-0">
                 <button
diff --git a/pod/recorder/templates/recorder/add_recording.html b/pod/recorder/templates/recorder/add_recording.html
index f29e37c21a..73cf7e8253 100644
--- a/pod/recorder/templates/recorder/add_recording.html
+++ b/pod/recorder/templates/recorder/add_recording.html
@@ -39,7 +39,7 @@ <h1 class="page_title">{% trans "Adding a new record" %}</h1>
         {% endfor %}
         {% for field in form.visible_fields %}
           {% spaceless %}
-          <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+          <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
             <div class="list-group-item">
               <div class="{% if field.name == "owners" or field.name == "users" %}form-row {% endif %}form-group {% if field.field.required %}form-group-required {% endif %}" >
                 {{ field.errors }}
diff --git a/pod/video/templates/channel/channel_edit.html b/pod/video/templates/channel/channel_edit.html
index 98ee0b76fc..8287453d8a 100644
--- a/pod/video/templates/channel/channel_edit.html
+++ b/pod/video/templates/channel/channel_edit.html
@@ -51,7 +51,7 @@ <h1 class="page_title">{% trans "Editing the channel" %} "{{form.instance.title}
     {% endfor %}
     {% for field in form.visible_fields %}
     {% spaceless %}
-    <div class="{% if " description_" in field.name or "title_" in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+    <div class="{% if " description_" in field.name or "title_" in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
       <div class="list-group-item">
         <div class="{% if field.name == "owners" or field.name == "users" %}form-row {% endif %}form-group {% if field.field.required %}form-group-required {% endif %}">
           {{ field.errors }}
@@ -105,10 +105,10 @@ <h2 class="h4 card-header card-title pod-card__title">{% trans "Form fields"%}</
   <div class="card-body" id="formfields">
     {% for title, values in form.CHANNEL_FORM_FIELDS_HELP_TEXT.items %}
     <div class="card">
-      <button class="btn rounded-0 pod-btn" id="heading-{{forloop.counter}}" data-bs-toggle="collapse" data-bs-target="#collapse-{{forloop.counter}}" aria-expanded="true" aria-controls="collapse-{{forloop.counter}}">
+      <button class="btn rounded-0 pod-btn" id="heading-{{forloop.counter}}" data-bs-toggle="collapse" data-bs-target="#collapse-{{forloop.counter}}" aria-expanded="false" aria-controls="collapse-{{forloop.counter}}">
         {{title}}
       </button>
-      <div id="collapse-{{forloop.counter}}" class="card-body collapse hide card-text small" aria-labelledby="heading-{{forloop.counter}}" data-bs-parent="#formfields">
+      <div id="collapse-{{forloop.counter}}" class="card-body collapse card-text small" aria-labelledby="heading-{{forloop.counter}}" data-bs-parent="#formfields">
         {% for value in values %}
         <p>{{value|safe}}</p>
         {%endfor%}
diff --git a/pod/video/templates/channel/form_theme.html b/pod/video/templates/channel/form_theme.html
index 2df3d75f2e..6441074b28 100644
--- a/pod/video/templates/channel/form_theme.html
+++ b/pod/video/templates/channel/form_theme.html
@@ -24,7 +24,7 @@
       {% endfor %}
       {% for field in form_theme.visible_fields %}
         {% spaceless %}
-          <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}{% with 'is_restricted restrict_access_to_groups password' as res %}{% if field.name in res.split %}collapse restricted_access{% endif %}{% endwith %}">
+          <div class="{% if "description_" in field.name or "title_"  in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}{% with 'is_restricted restrict_access_to_groups password' as res %}{% if field.name in res.split %}collapse restricted_access{% endif %}{% endwith %}">
             <div class="list-group-item">
               <div class="form-group row">
                 {{ field.errors }}
diff --git a/pod/video/templates/channel/theme_edit.html b/pod/video/templates/channel/theme_edit.html
index cc1c2584f8..703e807bb9 100644
--- a/pod/video/templates/channel/theme_edit.html
+++ b/pod/video/templates/channel/theme_edit.html
@@ -78,10 +78,10 @@ <h2 class="h4 card-header card-title pod-card__title">{% trans "Form fields"%}</
   <div class="card-body" id="formfields">
     {% for title, values in form_theme.THEME_FORM_FIELDS_HELP_TEXT.items %}
     <div class="card">
-      <button class="btn rounded-0 pod-btn" id="heading-{{forloop.counter}}" data-bs-toggle="collapse" data-bs-target="#collapse-{{forloop.counter}}" aria-expanded="true" aria-controls="collapse-{{forloop.counter}}">
+      <button class="btn rounded-0 pod-btn" id="heading-{{forloop.counter}}" data-bs-toggle="collapse" data-bs-target="#collapse-{{forloop.counter}}" aria-expanded="false" aria-controls="collapse-{{forloop.counter}}">
         {{title}}
       </button>
-      <div id="collapse-{{forloop.counter}}" class="card-body collapse hide card-text small" aria-labelledby="heading-{{forloop.counter}}" data-bs-parent="#formfields">
+      <div id="collapse-{{forloop.counter}}" class="card-body collapse card-text small" aria-labelledby="heading-{{forloop.counter}}" data-bs-parent="#formfields">
         {% for value in values %}
         <p>{{value}}</p>
         {%endfor%}
diff --git a/pod/video/templates/videos/add_video.html b/pod/video/templates/videos/add_video.html
index fe07d4bafe..8324843828 100644
--- a/pod/video/templates/videos/add_video.html
+++ b/pod/video/templates/videos/add_video.html
@@ -87,10 +87,10 @@ <h2 class="card-header card-title pod-card__title h4">{% trans "Uploading" %}</h
   <h2 class="card-header card-title pod-card__title h4">{% trans "Help for form fields"%}</h2>
   <div class="card-body" id="formfields">
     <div class="card">
-      <button class="btn btn-link" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
+      <button class="btn btn-link" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
         {% trans "File" %}
       </button>
-      <div id="collapse-1" class="card-body collapse hide card-text small" aria-labelledby="heading-1" data-bs-parent="#formfields">
+      <div id="collapse-1" class="card-body collapse card-text small" aria-labelledby="heading-1" data-bs-parent="#formfields">
         <p> {% trans "You can send an audio or video file." %}</p>
         <p> {{allowed_text}} </p>
       </div>
@@ -98,10 +98,10 @@ <h2 class="card-header card-title pod-card__title h4">{% trans "Help for form fi
 
     {% if TRANSCRIPT|length > 0 %}
       <div class="card">
-          <button class="btn btn-link" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2" style="white-space:normal !important; word-wrap: break-word; word-break: normal;">
+          <button class="btn btn-link" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2" style="white-space:normal !important; word-wrap: break-word; word-break: normal;">
           {% trans "Transcript" %}
           </button>
-          <div id="collapse-2" class="card-body collapse hide card-text small" aria-labelledby="heading-2" data-bs-parent="#formfields">
+          <div id="collapse-2" class="card-body collapse card-text small" aria-labelledby="heading-2" data-bs-parent="#formfields">
             <p> {% trans "Transcription is a speech recognition technology that transforms an oral speech into text in an automated way. By selecting language, it will generate a subtitle file automatically when encoding the video." %}</p>
             <p> {% trans "You will probably have to modify this file using the captioning tool in the completion page to improve it." %} </p>
           </div>
diff --git a/pod/video/templates/videos/video.html b/pod/video/templates/videos/video.html
index 2ee8a8ecbf..1e49ee5b0c 100644
--- a/pod/video/templates/videos/video.html
+++ b/pod/video/templates/videos/video.html
@@ -114,7 +114,7 @@ <h2 class="channel_title">
       <div class="accordion accordion-flush mb-2" id="channel_block">
         <div class="accordion-item">
           <h3 class="accordion-header" id="channel_desc_title">
-            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#channel_desc" aria-expanded="true" aria-controls="channel_desc">{% trans "Channel description" %}</button>
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#channel_desc" aria-expanded="false" aria-controls="channel_desc">{% trans "Channel description" %}</button>
           </h3>
           <div id="channel_desc" class="accordion-collapse collapse" aria-labelledby="channel_desc_title" data-bs-parent="#channel_block">
             <div class="accordion-body clearfix">
@@ -144,7 +144,7 @@ <h3 class="theme_title">
           <div class="accordion accordion-flush mb-2" id="theme_block">
             <div class="accordion-item">
               <h4 class="accordion-header theme_title" id="theme_desc_title">
-                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#theme_desc" aria-expanded="true" aria-controls="theme_desc">{% trans "Theme description" %}</button>
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#theme_desc" aria-expanded="false" aria-controls="theme_desc">{% trans "Theme description" %}</button>
               </h4>
               <div id="theme_desc" class="accordion-collapse collapse" aria-labelledby="theme_desc_title" data-bs-parent="#theme_block">
                 <div class="accordion-body clearfix">
diff --git a/pod/video/templates/videos/video_edit.html b/pod/video/templates/videos/video_edit.html
index 9524f147ec..6a5108b6d2 100644
--- a/pod/video/templates/videos/video_edit.html
+++ b/pod/video/templates/videos/video_edit.html
@@ -89,7 +89,7 @@ <h1 class="h2">
         {{field_hidden}}
       {% endfor %}
       {% for field in form.visible_fields %}
-        <div class="mt-3 {% if 'description_' in field.name or 'title_'  in field.name %}collapse hide ms-4{% endif %}{% if 'description_' in field.name %} description{% endif %}{% if 'title_' in field.name %} title{% endif %}{% with 'is_restricted restrict_access_to_groups password' as res %} {% if field.name in res.split %}collapse restricted_access{% endif %}{% endwith %}">
+        <div class="mt-3 {% if 'description_' in field.name or 'title_'  in field.name %}collapse ms-4{% endif %}{% if 'description_' in field.name %} description{% endif %}{% if 'title_' in field.name %} title{% endif %}{% with 'is_restricted restrict_access_to_groups password' as res %} {% if field.name in res.split %}collapse restricted_access{% endif %}{% endwith %}">
           <div class="form-group{% if field.field.required %} form-group-required{% endif %}{% if field.errors %} errors{% endif %}"
           {% if "form-control-file" in field.field.widget.attrs.class and form.instance.video %}style="max-width:44rem; overflow-x:hidden" {% endif %}>
             {% if "form-check-input" in field.field.widget.attrs.class %}
@@ -224,10 +224,10 @@ <h2 class="h4 card-header card-title pod-card__title ps-2">{% trans "Help for fo
     <div class="card-body" id="formfields">
       {% for title, values in form.VIDEO_FORM_FIELDS_HELP_TEXT.items %}
       <div class="card">
-        <button class="btn btn-link" id="heading-{{forloop.counter}}" data-bs-toggle="collapse" data-bs-target="#collapse-{{forloop.counter}}" aria-expanded="true" aria-controls="collapse-{{forloop.counter}}">
+        <button class="btn btn-link" id="heading-{{forloop.counter}}" data-bs-toggle="collapse" data-bs-target="#collapse-{{forloop.counter}}" aria-expanded="false" aria-controls="collapse-{{forloop.counter}}">
           {% trans title %}
         </button>
-        <div id="collapse-{{forloop.counter}}" class="card-body collapse hide card-text small" aria-labelledby="heading-{{forloop.counter}}" data-parent="#formfields">
+        <div id="collapse-{{forloop.counter}}" class="card-body collapse card-text small" aria-labelledby="heading-{{forloop.counter}}" data-parent="#formfields">
           {% for value in values %}
           <p>{{value|safe}}</p>
           {%endfor%}