diff --git a/admin/css/wp-agora-io-admin.css b/admin/css/wp-agora-io-admin.css
index 01ed266..ea3ef59 100644
--- a/admin/css/wp-agora-io-admin.css
+++ b/admin/css/wp-agora-io-admin.css
@@ -521,4 +521,43 @@ td.recordings.column-recordings {
 
 .modal-body #layout-image-content{
   text-align: center;
+}
+
+.agora_recording_shortcode_section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.agora_recording_shortcode_section div#agora_recording_shortcode {
+    background: rgba(0,0,0,0.7);
+    margin: 0 10px 0 0;
+    padding: 9px 10px;
+    color: #fff;
+    border-radius: 5px;
+    line-height: 0.8;
+}
+
+.agora_recording_shortcode_section .agora-copy-recording-shortcode-btn{line-height: 0.8;
+    padding: 6px 10px;}
+
+    .agora_io_video_recording_container .agora_io_video_container>video {
+    height: 100%;
+    width: 100%;
+}
+
+.agora_io_video_recording_container .agora_io_video_container {
+    flex: 0 0 25%;
+    max-width: 25%;
+    padding-right: 25px;
+    box-sizing: border-box;
+    margin-top: 25px;
+}
+
+.agora_io_video_recording_container {
+    display: flex;
+    flex-wrap: wrap;
+}
+.agora_recording_videos_section {
+    clear: both;
 }
\ No newline at end of file
diff --git a/admin/views/agora-admin-recording-listings.php b/admin/views/agora-admin-recording-listings.php
index 0d2bfca..4c3e929 100644
--- a/admin/views/agora-admin-recording-listings.php
+++ b/admin/views/agora-admin-recording-listings.php
@@ -12,6 +12,15 @@
     <h3><strong>Channel Name:</strong> <?php echo $channel_name; ?></h3>
 
     <div class="agora_recordings_filter_section">
+
+      
+
+    <div class="agora_recording_shortcode_section">
+        <div id="agora_recording_shortcode"></div>
+        <button class="agora-copy-recording-shortcode-btn">Copy</button>
+    </div>
+</div>
+
         <div class="agora_recordings_filter_inner_section agora_recording_type_section">
             <label for="agora_recording_type">Recording Type</label>
             <select class="create_recordings_shortcode" name="agora_recording_type" id="agora_recording_type" onchange="updateRecordingTypeOptions(this.value)">
@@ -33,16 +42,10 @@
 
         <div id="agoraio_users_list" class="agora_recordings_filter_inner_section agora_recording_users_list_section"></div>
        
-        <div class="agora_recordings_filter_inner_section agora_recording_type_section">
+         <div class="agora_recordings_filter_inner_section agora_recording_type_section">
             <button id="generateRecShortcodeBtn">Generate shortcode</button>
-        </div>    
-
-    </div>
+            </div>
 
-    <div class="agora_recording_shortcode_section">
-        <div id="agora_recording_shortcode"></div>
-        <button class="agora-copy-recording-shortcode-btn">Copy</button>
-    </div>
 
     <div class="agora_recording_videos_section">
     </div>
diff --git a/admin/views/agora-admin-settings.php b/admin/views/agora-admin-settings.php
index 0e7a319..409107f 100644
--- a/admin/views/agora-admin-settings.php
+++ b/admin/views/agora-admin-settings.php
@@ -152,83 +152,7 @@
     </div>
   </div>
 
