diff --git a/app/javascript/channels/consumer.js b/app/javascript/channels/consumer.js
index 379c59e0..22ee739e 100644
--- a/app/javascript/channels/consumer.js
+++ b/app/javascript/channels/consumer.js
@@ -19,6 +19,6 @@
 // Action Cable provides the framework to deal with WebSockets in Rails.
 // You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.
 
-window.Cable = require("@rails/actioncable")
-window.App = {}
-App.cable = Cable.createConsumer()
+window.Cable = require("@rails/actioncable");
+window.App = {};
+App.cable = Cable.createConsumer();
diff --git a/app/javascript/channels/index.js b/app/javascript/channels/index.js
index 0cfcf749..298a304d 100644
--- a/app/javascript/channels/index.js
+++ b/app/javascript/channels/index.js
@@ -1,5 +1,5 @@
 // Load all the channels within this directory and all subdirectories.
 // Channel files must be named *_channel.js.
 
-const channels = require.context('.', true, /_channel\.js$/)
-channels.keys().forEach(channels)
+const channels = require.context('.', true, /_channel\.js$/);
+channels.keys().forEach(channels);
diff --git a/app/javascript/packs/edit.js b/app/javascript/packs/edit.js
index 6b2b1ad2..4399fbcf 100644
--- a/app/javascript/packs/edit.js
+++ b/app/javascript/packs/edit.js
@@ -16,8 +16,8 @@
  *  with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
  */
 
