diff --git a/app/custom/CustomControlBar.tsx b/app/custom/CustomControlBar.tsx
index 4e93c33..5fd7de6 100644
--- a/app/custom/CustomControlBar.tsx
+++ b/app/custom/CustomControlBar.tsx
@@ -164,7 +164,7 @@ export function CustomControlBar() {
             cursor: isRecordingRequestPending ? 'not-allowed' : 'pointer',
           }}
         >
-          {isRecording ? (
+          {isRecording && isSelfRecord ? (
             <span className="material-symbols-outlined">stop_circle</span>
           ) : (
             <span className="material-symbols-outlined">radio_button_checked</span>
diff --git a/app/custom/ParticipantList.tsx b/app/custom/ParticipantList.tsx
index 972669f..0ea0e20 100644
--- a/app/custom/ParticipantList.tsx
+++ b/app/custom/ParticipantList.tsx
@@ -84,8 +84,8 @@ const ParticipantItem: React.FC<ParticipantItemProps> = ({ participant }) => {
               alt={participant.name}
               className="avatar-image"
               style={{
-                maxWidth: '2rem',
-                maxHeight: '2rem',
+                width: '2rem',
+                height: '2rem',
               }}
             />
           ) : (
diff --git a/styles/CustomControlBar.css b/styles/CustomControlBar.css
index 94a8ea1..e07187f 100644
--- a/styles/CustomControlBar.css
+++ b/styles/CustomControlBar.css
@@ -6,11 +6,10 @@
   justify-content: space-between;
   align-items: center;
   padding: 0.8rem 1rem;
-  position: fixed;
+  position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   /* Added for Safari compatibility */
@@ -199,3 +198,9 @@
 .lk-grid-layout {
   height: calc(100vh - 60px) !important;
 }
+
+.control-bar.control-buttons {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}