-  <div class="card">
-    <h2 class="title">Global Settings</h2>
-    <br class="clear" />
-    <div class="inside">
-      <div class="flex app-setting" id="globalColors">
-        <div class="col label">
-        <table class="form-table">
-          <tr>
-            <th scope="row"><label for="unselectedVideoControlsButtonsColor"><?php _e('Video Controls Buttons Color Unselected', 'agoraio') ?></label></th>
-            <td>
-              <input
-                id="unselectedVideoControlsButtonsColor"
-                name="unselectedVideoControlsButtonsColor"
-                type="text"
-                class="agora-color-picker inputBoxGS"
-                value="<?php echo $agora_options['global_colors']['unselectedVideoControlsButtonsColor'] ?>"
-                data-default-color="#1E73BE">
-            </td>
-          </tr>
-          <tr>
-            <th scope="row"><label for="selectedVideoControlsButtonsColor"><?php _e('Video Controls Buttons Color Selected', 'agoraio') ?></label></th>
-            <td>
-              <input
-                id="selectedVideoControlsButtonsColor"
-                name="selectedVideoControlsButtonsColor"
-                type="text"
-                class="agora-color-picker inputBoxGS"
-                value="<?php echo $agora_options['global_colors']['selectedVideoControlsButtonsColor'] ?>"
-                data-default-color="#1E73BE">
-            </td>
-          </tr>
-          <tr>
-            <th scope="row"><label for="otherButtonsColor"><?php _e('Other Buttons Color', 'agoraio') ?></label></th>
-            <td>
-              <input
-                id="otherButtonsColor"
-                name="otherButtonsColor"
-                type="text"
-                class="agora-color-picker inputBoxGS"
-                value="<?php echo $agora_options['global_colors']['otherButtonsColor'] ?>"
-                data-default-color="#ffffff">
-            </td>
-          </tr>
-          <tr>
-            <th scope="row"><label for="backgroundColorVideoMuted"><?php _e('Background Color - Video Muted', 'agoraio') ?></label></th>
-            <td>
-              <input
-                id="backgroundColorVideoMuted"
-                name="backgroundColorVideoMuted"
-                type="text"
-                class="agora-color-picker inputBoxGS"
-                value="<?php echo $agora_options['global_colors']['backgroundColorVideoMuted'] ?>"
-                data-default-color="#ffffff">
-            </td>
-          </tr>
-          <tr>
-            <th scope="row"><label for="backgroundColorPanels"><?php _e('Background Color - Panels', 'agoraio') ?></label></th>
-            <td>
-              <input
-                id="backgroundColorPanels"
-                name="backgroundColorPanels"
-                type="text"
-                class="agora-color-picker inputBoxGS"
-                value="<?php echo $agora_options['global_colors']['backgroundColorPanels'] ?>"
-                data-default-color="#ffffff">
-            </td>
-          </tr>
-        </table>
-        </div>
-        
-      </div>
-      <p>
-        <a href="#" class="button-primary" id="globalColors-save" style="margin:0 10px">Save</a>
-      </p>
-      <span class="error error-messageglobalColors"></span>
-    </div>
-  </div>
+ 
 
   <div class="card">
     <h2 class="title">Chat Support</h2>
@@ -425,6 +349,84 @@ class="agora-color-picker inputBoxGS"
 </script>
 <?php /* Drag-drop */ ?>
 