-$(document).on('turbolinks:load', function(){
-    $('#copy-icon-group').on('click', function() {
+$(document).on('turbolinks:load', function () {
+    $('#copy-icon-group').on('click', function () {
         let useSharedCodeCheckbox = $('#use_shared_code_checkbox');
         let inputField = $('#shared_code_field');
 
@@ -36,7 +36,7 @@ $(document).on('turbolinks:load', function(){
         let copiedText = $('#copied-text');
         copiedText.css('display', 'inline');
 
-        setTimeout(function() {
+        setTimeout(function () {
             checkIcon.css('display', 'none');
             copyIcon.css('display', 'inline-block');
             copiedText.css('display', 'none');
@@ -62,23 +62,23 @@ $(document).on('turbolinks:load', function(){
 
     handleUseSharedCodeCheckbox();
 
-    $('#allModerators_checkbox').on('click', function() {
+    $('#allModerators_checkbox').on('click', function () {
         var all_mod_checked = $('#allModerators_checkbox').prop("checked");
-        if (all_mod_checked){
+        if (all_mod_checked) {
             $('#waitForModerator_checkbox').prop("checked", false);
         }
     })
 
-    $('#waitForModerator_checkbox').on('click', function() {
+    $('#waitForModerator_checkbox').on('click', function () {
         var wait_mod_checked = $('#waitForModerator_checkbox').prop("checked");
-        if (wait_mod_checked){
+        if (wait_mod_checked) {
             $('#allModerators_checkbox').prop("checked", false);
         }
     })
 
-    function check_record_status(){
+    function check_record_status() {
         var record_checked = $('#record_checkbox').prop("checked");
-        if (!record_checked){
+        if (!record_checked) {
             $('#allowStartStopRecording_checkbox').prop("checked", false);
             $('#allowStartStopRecording_checkbox').prop("disabled", true);
             $('#autoStartRecording_checkbox').prop("checked", false);
@@ -91,33 +91,33 @@ $(document).on('turbolinks:load', function(){
 
     check_record_status(); // check status every time page is loaded
 
-    $('#record_checkbox').on('click', function() {
+    $('#record_checkbox').on('click', function () {
         check_record_status();
     })
 
     // If shared room is selected, allow the code field to be editable
-    $('#use_shared_code_checkbox').on('click', function() {
+    $('#use_shared_code_checkbox').on('click', function () {
         var use_shared_code_checked = $('#use_shared_code_checkbox').prop("checked");
-        if (use_shared_code_checked){
+        if (use_shared_code_checked) {
             $('#shared_code_field').prop("disabled", false);
             $('#shared_code_field').val('');
         } else {
             $('#shared_code_field').prop("disabled", true);
-            console.log("code_val: = ",$('#room_code_value').val() )
+            console.log("code_val: = ", $('#room_code_value').val())
             $('#shared_code_field').val($('#room_code_value').val());
         }
     })
 
-		function checkSharedCodeCheckboxStatus() {
-			var sharedcode_checked = $('#use_shared_code_checkbox').prop("checked");
-        if (!sharedcode_checked){
-					$('#shared_code_field').prop("disabled", true);
-				} else {
-					$('#shared_code_field').prop("disabled", false);
-				}
-		}
+    function checkSharedCodeCheckboxStatus() {
+        var sharedcode_checked = $('#use_shared_code_checkbox').prop("checked");
+        if (!sharedcode_checked) {
+            $('#shared_code_field').prop("disabled", true);
+        } else {
+            $('#shared_code_field').prop("disabled", false);
+        }
+    }
 
-		checkSharedCodeCheckboxStatus();
+    checkSharedCodeCheckboxStatus();
 
 
 });
diff --git a/app/javascript/packs/meetingInfo.js b/app/javascript/packs/meetingInfo.js
index 9cdccb38..d247862c 100644
--- a/app/javascript/packs/meetingInfo.js
+++ b/app/javascript/packs/meetingInfo.js
@@ -18,33 +18,33 @@
 
 import '../channels/consumer'
 
-$(document).on('turbolinks:load', function(){
+$(document).on('turbolinks:load', function () {
 
   var controller = $("body").data('controller');
   var action = $("body").data('action');
-	var chosenRoomId = $("#body").data("chosenroomid");
-	
-  if (!(controller == "rooms" && action == "meeting_join")){
+  var chosenRoomId = $("#body").data("chosenroomid");
+
+  if (!(controller == "rooms" && action == "meeting_join")) {
     App.meetingInfo = App.cable.subscriptions.create({
-        channel: "MeetingInfoChannel", 
-        room_id: chosenRoomId
-      }, {
-      connected: function() {
-        console.log("Connected to meeting info channel");
+      channel: "MeetingInfoChannel",
+      room_id: chosenRoomId
+    }, {
+      connected: function () {
+        console.log("Connected to meeting info channel for [" + chosenRoomId + "]");
       },
-      disconnected: function() {
+      disconnected: function () {
         console.log("Disconnected from meeting info channel");
       },
-      received: function(data) {
+      received: function (data) {
         console.log("Received data from meeting info channel. data: " + JSON.stringify(data));
-        if (data.meeting_in_progress == true){
+        if (data.meeting_in_progress == true) {
           startTime = data.elapsed_time
           start_elapsed_time();
           display_participant_count(data.participant_count);
-          show_elems(); 
+          show_elems();
         }
-        if (data.action == "end"){
-          hide_elements();          
+        if (data.action == "end") {
+          hide_elements();
         }
       }
     });
@@ -53,20 +53,20 @@ $(document).on('turbolinks:load', function(){
 
 var startTime = 0;
 
-var show_elems = function(){
+var show_elems = function () {
   $('#end-meeting-btn').show();
   $('#meeting-info-msg').show();
   $('#wait-for-mod-msg').hide();
 }
 
-var hide_elements = function(){
+var hide_elements = function () {
   $('#end-meeting-btn').hide();
   $('#meeting-info-msg').hide();
   $('#wait-for-mod-msg').hide();
 }
 
-var display_participant_count = function(participantCount){
-  if (participantCount == 1){
+var display_participant_count = function (participantCount) {
+  if (participantCount == 1) {
     var pplprson = "person";
   } else {
     var pplprson = "people";
@@ -75,7 +75,7 @@ var display_participant_count = function(participantCount){
   document.getElementById('ppl-or-person-elem').innerHTML = pplprson;
 }
 
-var start_elapsed_time = function(){
+var start_elapsed_time = function () {
   var diff = new Date() - new Date(startTime); // the elapsed time in ms
 
   var secs = Math.floor((diff / 1000) % 60);
@@ -86,7 +86,7 @@ var start_elapsed_time = function(){
   secs = addZeroMaybe(secs);
   hrs = addZeroMaybe(hrs);
 
-  document.getElementById('elapsed-time-elem').innerHTML =  hrs + ":" + mins + ":" + secs;
+  document.getElementById('elapsed-time-elem').innerHTML = hrs + ":" + mins + ":" + secs;
 
   setTimeout(start_elapsed_time, 500);
 }
diff --git a/app/javascript/packs/rename.js b/app/javascript/packs/rename.js
index d62163b4..703cb4eb 100644
--- a/app/javascript/packs/rename.js
+++ b/app/javascript/packs/rename.js
@@ -16,16 +16,16 @@
  *  with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
  */
 
-function func(){
+function func() {
   var controller = $("body").data('controller');
   var action = $("body").data('action');
 
-  if(controller == "rooms" && action == "show" || controller == "rooms" && action == "update"){
+  if (controller == "rooms" && action == "show" || controller == "rooms" && action == "update") {
 
     // Set a recording row rename event
-    var configure_recording_row = function(recording_text, recording_text_id){
+    var configure_recording_row = function (recording_text, recording_text_id) {
 
-      function register_recording_text_event(e){
+      function register_recording_text_event(e) {
         // Remove current window events
         $(window).off('mousedown keydown');
 
@@ -34,33 +34,33 @@ function func(){
         let $input = $('<input type="text"/>').val($el.text().trim()).attr('id', $el.attr('id')).attr('class', $el.attr('class'));
         $el.replaceWith($input);
 
-        var save = function(){
+        var save = function () {
           let $text = $('<text/>').text($input.val()).attr('class', $input.attr('class'));
           $input.replaceWith($text);
           submit_rename_request(recording_text);
         };
 
-        $input.on('blur keyup', function(e) {
-          if (e.type === 'blur' || e.keyCode === 13)  { // keycode is depreciated by still recognized by browsers, it's alt (.key) doesnt work in firefox
+        $input.on('blur keyup', function (e) {
+          if (e.type === 'blur' || e.keyCode === 13) { // keycode is depreciated by still recognized by browsers, it's alt (.key) doesnt work in firefox
             save();
             this.focus();
           }
         });
-       
+
         // Register the events for being able to exit the input box.
         register_window_event(recording_text, recording_text_id, '#edit-record', 'edit-recordid');
       }
 
-      recording_text.find('a').on('click focusout', function(e){
+      recording_text.find('a').on('click focusout', function (e) {
         register_recording_text_event(e);
       });
 
-      recording_text.find('#recording-title-text').on('focusout', function(e){
+      recording_text.find('#recording-title-text').on('focusout', function (e) {
         $(window).off('mousedown keydown');
         submit_rename_request(recording_text);
       });
 
-      recording_text.find('#recording-description-text').on('focusout', function(e){
+      recording_text.find('#recording-description-text').on('focusout', function (e) {
         $(window).off('mousedown keydown');
         submit_rename_request(recording_text);
       });
@@ -68,22 +68,22 @@ function func(){
 
     // Register window event to submit new name
     // upon click or upon pressing the enter key
-    var register_window_event = function(element, textfield_id, edit_button_id, edit_button_data){
-      $(window).on('mousedown keydown', function(clickEvent){
+    var register_window_event = function (element, textfield_id, edit_button_id, edit_button_data) {
+      $(window).on('mousedown keydown', function (clickEvent) {
 
         // Return if the text is clicked
-        if(clickEvent.type == "mousedown" && clickEvent.target.id == textfield_id){
+        if (clickEvent.type == "mousedown" && clickEvent.target.id == textfield_id) {
           return;
         }
 
         // Return if the edit icon is clicked
-        if(clickEvent.type == "mousedown" && $(clickEvent.target).is(edit_button_id) &&
-          $(clickEvent.target).data(edit_button_data) === element.find(edit_button_id).data(edit_button_data)){
+        if (clickEvent.type == "mousedown" && $(clickEvent.target).is(edit_button_id) &&
+          $(clickEvent.target).data(edit_button_data) === element.find(edit_button_id).data(edit_button_data)) {
           return;
         }
 
         // Check if event is keydown and enter key is not pressed
-        if(clickEvent.type == "keydown" && clickEvent.which !== 13){
+        if (clickEvent.type == "keydown" && clickEvent.which !== 13) {
           return;
         }
 
@@ -95,8 +95,8 @@ function func(){
     }
 
     // Apply ajax request depending on the element that triggered the event
-    var submit_rename_request = function(element){
-      if(element.is('#recording-title')){
+    var submit_rename_request = function (element) {
+      if (element.is('#recording-title')) {
         submit_update_request({
           setting: "rename_recording",
           record_id: element.data('recordid'),
@@ -104,7 +104,7 @@ function func(){
           launch_nonce: element.data('launch-nonce'),
         });
       }
-      else if(element.is('#recording-description')){
+      else if (element.is('#recording-description')) {
         submit_update_request({
           setting: "describe_recording",
           record_id: element.data('recordid'),
@@ -115,12 +115,12 @@ function func(){
     }
 
     // Helper for submitting ajax requests
-    var submit_update_request = function(data){
+    var submit_update_request = function (data) {
       // Send ajax request for update
       $.ajax({
         url: window.location.pathname + '/recording/' + data['record_id'] + '/update?launch_nonce=' + data['launch_nonce'],
         type: "POST",
-        beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
+        beforeSend: function (xhr) { xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) },
         data: data,
       });
     }
@@ -128,7 +128,7 @@ function func(){
     var recording_rows = $('#recording-table').find('tr');
 
     // Configure renaming for recording rows
-    recording_rows.each(function(){
+    recording_rows.each(function () {
       var recording_title = $(this).find('#recording-title');
       var recording_description = $(this).find('#recording-description');
       configure_recording_row(recording_title, 'recording-title-text');
diff --git a/app/javascript/packs/rooms.js b/app/javascript/packs/rooms.js
index eebe97b4..2beedd58 100644
--- a/app/javascript/packs/rooms.js
+++ b/app/javascript/packs/rooms.js
@@ -16,43 +16,43 @@
  *  with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
  */
 
-$(document).on('turbolinks:load', function(){
+$(document).on('turbolinks:load', function () {
     var room = window.location.pathname.split('/')[3];
-   
+
     var controller = $("body").data('controller');
     var action = $("body").data('action');
-    if (controller == "rooms" && action == "meeting_join"){
+    if (controller == "rooms" && action == "meeting_join") {
         var personal_join_link = $("body").data('meeting');
         App.waiter = App.cable.subscriptions.create({
             channel: "WaitChannel",
             room_id: room
         }, {
-            connected: function(data) {
+            connected: function (data) {
                 console.log("connected to wait");
             },
-            disconnected: function(data) {
+            disconnected: function (data) {
                 console.log("disconnected to wait");
                 console.log(data);
             },
-            received: function(data) {
+            received: function (data) {
                 console.log("This is the wait data: " + JSON.stringify(data));
-                if (data.action == "started"){
+                if (data.action == "started") {
                     $('#wait-for-mod-msg').hide();
                     window.location.replace(personal_join_link);
                     this.perform("notify_join");
-                    this.unsubscribe();                                
+                    this.unsubscribe();
                 }
             }
         })
     }
-   
-    $('#end-meeting-btn').on('click', function() {
+
+    $('#end-meeting-btn').on('click', function () {
         var end_meeting_url = $(this).data('url');
 
         $.ajax({
             url: end_meeting_url,
             type: "POST",
-            beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
+            beforeSend: function (xhr) { xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) },
             data: "",
         });
     })
@@ -66,28 +66,28 @@ $(document).on('turbolinks:load', function(){
     With Dynamic State Partitioning enabled, Firefox provides embedded resources with a separate storage bucket for every top-level website, causing the request to be denied if it comes from a third party. Embedded third-parties may request access to the top-level storage bucket, which is what we're doing with the requestAccess() method.
     */
     function requestAccess() {
-         document.requestStorageAccess().then(
-          () => { 
-            console.log('access granted!');
-            $('#access-alert').hide();
-            // the user needs to reload and then press the button again for it to work 
-           },
-          () => { console.log('access denied') }
+        document.requestStorageAccess().then(
+            () => {
+                console.log('access granted!');
+                $('#access-alert').hide();
+                // the user needs to reload and then press the button again for it to work 
+            },
+            () => { console.log('access denied') }
         );
     }
 
-    if (isFirefox || isSafari){
+    if (isFirefox || isSafari) {
         document.hasStorageAccess().then((hasAccess) => {
             if (!hasAccess && (isFirefox || isSafari)) {
                 $('#access-alert').show();
                 console.log("no access");
-                
-            } else {    
+
+            } else {
                 console.log("Already has access");
             }
         });
     }
 
     $('#accept-btn').on('click', requestAccess);
-    
+
 });
diff --git a/app/javascript/packs/search.js b/app/javascript/packs/search.js
index 37c8d8a0..721d86df 100644
--- a/app/javascript/packs/search.js
+++ b/app/javascript/packs/search.js
@@ -16,14 +16,14 @@
  *  with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
  */
 
-$(document).on('turbolinks:load', function(){
+$(document).on('turbolinks:load', function () {
   var controller = $("body").data('controller');
   var action = $("body").data('action');
 
-  if(controller == "rooms" && action == "show"){
+  if (controller == "rooms" && action == "show") {
     search_input = $('#search_bar');
 
-    search_input.bind("keyup", function(event){
+    search_input.bind("keyup", function (event) {
 
       // Retrieve the current search query
       search_query = search_input.find(".form-control").val();
@@ -33,21 +33,21 @@ $(document).on('turbolinks:load', function(){
 
       recordings = $('#recording-table').find('tr');
 
-      recordings.each(function(){
-        if($(this).find('text').text().toLowerCase().includes(search_query.toLowerCase())){
+      recordings.each(function () {
+        if ($(this).find('text').text().toLowerCase().includes(search_query.toLowerCase())) {
           recordings_found = recordings_found + 1;
           $(this).show();
         }
-        else{
+        else {
           $(this).hide();
         }
       });
 
       // Show "No recordings match your search" if no recordings found
-      if(recordings_found == 0){
+      if (recordings_found == 0) {
         $('#no_recordings_found').show();
       }
-      else{
+      else {
         $('#no_recordings_found').hide();
       }
     });
diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
index 1fa1f5ce..4d152a1f 100644
--- a/app/javascript/stylesheets/application.scss
+++ b/app/javascript/stylesheets/application.scss
@@ -22,4 +22,4 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import 'scaffolds.scss';
-@import 'tailwind';
+@import 'tailwind';
\ No newline at end of file
diff --git a/app/javascript/stylesheets/errors.scss b/app/javascript/stylesheets/errors.scss
index 1c4a148c..8bff75ef 100644
--- a/app/javascript/stylesheets/errors.scss
+++ b/app/javascript/stylesheets/errors.scss
@@ -26,5 +26,5 @@
 }
 
 .error-message {
-font-size: 2rem;
-}
+	font-size: 2rem;
+}
\ No newline at end of file
diff --git a/app/javascript/stylesheets/rooms.scss b/app/javascript/stylesheets/rooms.scss
index 940aa9c2..209c0f03 100644
--- a/app/javascript/stylesheets/rooms.scss
+++ b/app/javascript/stylesheets/rooms.scss
@@ -21,12 +21,15 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 
-html,body,.container {
-    height: 94%;
+html,
+body,
+.container {
+  height: 94%;
 }
+
 .container {
-    display:table;
-    width: 100%;
+  display: table;
+  width: 100%;
 }
 
 .dropdown {
@@ -35,11 +38,11 @@ html,body,.container {
 }
 
 /* Dropdown Content (Hidden by Default) */
-.dropdown-content{
+.dropdown-content {
   display: none;
   background-color: #f9f9f9;
   min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 9;
 }
 
@@ -74,7 +77,8 @@ input.recording-text {
   border-top: 10px solid #263f88;
   width: 140px;
   height: 140px;
-  -webkit-animation: spin 2s linear infinite; /* Safari */
+  -webkit-animation: spin 2s linear infinite;
+  /* Safari */
   animation: spin 2s linear infinite;
 }
 
@@ -87,7 +91,7 @@ input.recording-text {
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
- 
+
   /* Position the tooltip text - see examples below! */
   position: absolute;
   z-index: 1;
@@ -98,17 +102,19 @@ input.recording-text {
   visibility: visible;
 }
 
-.edit_hover_class a{
-  visibility:hidden;
+.edit_hover_class a {
+  visibility: hidden;
 }
+
 .edit_hover_class:hover a {
-  visibility:visible;
+  visibility: visible;
   background-color: white;
 }
 
 .input-group-prepend {
   display: flex;
 }
+
 .copy-icon {
   margin-left: 5px;
   cursor: pointer;
@@ -131,11 +137,21 @@ input.recording-text {
 
 /* Safari */
 @-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/stylesheets/scaffolds.scss b/app/javascript/stylesheets/scaffolds.scss
index 4b615805..14d00eaf 100644
--- a/app/javascript/stylesheets/scaffolds.scss
+++ b/app/javascript/stylesheets/scaffolds.scss
@@ -37,7 +37,9 @@ a {
 
 
 div {
-  &.field, &.actions {
+
+  &.field,
+  &.actions {
     margin-bottom: 10px;
   }
 }
@@ -85,34 +87,36 @@ svg {
 
 summary {
   position: relative;
-  display: block; /* turns off the open indicator on modern UA's */
+  display: block;
+  /* turns off the open indicator on modern UA's */
   padding: 1rem 3em 1em 0em;
   border: 1px;
   color: black;
 }
 
 summary::-webkit-details-marker {
-  display:none; /* turn off open indicator in crApple's "new IE" */
+  display: none;
+  /* turn off open indicator in crApple's "new IE" */
 }
 
 summary::before {
-  top:1rem;
+  top: 1rem;
   content: '';
   margin-right: 1em;
-  display:inline-block;
-  width:1em;
-  height:1em;
-  font-weight:bold;
-  text-align:center;
-  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z'/%3E%3C/svg%3E") center no-repeat;
-  background-size:contain;
-  transition:transform 0.5s;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  font-weight: bold;
+  text-align: center;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000' d='M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z'/%3E%3C/svg%3E") center no-repeat;
+  background-size: contain;
+  transition: transform 0.5s;
 }
 
-details[open]:not(.closed) > summary::before {
-  transform:rotateX(180deg);
+details[open]:not(.closed)>summary::before {
+  transform: rotateX(180deg);
 }
 
 details p {
-  margin:1em;
-}
+  margin: 1em;
+}
\ No newline at end of file
diff --git a/app/javascript/stylesheets/tailwind.scss b/app/javascript/stylesheets/tailwind.scss
index 441fce5d..cc117de3 100644
--- a/app/javascript/stylesheets/tailwind.scss
+++ b/app/javascript/stylesheets/tailwind.scss
@@ -16,14 +16,14 @@
  *  with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
  */
 
- // This file contains custom created tailwind componenets for reusability
- 
- @layer components {
-    .btn-primary {
-      @apply py-2 px-4 bg-bbb-blue text-white font-semibold rounded-lg shadow-md hover:bg-darker-bbb-blue focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
-    }
+// This file contains custom created tailwind componenets for reusability
 
-    .btn-secondary {
-        @apply py-2 px-4 bg-white text-black font-semibold rounded-lg shadow-md border hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
-    }
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-bbb-blue text-white font-semibold rounded-lg shadow-md hover:bg-darker-bbb-blue focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
   }
+
+  .btn-secondary {
+    @apply py-2 px-4 bg-white text-black font-semibold rounded-lg shadow-md border hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
+  }
+}
\ No newline at end of file