+ <div class="card">
+    <h2 class="title">Global Settings</h2>
+    <br class="clear" />
+    <div class="inside">
+      <div class="flex app-setting" id="globalColors">
+        <div class="col label">
+        <table class="form-table">
+          <tr>
+            <th scope="row"><label for="unselectedVideoControlsButtonsColor"><?php _e('Video Controls Buttons Color Unselected', 'agoraio') ?></label></th>
+            <td>
+              <input
+                id="unselectedVideoControlsButtonsColor"
+                name="unselectedVideoControlsButtonsColor"
+                type="text"
+                class="agora-color-picker inputBoxGS"
+                value="<?php echo $agora_options['global_colors']['unselectedVideoControlsButtonsColor'] ?>"
+                data-default-color="#1E73BE">
+            </td>
+          </tr>
+          <tr>
+            <th scope="row"><label for="selectedVideoControlsButtonsColor"><?php _e('Video Controls Buttons Color Selected', 'agoraio') ?></label></th>
+            <td>
+              <input
+                id="selectedVideoControlsButtonsColor"
+                name="selectedVideoControlsButtonsColor"
+                type="text"
+                class="agora-color-picker inputBoxGS"
+                value="<?php echo $agora_options['global_colors']['selectedVideoControlsButtonsColor'] ?>"
+                data-default-color="#1E73BE">
+            </td>
+          </tr>
+          <tr>
+            <th scope="row"><label for="otherButtonsColor"><?php _e('Other Buttons Color', 'agoraio') ?></label></th>
+            <td>
+              <input
+                id="otherButtonsColor"
+                name="otherButtonsColor"
+                type="text"
+                class="agora-color-picker inputBoxGS"
+                value="<?php echo $agora_options['global_colors']['otherButtonsColor'] ?>"
+                data-default-color="#ffffff">
+            </td>
+          </tr>
+          <tr>
+            <th scope="row"><label for="backgroundColorVideoMuted"><?php _e('Background Color - Video Muted', 'agoraio') ?></label></th>
+            <td>
+              <input
+                id="backgroundColorVideoMuted"
+                name="backgroundColorVideoMuted"
+                type="text"
+                class="agora-color-picker inputBoxGS"
+                value="<?php echo $agora_options['global_colors']['backgroundColorVideoMuted'] ?>"
+                data-default-color="#ffffff">
+            </td>
+          </tr>
+          <tr>
+            <th scope="row"><label for="backgroundColorPanels"><?php _e('Background Color - Panels', 'agoraio') ?></label></th>
+            <td>
+              <input
+                id="backgroundColorPanels"
+                name="backgroundColorPanels"
+                type="text"
+                class="agora-color-picker inputBoxGS"
+                value="<?php echo $agora_options['global_colors']['backgroundColorPanels'] ?>"
+                data-default-color="#ffffff">
+            </td>
+          </tr>
+        </table>
+        </div>
+        
+      </div>
+      <p>
+        <a href="#" class="button-primary" id="globalColors-save" style="margin:0 10px">Save</a>
+      </p>
+      <span class="error error-messageglobalColors"></span>
+    </div>
+  </div>
+
   <script type="text/javascript">
     window.AGORA_ADMIN_URL = '<?php echo plugin_dir_url(__DIR__ . '/../index.php'); ?>';
   </script>
diff --git a/public/css/chat-fab.css b/public/css/chat-fab.css
index 4cbdc2c..94f140d 100644
--- a/public/css/chat-fab.css
+++ b/public/css/chat-fab.css
@@ -707,10 +707,10 @@
   width: auto;
 }
 
-.agora-fullscreen .fabs.fabs-chat-left, .agora-fullscreen .fabs.fabs-chat-right{
+/*.agora-fullscreen .fabs.fabs-chat-left, .agora-fullscreen .fabs.fabs-chat-right{
   top: auto;
   transform: translateY(-150%);
-}
+}*/
 
 /* chat position bottom */
 .fabs.fabs-chat-bottom {
diff --git a/public/css/wp-agora-styles.css b/public/css/wp-agora-styles.css
index 41de64a..291e14a 100644
--- a/public/css/wp-agora-styles.css
+++ b/public/css/wp-agora-styles.css
@@ -177,7 +177,7 @@
 .agora .screen-users .user {
   position: relative;
   overflow: hidden;
-  padding: 3px;
+  padding: 2px;
   background-color: #111;
 }
 .screen-users .user video {
@@ -642,7 +642,7 @@
   position: absolute;
   top: 88px;
   left: 7px;
-  z-index: 9;
+  z-index: 1;
 }
 
 .toast:not(:last-child) {
@@ -1031,7 +1031,9 @@ button#exit-btn {
 /* End files in chat */
 
 /****************video*mute*overlay*******************/
-.user .no-video-overlay {
+.user .no-video-overlay,
+.screenshare-container .no-video-overlay
+ {
   position: absolute;
   z-index: 2;
   width: calc(100%);
diff --git a/public/views/parts/footer-communication.php b/public/views/parts/footer-communication.php
index 154c5a9..661c40f 100644
--- a/public/views/parts/footer-communication.php
+++ b/public/views/parts/footer-communication.php
@@ -116,7 +116,7 @@
     <div class="error-container">
         <span id="error-msg" class="text-danger"></span>
     </div>
-    <?php if ($enableChat===true) { require_once('chat-fab.php'); } ?>
+    
 </footer>
-
+<?php if ($enableChat===true) { require_once('chat-fab.php'); } ?>
 <?php require_once "toast.php" ?>
\ No newline at end of file